フロントエンドエンジニア養成読本を読んだ

技術評論社から出ている、フロントエンドエンジニア養成読本を読んだ。

フロントエンドエンジニア養成読本 [HTML、CSS、JavaScriptの基本から現場で役立つ技術まで満載! ] (Software Design plus) [大型本]

自分は、フロントエンドエンジニアと言葉にするときに、JavaScriptを書く人という意味合いで使っていることが多い。
けれど、JavaScriptを書くだけで完結することは少なくて、必要とされる知識や使いこなすための道具がさまざまある。

じゃあそれって具体的にどんなものやことなの?という問いに、広く答えてくれている本がこれです。

ちゃんと読んだら丸2日くらいかかった。

目次

  • 特集1 フロントエンドエンジニアとしての基礎と準備
  • 特集2 フロントエンド開発フィールドガイド
  • 特集3 フロントエンド開発最前線

メモ

特集1 フロントエンドエンジニアとしての基礎と準備

  • 知識と経験は蜂の巣状に育つ
    • 点在する知識を経験でつないでいく

有名な、ユーザーエクスペリエンスの5つの段階の図。教養。

  • グレースフル・デグレデーションとプログレッシブ・エンハンスメント
    • 前者は最先端+リカバー、後者は最低限+アルファ

プログレッシブ・エンハンスメントで考えておくほうが、対応しやすい状況が多かったような気がする。最低限のラインをどこに置くかという話はまた別。

特集2 フロントエンド開発フィールドガイド

タグの使い分けフローチャートで、なれるまでは便利っぽい。

  • HTML 5 Outliner
    • 構造をアウトラインで眺めてくれるツール
  • SMACSSとBEM

うまく取り入れたいけど、ヘタすると逆にセレクタが冗長になりがち。

  • UnderScore.jsいいっぽい
    • 配列操作で楽するライブラリ
  • jQueryの読み込みスクリプト
    • デバッグ時に使うことがある
  • Chrome Dev Toolで実機接続できる
    • Android端末をつないで、実機でデバッグできる
  • Above the Foldの最適化
    • ファーストビュー部分の読み込みをはやくする
    • ファイル分割などで実現する
  • メモリリーク
    クロージャや再帰的な処理をするときは気をつける

ゲームほどクリティカルじゃないので、一般的なウェブサイトではそんなに頑張ってないけど、本当は頑張ったほうがいい。

その他、Git使うよねという話や、Grunt使うよねという話も、意外と基本機能しか使ってなかったりするから再確認。

特集3 フロントエンド開発最前線

  • Web Components、ECMAScript6、WebRTC

概要を参考程度に流し読み。

感想

仕事では、UIの設計、デザインから、フロントエンドの実装までを担当することが多いので、いかに速く表示するかと同じように、いかに早く情報を理解してもらうかみたいなところも、考えていかなければならない。

何が速くて早いかみたいな話をすると、アニメーションの表現や実装方法の話にもなる。
デザインとフロントエンドの実装、どちらか一方の都合に固執せず、通常の三倍精進しなきゃなというのが感想。

あとは、スライス作業のような、コーディング前の下ごしらえ的な話だけはなかったので、別の本や何かで補完する必要があるなと思った。

ツイートもしたけど、僕の仕事これです!といえるような、濃密な一冊でした。

フロントエンドエンジニア養成読本 [HTML、CSS、JavaScriptの基本から現場で役立つ技術まで満載! ] (Software Design plus)
斉藤 祐也 石本 光司 加藤 賢一 水野 隼登 谷 拓樹 泉水 翔吾 原 一成 平木 聡 佐藤 歩 杉本吉章
技術評論社
売り上げランキング: 1,002

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>