新人SEの学習記録

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

学習記録:Webフロントエンド

[学習記録] フロントエンドの開発環境

内容:9章 フロントエンドの開発環境

Google Chrome DevTools
  • DevTools概要
    • Command + Option + I or Ctrl + Shift + I
    • 8つのメニュー
      • Elements:DOMの構造・スタイルの確認と編集
      • Network:開いているページのネットワークのやり取りを表示
      • Sources:JavaScriptのソース確認・デバッグ
      • Timeline:イベントやメモリ使用状況・FPSの確認
      • Profiles:CPUプロファイルやヒープスナップショットの確認
      • Resources:Cookieやローカルストレージなどのリソース状況確認
      • Audits:ネットワークやページのパフォーマンス改善項目を検査
      • Console:エラーの表示やJavaScriptコードの実行
    • Elements
      • 実際に生成されたHTMLコードを確認できる
      • 任意のDOM要素をDevToolsで選択すると、HTMLやスタイルを変更可能
      • スタイルはセレクタごとに現在適用されているプロパティが表示され、削除・編集・追加が可能
      • カラープロパティはカラーパネルから選択できる
    • Network
      • ネットワークパフォーマンスを確認
      • ウォーターフォールチャートを確認でき、そのページでの通信内容が表示される
      • リクエスト数を抑えること、読み込み順のチェックなどを行える
      • SizeやTimeの順でソートしてリクエストを改善していくのが良い
      • リクエストの項目をクリックすると詳細が確認できる、Gzipされているか、キャッシュされているかなども確認すべし
    • Console
      • JavaScriptデバッグにはconsole.log()を使用
      • その確認にConsole画面を使う
      • 標準で$()などの便利なAPIが実装されている
      • よく使うコードをSourcesのSnippetsとして登録しておくと右クリック一発で実行可能
    • ページ下部のEmulation
      • モバイル環境を簡単にエミュレートできる
      • Deviceメニューからデバッグしたいモバイル環境を選択し、Emulateボタンをクリックする
その他のブラウザ開発者ツール
  • Safari Web Inspector
    • Safariの「環境設定」>「詳細」>「メニューバーに開発メニューを表示」にチェック
    • 開発メニューからWebインスペクタが利用可能になる
  • Firefox Developer Tools
    • コンソールなどはもちろん、DOMの深さを確認できる3Dビューやスクラッチパッドなどの機能も搭載
Grunt
  • フロントエンドエンジニアが使用する膨大なツール・タスク
    • 全てまかなうGUIアプリは存在しない、機能毎にアプリを使えば何十ものアプリを起動する必要
    • Grunt
  • Gruntのインストール
    • Node.jsをインストール
    • grunt-cilをインストール
    • Grunt本体のインストール
    • Gruntfileの作成