デザイナー・ディレクターに知っておいてほしいフロントエンドの知識と歴史【ディレクターズ×GIG コラボイベント後編】

2018年12月19日（水）、Workship MAGAZINEの運営会社である株式会社GIGにて、株式会社ディレクターズ様とのコラボイベント『デザイナー・ディレクター向け！これだけは知っておきたいフロントエンド / サーバーサイドの知識』が開催されました。

本イベントでは、フロントエンドやサーバーサイドの基礎知識を押さえておきたいデザイナーやディレクターにとって有意義な講演が行われました。今回はその内容を、【前編（サーバーサイドの知識）】と【後編（フロントエンドの知識）】に分けてご紹介します。

前編はこちら▼

デザイナー・ディレクターに知っておいてほしいフロントエンドの知識

今回は株式会社GIGのフロントエンドエンジニア兼事業部長である江崎さんが登壇しました。

江崎 修平（えざき しゅうへい）

株式会社GIG フロントエンドエンジニア兼ソリューション事業部 事業部長。

過去に会社経営の経験を持つ。案件を正しい道に導くためにマネジメント/ディレクションしつつ、エンジニアとして実際の開発も行う。現在はSPA開発のスペシャリストとして、さまざまなプロジェクトから引く手数多となっている。

当日のスライドはこちら▼

フロントエンドは覚えることが急激に増えている

今、フロントエンド界隈は荒れに荒れています。

どういうことかというと、フロントエンドエンジニアは覚えなければならないことが急激に増えているのです。SPA、Vue.js、CSS、SASS、Webpack、Redux、npm……

なぜこれほどまでに、フロントエンド開発は覚えることが増えているのでしょうか？その謎を紐解くために、まずはフロントエンドの進化の歴史を見てみましょう。

フロントエンドの歴史（1990〜2010年代）

1990年代

1995年にJavaScript、1996年にCSSが登場。当初は対応ブラウザの少ないマイナー言語でしたが、徐々にFirefoxやOpera、InternetExplorerなどの主要ブラウザがサポートしはじめ普及していきました。サーバーサイド言語のCGIが登場したのもこの頃です。

2000年代

2000年代に入ると、サーバーサイドのMVC型フレームワークが登場し流行しました。

2000年代後半には、HTML5、CSS3、Ajax、jQuery、Node.jsなどが登場します。FlashからJSへの切り替えも進みました。

2010年代

2010年代初頭、Chromeに搭載されたV8EngineによりJSレンダリングが高速化しました。

近年では、React.jsやVue.jsをはじめとするWebフロントエンドフレームワークが次々と登場し、jQueryでは耐えきれなくなったフロントエンドの整備が始まりました。

フロントエンドを大きく変えた7つの衝撃

このようなWebの進化の中でも特にフロントエンド界隈に衝撃を与えた出来事を、江崎さんは7つ挙げました。

1. Ajaxの登場

Ajax登場以前、フロントエンドのJavaScriptはブラウザ対応が面倒で、文字を点滅させる、文字や背景色を変える、時間を表示する……といった簡単な動きをつけることしかできませんでした。

しかし、2005年にGoogleがGoogleMapをリリースしました。Ajaxを使うことで、ページを遷移することなく、ブラウザ上で地図を拡大・縮小することを実現したのです。それまでの常識をくつがえすような機能で、これによりAjaxが一気に広まりました。

2. jQueryの登場

Ajaxは普及しましたが、求められるDOMの操作が高度でした。そんな悩める技術者のために登場したのがjQueryです。アニメーション作成やブラウザ間の実装違いも対応してくれる上、2007年のiPhone発売でFlashからJSへの移行が加速したため、jQueryは爆発的に広まりました。

サーバーサイドもRESTfulをベースにしたWeb APIの提供をするだけでよくなったため、フロントエンドとサーバーサイドの分業が進みました。

3. HTML5, CSS3登場

HTML5とCSS3が登場したことで、角丸の実装が楽になるなど、リッチインターフェースの表示に大きく貢献しました。

またHTML5では、より明示的にマークアップできるよう、いくつもの新しいタグが追加されました。

ここまでの3点でも十分大きな変化だったのですが、まだまだ序章にすぎませんでした。ここまでがいわゆる『Web2.0』と呼ばれる時代です。より複雑化した『モダンフロントエンド』の話はここからです。

4. HTML5向けJavaScriptのAPI追加

HTML5では、DOM API、Service Worker、LocalStorageといった、実務に役立つJavaScriptのAPIが多数実装されました。

5. Node.jsによるJSエコシステムの進化

2009年に登場したNode.jsは、サーバーサイド言語ながらJavaScriptで書けるため、フロントエンドの開発・検証環境に大きな変化をもたらしました。

また、パッケージマネージャ・npmも普及し、開発したものをモジュール化できるようになりました。

6. ECMAScript 2015によるJavaScriptの進化

JavaScriptはECMAによって標準化されています。

ECMAが提唱した仕様を各ブラウザベンダーがそのまま実装する仕組みになっているため、ブラウザ間の誤差が生まれづらくなっています。

特にECMAScript 2015は、数々のメソッドや構文の実装が行われ、JavaScriptがプログラミング言語として大きく進化することになりました。

7. React.js、Vue.jsの登場

React.js、Vue.jsなどのコンポーネントベースでのフレームワークが登場し、可読性が高くメンテナンスしやすいソースコードが書けるようになりました。サーバーサイドはほぼ完全にRESTfulになり、さらに高速なサイト表示のためにサーバーレス技術にまで発展しています。

激動のフロントエンド界隈でしたが、ようやくここ1年くらいで落ち着いてきました。React.js、Vue.jsをやっておけば、あと2〜3年は大丈夫そうです。

特にjQueryのインパクトは大きかったですね。アニメーションの作成を簡単にしてくれたことや、ブラウザ間の仕様差を埋めてくれたのは当時としては画期的でした。

そしてjQueryが優秀すぎた結果、jQuery依存のプラグインが数多く生まれ、サイト制作におけるデファクトスタンダードになりました。はじめはWebサイトにサードパーティ製のJavaScriptを入れることに抵抗のある人が多かったのですが、jQueryはその雰囲気を大きく変えてしまいました。

しかし、jQueryは複数人での作業に向いていませんでした。AさんがHTMLを書いて、BさんがJavaScriptを書いているような状況で、BさんがHTMLを直したらJavaScriptが動かなくなる……という事例がよく起こりました。

そこで救世主のごとく現れたのが、React.jsやVue.jsなどのコンポーネントベースのJavaScriptフレームワークです。それまでメンテナンスしづらかった部分を解決してくれました。

デザイナー・ディレクターに知っておいてほしいフロントエンドの8つの知識

ようやく今日の本題です（笑）。

これまでの話を踏まえて、江崎さんは「デザイナー・ディレクターに知っておいてほしいフロントエンドのこと」を8つのポイントにまとめてくれました。

なお、江崎さんはSPA開発のスペシャリストのため、今回はSPA開発を例にお話しいただきました。

1. 基本的なフロントエンドの知識

ディレクターが技術選定まで行う必要はありませんが、基本的なフロントエンドの知識を知っていると企画や提案段階の中で会話の幅が広がります。一歩上の提案をするためには、ある程度は技術の知識をもっておくと良いでしょう。

2. ワイヤーフレームやディレクトリ設計の知識

特にSPA開発の場合、ワイヤーフレームに動きの詳細をしっかり書いて、ディレクターとフロントエンドエンジニアとの間で認識に食い違いがないようにしておきましょう。

SPA開発では、Routerという仕組みを用います。Routerでは一度書いたソースコードの影響範囲が広くなる場合があり、一度決めたディレクトリ設計を簡単に変えられないことが多いです。ディレクトリ設計は入念にすり合わせておきましょう。

3. 作成する成果物の要件定義の知識

Webサイトのクオリティには色々な定義があります。サイトの使い勝手なのか、バグが出ないことなのか、魅力的なUI/UXなのか、アクセシビリティなのか。絶対に外せないポイントはどれかをしっかり見極めて、エンジニアと共有しましょう。

重視するポイントによって、フロントエンドエンジニアは使うツールを変えて制作します。

4. エンジニアの開発スケジュールの知識

例えばSPA開発は、アーキテクチャ設計に時間を要します。制作やテストの工程を今までよりも圧縮できるぶん、アーキテクチャ設計の時間に余裕を持たせたスケジュール管理を行いましょう。

他にも、「サーバレスで作成するのか」「CMSで作成するのか」「jQueryを使うのか」といった条件によってもスケジュール感は変わってきます。

5. 開発にかかる相場の知識

SPA開発やサーバレス開発のような新しいトレンド技術を使う場合は、導入・教育のコストのぶん、今までよりも相場が上がります。特にSPA開発は、サイト制作の需要増に対して技術者がまだまだ不足していて、相場が高い傾向にあります。

6. テストの知識

サイトの規模によってはテスターをアサインする必要があります。

端末やOSはどこまで対応し、どこまでの動作を保証するのかをあらかじめ決めておくと、エンジニアは対応範囲に配慮しながら制作を進められます。

7. 開発体制の知識

APIの設計は誰がするのか、GOサインを出すのは誰なのか、コードレビューはするのか、アジャイル開発なのか、バグトラッキングや課題管理はどんなツールを使うのか……。

開発体制について考えることは多いですが、あらかじめ決めて開発に臨みましょう。

8. 運用の知識

Webサイトは作って終わりではありません。特にSPAでは、運用まで考えて作る場合とランディングページを作る場合で、ソースコードをどう書くかが変わってきます。

リファクタリングを何度も行ったり、仕様書を常に最新の状態に保ったりといった、運用を見据えた制作過程も意識する必要があります。

他にも考えることはたくさんあります。しかし、少なくともここで紹介したことを頭にとどめておけば、フロントエンドエンジニアとのやり取りが楽にできますし、クライアントへの提案力や企画力の向上にも繋がるでしょう。

フロントエンドの環境は複雑化していますが、それを理解したディレクターが一緒に考えてくれるだけでもエンジニアはだいぶありがたいですし、良いプロジェクト運営ができると思います。

まとめ

Web制作は、技術の進歩やニーズの多様化にともなって分業化が進みました。そのため、異なる役割の人同士で密にコミュニケーションを取りながらプロジェクトを進める必要性が高まっています。

今回のイベントのような、他業種の基本的な知識を身につけられる機会はとても貴重です。

なお、Workship MAGAZINE運営元の株式会社GIGでは月1,2回のペースで定期的にデジタル・Web制作系イベントを開催しております。
ご興味のある方は、下記のconnpassページをご確認ください。

GIG inc. – connpass

前編はこちら▼