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

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

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

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

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

目次

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

メモ

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

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

• The Elements of User Experience

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

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

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

• タッチジェスチャーの種類
  • Touch Gesture Reference Guide

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

• html5 doctorのHTML5 Element Flowchart

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

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

• SMACSSとBEM

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

• UnderScore.jsいいっぽい
  • 配列操作で楽するライブラリ

• jQueryの読み込みスクリプト
  • デバッグ時に使うことがある

• Chrome Dev Toolで実機接続できる
  • Android端末をつないで、実機でデバッグできる

• Above the Foldの最適化
  • ファーストビュー部分の読み込みをはやくする
  • ファイル分割などで実現する

• メモリリーク
  クロージャや再帰的な処理をするときは気をつける

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

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

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

• Web Components、ECMAScript6、WebRTC

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

感想

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

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

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

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

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

posted with amazlet at 14.07.27

斉藤 祐也 石本 光司 加藤 賢一 水野 隼登 谷 拓樹 泉水 翔吾 原 一成 平木 聡 佐藤 歩 杉本吉章
技術評論社
売り上げランキング: 1,002

Amazon.co.jpで詳細を見る

Tweet