みんなが知っている開発ツール 20140827

みんなが知っている WEB開発ツール

スライドについて 対象はフロントエンジニアを目指す新社員向けに作っています。

できるだけOSに依存しない開発ツールを使っています。（フロントエンジニアが開発時に使っている知ってて当たり前のことを書いています）

スライド内では開発ツールについての使うポイントを書いています。

HTML・CSS・JavaScriptの仕様、テンプレートエンジンについては触れません。

Agenda WEB開発するためには？ 最低限必要なツール Validationについて ブラウザついて コンソール、インスペクタ Javascriptのデバッグ その他便利機能

まとめ

WEB開発するには？ このスライドで発表するWEB開発とはHTML（文章構造）を書いて、CSSで装飾すること。 JavaScriptのコーディングもある。

そのためには、開発ツールとしてブラウザとエディタが必要です。

エディタに関しては、文法ミスを防ぐためにシンタックスハイライトを使いましょう。

WEB開発するには？ 以下が開発の流れ（順番ではないです） a. HTML書く。 b. CSSを書く。 c. ブラウザでデバッグ（確認）する。 d. Validatitorで文法をチェックする。 a~dのサイクルを繰り返して、開発していく。

WEB開発するには？ 以下が開発の流れ（順番ではないです） a. HTML書く。 b. CSSを書く。 c. ブラウザでデバッグ（確認）する。 d. Validatitorで文法をチェックする。 今回のスライドでピックアップ

最低限必要なツール 最低限必要なツール これがないと開発が始まらない ブラウザ Firefox Google Chrome

validator(HTML) http://validator.w3.org/

validator(CSS) http://jigsaw.w3.org/css-validator/

エディタ

みんなが知っているValidation HTMLコーディングが完了したら、Validation(整合性)を確認しましょう。(タグミス、文法違反等) ✕ HTML・CSSで思う通りに表現できる ○ Validatorを通してエラーが無い。

HTMLとCSSをまとめてチェックしたい場合 W3C Unicorn http://validator.w3.org/unicorn/

（国際化に対応しているかまでチェックしてくれているらしい。）

みんなが知っているブラウザ 開発するためにはブラウザの機能として付属している開発ツールを使う。

Q. 開発ツールはどっちがいいの？ A. FirefoxがChromeより機能性が( ・∀・)ｲｲ!! Chrome よりFirefoxを使うほうがよりコーディングがスムーズになる。

みんなが知っているブラウザ 開発するためにはブラウザの機能として付属している開発ツールを使う。

Q. いろんなブラウザの開発ツールはどっちがいいの？ A. Firefoxが( ・∀・)ｲｲ!! Firefoxを使うほうが、他の開発ツールを使うよりもコーディングがスムーズになる。(気がする・・・。

Firefoxのことしか説明しません！！

(似た機能はどちらもあるので各自、探して下さい)

みんなが知っているブラウザ 実際にやってみる。

みんなが知っているブラウザ 開発ツールの起動方法について（Windows向け） Google Chrome(ver.36) （左上）＞ツール＞デベロッパーツール

ショートカットキーは「F12」

Firefox(ver.31) （左上）＞開発ツール

ショートカットキーは Ctrl + Shift ＋「I」 アドオンでFirebugがあるが標準で付属している開発ツールが優れてい

るので割愛 F12で開発ツール起動！

＿人人人人人人人＿ ＞ それFirebugや＜ ￣ＹＹＹＹＹＹＹ￣

2014.08.26現在

コンソール、インスペクタ(Firefox) 要素を調べる、スタイルシートやJavaScriptをデバッグする時に使う。

クリックする

要素の選択する

ソースと属性がフォーカスされる

コンソールでソースから セレクタがコピーできる。 （一意なセレクタをコピー） 例 #spaces

コンソール、インスペクタ(Firefox) 要素を調べる、スタイルシートやJavaScriptをデバッグする時に使う。

要素にスタイルを記述して確認する。 以前のバージョンより、スタイルを直接書くことが容易になった。(style=“color:red;”)

スタイルを書けば、表示に反映される

コンソール、インスペクタ(Firefox) 要素を調べる、スタイルシートやJavaScriptをデバッグする時に使う。

要素にスタイルが記述して確認する。 以前のバージョンより、要素を直接書くことが容易になった。(style=“color:red;”)

要素のサイズが見やすい。 （margin,pading,boder,inline)

ココ！

コンソール、インスペクタ(Firefox) 要素を調べる、スタイルシートやJavaScriptをデバッグする時に使う。

要素にスタイルが記述して確認する。 以前のバージョンより、要素を直接書くことが容易になった。(style=“color:red;”)

要素のサイズが見やすくなった。 （margin,pading,boder,inline) Chromeの場合、フォーカス時にしか表示されない。

リロードしてもログが残せるようになった ※要設定 https://developer.mozilla.org/ja/docs/Tools/Web_Console

コンソール、インスペクタ(Firefox) 要素を調べる、スタイルシートやJavaScriptをデバッグする時に使う。

要素にスタイルが記述して確認する。

以前のバージョンより、要素を直接書くことが容易になった。(style=“color:red;”)

要素のサイズが見やすくなった。 （margin,pading,boder,inline) Chromeの場合、フォーカス時にしか表示されない。

リロードしてもログが残せるようになった ※要設定 https://developer.mozilla.org/ja/docs/Tools/Web_Console

セレクタからソースへ直接参照できる。 => $(‘div#header’)

クリックする

フォーカスされる

スタイルエディタ(Firefox) スタイルシートをローカルからインポートできる。 スタイルエディタで新規作成や編集と保存できる。

クリックする

スタイルを編集する

スタイルエディタ(Firefox) スタイルシートをローカルからインポートできる。 スタイルエディタで新規作成や編集と保存できる。

CSSやインラインスタイル、外部ファイルからのスタイル等、スタイルシートが確認しやすい。

JavaScriptのデバッグ(Firefox) コンソールからJavaScriptが実行できる

画像を非表示にしてみる $(‘img’).each(function(i){ $(this).css('display','none') });

画像が消えた・・・！

JavaScriptのデバッグ(Firefox) コンソールからJavaScriptが実行できる。

スクラップパッド機能でJavaScriptのコーディング <=> デバッグのサイクルが容易になった。 ※要設定

クリックする

内容を書いて実行をクリックする

アラートウィンドウが表示された！

JavaScriptのデバッグ(Firefox) コンソールからJavaScriptが実行できる

スクラップパッド機能でJavaScriptのコーディング <=> デバッグのサイクルが容易になった。 ※要設定 文法でエラーが発見しやすく、記述した内容がデバッグできる。（調査機能）

別ウィンドウでスクラップパッドが開きリロードしても、画面内の内容が保持される

調査ボタンをクリック

戻り値が返ってくる

JavaScriptのデバッグ(Firefox) コンソールからJavaScriptが実行できる

スクラップパッド機能でJavaScriptのコーディング <=> デバッグのサイクルが容易になった。 ※要設定 文法でエラーが発見しやすく、記述した内容がデバッグできる。（調査機能）

別ウィンドウでスクラップパッドが開きリロードしても、画面内の内容が保持される。

他にはデバッガ機能でブレークポイントを置く、変数やイベントをウォッチする。

その他便利機能(Firefox) カラーコードがページからコピーできる。 （スポイド機能）

実機のモバイル端末を使ったリモートデバッグができる。(Android限定) https://developer.mozilla.org/ja/docs/Tools/Remote_Debugging/Firefox_for_Android

Firefoxでソースを見るとタグの記述ミスがハイライトされる。

その他便利機能？(Firefox) DOM階層構造が視覚的に確認できる。

https://developer.mozilla.org/ja/docs/Tools/Page_Inspector/3D_view （入れ子の調査に使うらしいが、必要・・・？）

スクリーンショット機能 (必要なのか・・・？）

まとめ このスライドに書いた機能は、開発時に使います。

InternetExplorerの動作確認も忘れずに。

(開発要件を確認しましょう） Firefoxがおすすめであるもう一つの理由は、 公式ドキュメントが揃っていて見やすい。 （日本語が多い。） https://developer.mozilla.org/ja/docs/Tools