実際のウェブページコーディング

14

Click here to load reader

Upload: ourmaninjapan

Post on 25-Jun-2015

231 views

Category:

Technology


0 download

TRANSCRIPT

Page 1: 実際のウェブページコーディング

実際のウェブページコーディング

(ま、殆どJavaScriptですが)

Daniel Davis (@ourmaninjapan)

Page 2: 実際のウェブページコーディング

● 僕が使うコーディングワークフロー– (DOMを利用すると超便利!)

● エラーの防止と扱い● ブラウザの開発ツールを活かそう!

Page 3: 実際のウェブページコーディング

●僕が使うコーディングワークフロー

Page 4: 実際のウェブページコーディング
Page 5: 実際のウェブページコーディング

テンプレート →

Page 6: 実際のウェブページコーディング

<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8"><style>CSSはここ</style><script>JavaScriptはここ</script><title>HTMLファイルのテンプレート</title></head><body><h1>HTMLファイルのテンプレート</h1></body></html>

Page 7: 実際のウェブページコーディング

テンプレート → ← 事例

Page 8: 実際のウェブページコーディング

●エラーの防止と扱い

Page 9: 実際のウェブページコーディング

●1. 論理的なブロック

Page 10: 実際のウェブページコーディング

●2. 分かりやすいコメント

「なに」ではなく「なぜ」

Page 11: 実際のウェブページコーディング

●3. 統一性が重要

●例えばスペース、インデント、”など

Page 12: 実際のウェブページコーディング

●4. 変数、関数、DOMの名付け

● zoom_level● is_set● makePattern()● doZoom()● setPencil()● getAge()● btn_search● lbl_search

Page 13: 実際のウェブページコーディング

●5. コードを美しく

Page 14: 実際のウェブページコーディング

●ブラウザの開発ツールを活かそう!(エラーコンソール、Opera Dragonfly)