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

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

スライドについて
 対象はフロントエンジニアを目指す新社員向けに
作っています。
 できるだけOSに依存しない開発ツールを使っていま
す。（フロントエンジニアが開発時に使っている
知ってて当たり前のことを書いています）
 スライド内では開発ツールについての使うポイント
を書いています。
 HTML・CSS・JavaScriptの仕様、テンプレートエン
ジンについては触れません。

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

WEB開発するには？
 このスライドで発表するWEB開発とはHTML（文
章構造）を書いて、CSSで装飾すること。
 JavaScriptのコーディングもある。
 そのためには、開発ツールとしてブラウザとエ
ディタが必要です。
 エディタに関しては、文法ミスを防ぐためにシン
タックスハイライトを使いましょう。

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

以下が開発の流れ（順番ではないです）
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

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

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

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

 要素を調べる、スタイルシートやJavaScriptをデバッグす
る時に使う。
以前のバージョンより、要素を直接書くことが容易になっ
た。(style=“color:red;”)
 要素のサイズが見やすくなった。
Chromeの場合、フォーカス時にしか表示されない。
 リロードしてもログが残せるようになった
※要設定
https://developer.mozilla.org/ja/docs/Tools/Web_Co
nsole

 要素を調べる、スタイルシートやJavaScriptをデバッグする時に使う。
以前のバージョンより、要素を直接書くことが容易になった。
(style=“color:red;”)
 要素のサイズが見やすくなった。
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が実行できる。
 スクラップパッド機能で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

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

Recommended

Recommended

More Related Content

What's hot

What's hot (14)

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

Similar to みんなが知っている開発ツール 20140827 (20)

Recently uploaded

Recently uploaded (12)

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