新人SEの学習記録

14年度入社SEの学習記録用に始めたブログです。もう新人じゃないかも…

学習記録:Web開発

[学習記録] Web開発

参考書籍

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

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

内容:フロントエンドエンジニアとしての基礎と準備

1章 フロントエンドエンジニアとは?
  • フロントエンドエンジニアの役割
    • 主にHTML, CSS, JavaScriptを駆使
    • ユーザとブラウザ、ブラウザとシステムをつなぐ
    • 見た目に対する思いやりとシステマティックな厳密さの間に入って仲を取りなす
  • ユーザ体験(UX)における要求段階
    • 1番下、機能性
      • クロスデバイスへの対応:IE6への対応が必須では無くなる代わりに、モバイルでバイスへの対応が増える
      • パフォーマンスの改善:ページ読み込み速度、レンダリング速度の最適化など
    • 情報
    • 見た目の美しさ、使いやすさ
  • 求められるフロントエンドエンジニア像
    • T型人材、特定の分野について詳しく、そこを軸にしつつ多様な分野についても幅広く知見を有している
    • まずは縦軸(特定分野)に関する深い知識・能力を目指していく>多くのスキルに関連性がある
    • 蜂の巣型のスキルアップ、知識だけでなく経験も積む
2章 Webブラウザの基礎知識

『ブラウザ内部の働きを学ぶことはWeb開発者にとってより良い解決を行うこと、
そして開発におけるベストプラクティスの背後にある根拠を理解することにつながります。』(Paul Irish)

  • Webブラウザの機能
    • Web上にあるリソースをサーバに要求し、それらを表示すること
    • リソースはHTML文書だけでなく、PDFや画像などもある
    • それらのリソースをURLを使って指定する
    • W3Cによって勧告されているHTMLとCSSの標準仕様に合わせ、HTML文書を解析して表示する
  • Webブラウザの7つの主要なコンポーネント
    • 1) ユーザインタフェース
    • 2) ブラウザエンジン
    • 3) レンダリングエンジン
    • 4) ネットワーキング
    • 5) UIバックエンド
    • 6) JavaScriptインタプリタ
    • 7) データストレージ
    • フロントエンドエンジニアにとっては3と6が開発ターゲットになる
  • レンダリング・エンジン
    • レンダリング、つまりブラウザ・ウィンドウにリクエストしたコンテンツを表示することが担当
    • Webブラウザによって異なるレンダリングエンジンが開発・採用されている
    • レンダリングエンジンの主要フロー
      • HTML文書を解析(パース)
      • タグをコンテンツツリーというツリー内のDOMノードに変換
      • HTML文書に含まれるスタイルデータを解析
      • HTMLがどのように表示されるべきか確定するためにレンダーツリーを生成
      • レイアウトプロセス、レンダーツリー内の矩形が画面上のどの場所に配置されるか確定
      • ペイント、レイアウトプロセス後の情報を画面に出力
    • ユーザ体験の向上のため、上記プロセスを段階的に処理
      • 可能な限り早い段階で画面に表示しようとする
      • HTML文書全てを解析し終える前にレイアウト・ペイントされる
  • PC/モバイルなどの実行環境について
    • デスクトップとモバイルの大きな違い
      • 1) デバイスとしての性能
      • 2) モニタサイズの違い
      • 3) インターネットへの接続方式
  • ブラウザ・ディテクション
    • ユーザが利用しているブラウザを判別するテクニック
    • 一番簡単なものはnavigator.userAgentプロパティからユーザエージェントよ呼ばれる文字列を解析
    • ただしユーザエージェントは嘘をつくことがあるので注意が必要
    • それ故、Webブラウザ判定のベストプラクティスとされるのがフィーチャー・ディテクション
      • ブラウザの種類ではなく、実際に実装しようとする機能が利用できるかどうかを機能単位で判定
      • JQueryでもver1.3以降はこのアプローチを採用
  • 2つのアプローチ
    • 1)グレースフル・デグレデーション
      • モダンWebブラウザに対して機能実装を行う
      • 古いWebブラウザに対しても最低限の機能を有した別バージョンを提供
    • 2)プログレッシブ・エンハンスメント
      • 最低限の機能を定義
      • 可能な限りその機能を全てのWebブラウザやデバイスで実装
      • モダンWebブラウザでは新しい機能を利用するようにしていく