みんなが知っている開発ツール 20140827
DESCRIPTION
みんなが知っている開発ツールTRANSCRIPT
![Page 1: みんなが知っている開発ツール 20140827](https://reader034.vdocuments.site/reader034/viewer/2022052311/5589e843d8b42abd378b45ee/html5/thumbnails/1.jpg)
みんなが知っている WEB開発ツール
![Page 2: みんなが知っている開発ツール 20140827](https://reader034.vdocuments.site/reader034/viewer/2022052311/5589e843d8b42abd378b45ee/html5/thumbnails/2.jpg)
スライドについて 対象はフロントエンジニアを目指す新社員向けに作っています。
できるだけOSに依存しない開発ツールを使っています。(フロントエンジニアが開発時に使っている知ってて当たり前のことを書いています)
スライド内では開発ツールについての使うポイントを書いています。
HTML・CSS・JavaScriptの仕様、テンプレートエンジンについては触れません。
![Page 3: みんなが知っている開発ツール 20140827](https://reader034.vdocuments.site/reader034/viewer/2022052311/5589e843d8b42abd378b45ee/html5/thumbnails/3.jpg)
Agenda WEB開発するためには? 最低限必要なツール Validationについて ブラウザついて コンソール、インスペクタ Javascriptのデバッグ その他便利機能
まとめ
![Page 4: みんなが知っている開発ツール 20140827](https://reader034.vdocuments.site/reader034/viewer/2022052311/5589e843d8b42abd378b45ee/html5/thumbnails/4.jpg)
WEB開発するには? このスライドで発表するWEB開発とはHTML(文章構造)を書いて、CSSで装飾すること。 JavaScriptのコーディングもある。
そのためには、開発ツールとしてブラウザとエディタが必要です。
エディタに関しては、文法ミスを防ぐためにシンタックスハイライトを使いましょう。
![Page 5: みんなが知っている開発ツール 20140827](https://reader034.vdocuments.site/reader034/viewer/2022052311/5589e843d8b42abd378b45ee/html5/thumbnails/5.jpg)
WEB開発するには? 以下が開発の流れ(順番ではないです) a. HTML書く。 b. CSSを書く。 c. ブラウザでデバッグ(確認)する。 d. Validatitorで文法をチェックする。 a~dのサイクルを繰り返して、開発していく。
![Page 6: みんなが知っている開発ツール 20140827](https://reader034.vdocuments.site/reader034/viewer/2022052311/5589e843d8b42abd378b45ee/html5/thumbnails/6.jpg)
WEB開発するには? 以下が開発の流れ(順番ではないです) a. HTML書く。 b. CSSを書く。 c. ブラウザでデバッグ(確認)する。 d. Validatitorで文法をチェックする。 今回のスライドでピックアップ
![Page 7: みんなが知っている開発ツール 20140827](https://reader034.vdocuments.site/reader034/viewer/2022052311/5589e843d8b42abd378b45ee/html5/thumbnails/7.jpg)
最低限必要なツール 最低限必要なツール これがないと開発が始まらない ブラウザ Firefox Google Chrome
validator(HTML) http://validator.w3.org/
validator(CSS) http://jigsaw.w3.org/css-validator/
エディタ
![Page 8: みんなが知っている開発ツール 20140827](https://reader034.vdocuments.site/reader034/viewer/2022052311/5589e843d8b42abd378b45ee/html5/thumbnails/8.jpg)
みんなが知っているValidation HTMLコーディングが完了したら、Validation(整合性)を確認しましょう。(タグミス、文法違反等) ✕ HTML・CSSで思う通りに表現できる ○ Validatorを通してエラーが無い。
HTMLとCSSをまとめてチェックしたい場合 W3C Unicorn http://validator.w3.org/unicorn/
(国際化に対応しているかまでチェックしてくれているらしい。)
![Page 9: みんなが知っている開発ツール 20140827](https://reader034.vdocuments.site/reader034/viewer/2022052311/5589e843d8b42abd378b45ee/html5/thumbnails/9.jpg)
みんなが知っているブラウザ 開発するためにはブラウザの機能として付属している開発ツールを使う。
Q. 開発ツールはどっちがいいの? A. FirefoxがChromeより機能性が( ・∀・)イイ!! Chrome よりFirefoxを使うほうがよりコーディングがスムーズになる。
![Page 10: みんなが知っている開発ツール 20140827](https://reader034.vdocuments.site/reader034/viewer/2022052311/5589e843d8b42abd378b45ee/html5/thumbnails/10.jpg)
みんなが知っているブラウザ 開発するためにはブラウザの機能として付属している開発ツールを使う。
Q. いろんなブラウザの開発ツールはどっちがいいの? A. Firefoxが( ・∀・)イイ!! Firefoxを使うほうが、他の開発ツールを使うよりもコーディングがスムーズになる。(気がする・・・。
Firefoxのことしか説明しません!!
(似た機能はどちらもあるので各自、探して下さい)
![Page 11: みんなが知っている開発ツール 20140827](https://reader034.vdocuments.site/reader034/viewer/2022052311/5589e843d8b42abd378b45ee/html5/thumbnails/11.jpg)
みんなが知っているブラウザ 実際にやってみる。
![Page 12: みんなが知っている開発ツール 20140827](https://reader034.vdocuments.site/reader034/viewer/2022052311/5589e843d8b42abd378b45ee/html5/thumbnails/12.jpg)
みんなが知っているブラウザ 開発ツールの起動方法について(Windows向け) Google Chrome(ver.36) (左上)>ツール>デベロッパーツール
ショートカットキーは「F12」
Firefox(ver.31) (左上)>開発ツール
ショートカットキーは Ctrl + Shift +「I」 アドオンでFirebugがあるが標準で付属している開発ツールが優れてい
るので割愛 F12で開発ツール起動!
_人人人人人人人_ > それFirebugや<  ̄YYYYYYY ̄
2014.08.26現在
![Page 13: みんなが知っている開発ツール 20140827](https://reader034.vdocuments.site/reader034/viewer/2022052311/5589e843d8b42abd378b45ee/html5/thumbnails/13.jpg)
コンソール、インスペクタ(Firefox) 要素を調べる、スタイルシートやJavaScriptをデバッグする時に使う。
![Page 14: みんなが知っている開発ツール 20140827](https://reader034.vdocuments.site/reader034/viewer/2022052311/5589e843d8b42abd378b45ee/html5/thumbnails/14.jpg)
クリックする
![Page 15: みんなが知っている開発ツール 20140827](https://reader034.vdocuments.site/reader034/viewer/2022052311/5589e843d8b42abd378b45ee/html5/thumbnails/15.jpg)
要素の選択する
![Page 16: みんなが知っている開発ツール 20140827](https://reader034.vdocuments.site/reader034/viewer/2022052311/5589e843d8b42abd378b45ee/html5/thumbnails/16.jpg)
ソースと属性がフォーカスされる
![Page 17: みんなが知っている開発ツール 20140827](https://reader034.vdocuments.site/reader034/viewer/2022052311/5589e843d8b42abd378b45ee/html5/thumbnails/17.jpg)
コンソールでソースから セレクタがコピーできる。 (一意なセレクタをコピー) 例 #spaces
![Page 18: みんなが知っている開発ツール 20140827](https://reader034.vdocuments.site/reader034/viewer/2022052311/5589e843d8b42abd378b45ee/html5/thumbnails/18.jpg)
コンソール、インスペクタ(Firefox) 要素を調べる、スタイルシートやJavaScriptをデバッグする時に使う。
要素にスタイルを記述して確認する。 以前のバージョンより、スタイルを直接書くことが容易になった。(style=“color:red;”)
![Page 19: みんなが知っている開発ツール 20140827](https://reader034.vdocuments.site/reader034/viewer/2022052311/5589e843d8b42abd378b45ee/html5/thumbnails/19.jpg)
スタイルを書けば、表示に反映される
![Page 20: みんなが知っている開発ツール 20140827](https://reader034.vdocuments.site/reader034/viewer/2022052311/5589e843d8b42abd378b45ee/html5/thumbnails/20.jpg)
コンソール、インスペクタ(Firefox) 要素を調べる、スタイルシートやJavaScriptをデバッグする時に使う。
要素にスタイルが記述して確認する。 以前のバージョンより、要素を直接書くことが容易になった。(style=“color:red;”)
要素のサイズが見やすい。 (margin,pading,boder,inline)
![Page 21: みんなが知っている開発ツール 20140827](https://reader034.vdocuments.site/reader034/viewer/2022052311/5589e843d8b42abd378b45ee/html5/thumbnails/21.jpg)
ココ!
![Page 22: みんなが知っている開発ツール 20140827](https://reader034.vdocuments.site/reader034/viewer/2022052311/5589e843d8b42abd378b45ee/html5/thumbnails/22.jpg)
コンソール、インスペクタ(Firefox) 要素を調べる、スタイルシートやJavaScriptをデバッグする時に使う。
要素にスタイルが記述して確認する。 以前のバージョンより、要素を直接書くことが容易になった。(style=“color:red;”)
要素のサイズが見やすくなった。 (margin,pading,boder,inline) Chromeの場合、フォーカス時にしか表示されない。
リロードしてもログが残せるようになった ※要設定 https://developer.mozilla.org/ja/docs/Tools/Web_Console
![Page 23: みんなが知っている開発ツール 20140827](https://reader034.vdocuments.site/reader034/viewer/2022052311/5589e843d8b42abd378b45ee/html5/thumbnails/23.jpg)
コンソール、インスペクタ(Firefox) 要素を調べる、スタイルシートやJavaScriptをデバッグする時に使う。
要素にスタイルが記述して確認する。
以前のバージョンより、要素を直接書くことが容易になった。(style=“color:red;”)
要素のサイズが見やすくなった。 (margin,pading,boder,inline) Chromeの場合、フォーカス時にしか表示されない。
リロードしてもログが残せるようになった ※要設定 https://developer.mozilla.org/ja/docs/Tools/Web_Console
セレクタからソースへ直接参照できる。 => $(‘div#header’)
![Page 24: みんなが知っている開発ツール 20140827](https://reader034.vdocuments.site/reader034/viewer/2022052311/5589e843d8b42abd378b45ee/html5/thumbnails/24.jpg)
クリックする
![Page 25: みんなが知っている開発ツール 20140827](https://reader034.vdocuments.site/reader034/viewer/2022052311/5589e843d8b42abd378b45ee/html5/thumbnails/25.jpg)
フォーカスされる
![Page 26: みんなが知っている開発ツール 20140827](https://reader034.vdocuments.site/reader034/viewer/2022052311/5589e843d8b42abd378b45ee/html5/thumbnails/26.jpg)
スタイルエディタ(Firefox) スタイルシートをローカルからインポートできる。 スタイルエディタで新規作成や編集と保存できる。
![Page 27: みんなが知っている開発ツール 20140827](https://reader034.vdocuments.site/reader034/viewer/2022052311/5589e843d8b42abd378b45ee/html5/thumbnails/27.jpg)
クリックする
![Page 28: みんなが知っている開発ツール 20140827](https://reader034.vdocuments.site/reader034/viewer/2022052311/5589e843d8b42abd378b45ee/html5/thumbnails/28.jpg)
スタイルを編集する
![Page 29: みんなが知っている開発ツール 20140827](https://reader034.vdocuments.site/reader034/viewer/2022052311/5589e843d8b42abd378b45ee/html5/thumbnails/29.jpg)
スタイルエディタ(Firefox) スタイルシートをローカルからインポートできる。 スタイルエディタで新規作成や編集と保存できる。
CSSやインラインスタイル、外部ファイルからのスタイル等、スタイルシートが確認しやすい。
![Page 30: みんなが知っている開発ツール 20140827](https://reader034.vdocuments.site/reader034/viewer/2022052311/5589e843d8b42abd378b45ee/html5/thumbnails/30.jpg)
JavaScriptのデバッグ(Firefox) コンソールからJavaScriptが実行できる
![Page 31: みんなが知っている開発ツール 20140827](https://reader034.vdocuments.site/reader034/viewer/2022052311/5589e843d8b42abd378b45ee/html5/thumbnails/31.jpg)
画像を非表示にしてみる $(‘img’).each(function(i){ $(this).css('display','none') });
![Page 32: みんなが知っている開発ツール 20140827](https://reader034.vdocuments.site/reader034/viewer/2022052311/5589e843d8b42abd378b45ee/html5/thumbnails/32.jpg)
画像が消えた・・・!
![Page 33: みんなが知っている開発ツール 20140827](https://reader034.vdocuments.site/reader034/viewer/2022052311/5589e843d8b42abd378b45ee/html5/thumbnails/33.jpg)
JavaScriptのデバッグ(Firefox) コンソールからJavaScriptが実行できる。
スクラップパッド機能でJavaScriptのコーディング <=> デバッグのサイクルが容易になった。 ※要設定
![Page 34: みんなが知っている開発ツール 20140827](https://reader034.vdocuments.site/reader034/viewer/2022052311/5589e843d8b42abd378b45ee/html5/thumbnails/34.jpg)
クリックする
![Page 35: みんなが知っている開発ツール 20140827](https://reader034.vdocuments.site/reader034/viewer/2022052311/5589e843d8b42abd378b45ee/html5/thumbnails/35.jpg)
内容を書いて実行をクリックする
![Page 36: みんなが知っている開発ツール 20140827](https://reader034.vdocuments.site/reader034/viewer/2022052311/5589e843d8b42abd378b45ee/html5/thumbnails/36.jpg)
アラートウィンドウが表示された!
![Page 37: みんなが知っている開発ツール 20140827](https://reader034.vdocuments.site/reader034/viewer/2022052311/5589e843d8b42abd378b45ee/html5/thumbnails/37.jpg)
JavaScriptのデバッグ(Firefox) コンソールからJavaScriptが実行できる
スクラップパッド機能でJavaScriptのコーディング <=> デバッグのサイクルが容易になった。 ※要設定 文法でエラーが発見しやすく、記述した内容がデバッグできる。(調査機能)
別ウィンドウでスクラップパッドが開きリロードしても、画面内の内容が保持される
![Page 38: みんなが知っている開発ツール 20140827](https://reader034.vdocuments.site/reader034/viewer/2022052311/5589e843d8b42abd378b45ee/html5/thumbnails/38.jpg)
調査ボタンをクリック
![Page 39: みんなが知っている開発ツール 20140827](https://reader034.vdocuments.site/reader034/viewer/2022052311/5589e843d8b42abd378b45ee/html5/thumbnails/39.jpg)
戻り値が返ってくる
![Page 40: みんなが知っている開発ツール 20140827](https://reader034.vdocuments.site/reader034/viewer/2022052311/5589e843d8b42abd378b45ee/html5/thumbnails/40.jpg)
JavaScriptのデバッグ(Firefox) コンソールからJavaScriptが実行できる
スクラップパッド機能でJavaScriptのコーディング <=> デバッグのサイクルが容易になった。 ※要設定 文法でエラーが発見しやすく、記述した内容がデバッグできる。(調査機能)
別ウィンドウでスクラップパッドが開きリロードしても、画面内の内容が保持される。
他にはデバッガ機能でブレークポイントを置く、変数やイベントをウォッチする。
![Page 41: みんなが知っている開発ツール 20140827](https://reader034.vdocuments.site/reader034/viewer/2022052311/5589e843d8b42abd378b45ee/html5/thumbnails/41.jpg)
その他便利機能(Firefox) カラーコードがページからコピーできる。 (スポイド機能)
実機のモバイル端末を使ったリモートデバッグができる。(Android限定) https://developer.mozilla.org/ja/docs/Tools/Remote_Debugging/Firefox_for_Android
Firefoxでソースを見るとタグの記述ミスがハイライトされる。
![Page 42: みんなが知っている開発ツール 20140827](https://reader034.vdocuments.site/reader034/viewer/2022052311/5589e843d8b42abd378b45ee/html5/thumbnails/42.jpg)
その他便利機能?(Firefox) DOM階層構造が視覚的に確認できる。
https://developer.mozilla.org/ja/docs/Tools/Page_Inspector/3D_view (入れ子の調査に使うらしいが、必要・・・?)
スクリーンショット機能 (必要なのか・・・?)
![Page 43: みんなが知っている開発ツール 20140827](https://reader034.vdocuments.site/reader034/viewer/2022052311/5589e843d8b42abd378b45ee/html5/thumbnails/43.jpg)
まとめ このスライドに書いた機能は、開発時に使います。
InternetExplorerの動作確認も忘れずに。
(開発要件を確認しましょう) Firefoxがおすすめであるもう一つの理由は、 公式ドキュメントが揃っていて見やすい。 (日本語が多い。) https://developer.mozilla.org/ja/docs/Tools