1/28に発売された「フロントエンドエンジニアのための現在とこれからの必須知識」を読みました。ここ数年、めまぐるしいスピードで変化するフロントエンド界隈のトピックを横断的に概観し、キャッチアップすることを目的に書かれた本書。
第一線で活躍する著者陣の確かな目で編纂されているため、なかなか捉えにくい『今』のWebトレンドの全容を、ばっちり押さえることができます。業界に関わる方は、ぜひホットなうちに一読することをお勧めします。
フロントエンドの『今』を正しく理解するために
本書のタイトルは、「フロントエンドエンジニアのための」と銘打たれていますが、そもそもフロントエンドエンジニアとはどんな職業でしょうか？会社などにより、その位置付けは様々のようですが、旧来のようにHTMLやCSSでコーディングをするだけの人もいれば、JavaScriptを駆使してアプリケーションを開発している人や、中にはディレクション的な業務を兼任している人もいると思います。
本書では、フロントエンドエンジニアとは、幅広いWeb技術を用いて、ユーザーとブラウザ、そしてブラウザとシステムをつなぐ役割を担う者、という風に定義しています。そのためには、本書で扱われているような最新のトピックを正しく理解し、チームのメンバーを導く必要があるということでしょう。
とはいえ、本書の前半で取り上げられている、gulpやGitなどの話題は、コーダーやマークアップエンジニアと呼ばれる職種の人にとっても馴染みが深く、すでに実務で利用されているというケースも多いのではないでしょうか？そういった今どきのツールについても、単にトレンドというだけでなく、導入する意味といったところから、分かりやすく解説されている点は、大きなポイントです。
最近のフロント回りで人気のエディタについても、ネットだと「Sublimeをやめて、Atomに乗り換えよう」といった短絡的なネタに注目が集まりがちですが、本書では各エディタの違いや特色などが的確にまとめられています。これらの情報を参考にすれば、プロジェクトに応じて効率的にツールの使い分けができそうです。
⇒Aquent Gymnasium LIVE w/ CSS Nite Vol.2「DreamweaverではじめるBootstrap」
身の回りのツールは全て活用するべし
フロントエンドというと、ついそういったツール回りに目が行きがちですが、本書では「ブラウザを知ること」がフロントエンドエンジニアとしての第一歩だと書かれています。
これは個人的にも目にウロコだったのですが、目先のバグにただ振り回されるのではなく、そもそものブラウザの系統や、開発状況についてきちんと把握しておくことは、確かに欠かせない知識と言えるかもしれません。
本書ではブラウザの「開発者ツール」の使い方についても詳しく解説されていますが、これだけでもう一冊書けるんじゃないかというぐらいのボリューム感があります。CSSだけでなく、JavaScriptのデバッグや、パフォーマンスの検証に用いることで、効率的に制作が行えることが分かりました。
また、本書ではSassやgulpといった比較的メジャーなツールだけでなく、ソースの構文チェックを行うLinterや、整形を行うコードフォーマッター、スタイルガイドの生成ツールなど、有用なツールが幅広く紹介されています。
限られた紙数ながら、これらのツールについても実際のコマンドやコード例を交えて解説しているので、まだ手をつけたことがないという人にとっても、導入するための足がかりになるでしょう。このような本書の構成からは、とにかく「手を動かしてやってみよう」という実践主義の考え方が窺えます。
ただし、昨今のフロントエンド界隈の潮流的にも、本書で紹介されているコマンドライン系のツール群は、Node.jsで動作するものがほとんどなので、nodeやnpmに関する知識は正しく身につけておく方が良いでしょう。この辺りの環境構築と、それにまつわる基礎知識については、こもりまさあきさんの電子書籍が非常に参考になるので、合わせて手元に置いておくといいかもしれません。
⇒Development Environments for Web Designers
『これから』のWebへと続く扉
本書では、今後Sassなどのプリプロセッサーに代わる存在になるのでは？とも言われているPostCSSや、JavaScriptの新しい仕様であるECMAScript 2015についても取り上げられています。これらの技術は、今すぐ業務で取り入れなくては困るという類のものではありませんが、いち早く学ぶことには大きな意味があります。
cssnextやbabelなどのツールを使えば、CSSやJavaScriptの先行仕様を用いながら、現在のブラウザに解釈できるコードを生成することができます。このようなやり方を身に付けることで、近い将来に標準になるであろう、次世代のWeb仕様を先んじて学習することができるからです。
また、それらの新しい技術が登場した背景なども、正しく把握しておくことは非常に重要と言えるでしょう。私はAngularJSやReactなどのJavaScriptフレームワークは、まだ触ったことがなかったのですが、今までサーバーサイドで行ってきたMVC（モデル・ビュー・コントローラ）的な仕組みが、フロントエンドに移行されたもの、という説明で改めて理解を深めることができました。
PostCSSについては、河村奨さんにアドバイスをいただきながら、現在はメジャーなlibsassとcssnextを組み合わせることで、比較的カジュアルに導入する方法をQiitaにまとめてみたので、よろしければこちらも参考にしてみてください。
⇒gulp-sassとgulp-cssnextで快適コンパイル環境を構築 – Qiita
⇒libsassとcssnextを組み合わせたスターターキットはこちら
まとめ
フロントエンドにまつわる最新トピックを網羅的にまとめた「フロントエンドエンジニアのための現在とこれからの必須知識」。これからフロントエンドエンジニアとして、スキルアップしようと思っている人にとっては、まさに必携の一冊と言えるでしょう。
ただ、扱う範囲が広く、トレンドの全容を把握しやすい一方、各セクションの説明だけでは、それぞれの技術を習得し切れないという側面もあります。私にとって、苦手分野であるJavaScriptのパートなどは、勉強不足の面もあり、やや消化不良気味になってしまいました。
本書では、各領域をもっと掘り下げるための、最適なリソースも多数紹介されているので、それらを頼りに自己学習を続けることが、フロントエンドエンジニアとしての成長戦略の一つと言えるのではないでしょうか？
デザイナーやサーバーサイドエンジニアと円滑にコミュニケーションを行うためのTIPSも、本書には掲載されていますが、そのためには周囲のメンバーの歩み寄りも不可欠かもしれません。フロントエンドエンジニアが、日頃どんなツールや領域を扱っているのか・・？他の職種の人が、それを知るための手がかりとしても、最適なガイドブックになると思います。