SlideShare una empresa de Scribd logo
1 de 14
Descargar para leer sin conexión
実際のウェブページコーディング
  (ま、殆どJavaScriptですが)

  Daniel Davis (@ourmaninjapan)
●


●
    僕が使うコーディングワークフロー
     –   (DOMを利用すると超便利!)
●
    エラーの防止と扱い
●
    ブラウザの開発ツールを活かそう!
僕が使うコーディングワークフロー
●
テンプレート →
<!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>
テンプレート →   ← 事例
エラーの防止と扱い
●
●
    1. 論理的なブロック




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




    「なに」ではなく「なぜ」
3. 統一性が重要
    ●




例えばスペース、インデント、”など
●
●
         4. 変数、関数、DOMの名付け
●   zoom_level
●   is_set
●   makePattern()
●   doZoom()
●   setPencil()
●   getAge()
●   btn_search
●   lbl_search
5. コードを美しく
●
ブラウザの開発ツールを活かそう!
●


    (エラーコンソール、Opera Dragonfly)

Más contenido relacionado

La actualidad más candente

いちばん簡単なconcrete5テーマ
いちばん簡単なconcrete5テーマいちばん簡単なconcrete5テーマ
いちばん簡単なconcrete5テーマHideki MACHIDA
 
141115 making web site
141115 making web site141115 making web site
141115 making web siteHimi Sato
 
Html講習会資料
Html講習会資料Html講習会資料
Html講習会資料竹島 泉
 
.インストールをやってみよう
.インストールをやってみよう.インストールをやってみよう
.インストールをやってみようohotech
 
情報編集 (web) 第2回:HTML入門
情報編集 (web) 第2回:HTML入門情報編集 (web) 第2回:HTML入門
情報編集 (web) 第2回:HTML入門Atsushi Tadokoro
 
HTML5での制作、いつから始める?
HTML5での制作、いつから始める?HTML5での制作、いつから始める?
HTML5での制作、いつから始める?Fuminori Mori
 
メディア芸術基礎 II 第11回:HTML5実践 表現のための様々なJavaScriptライブラリ
メディア芸術基礎 II 第11回:HTML5実践 表現のための様々なJavaScriptライブラリメディア芸術基礎 II 第11回:HTML5実践 表現のための様々なJavaScriptライブラリ
メディア芸術基礎 II 第11回:HTML5実践 表現のための様々なJavaScriptライブラリAtsushi Tadokoro
 
【フロントエンド勉強会】 フロントエンド基礎知識
【フロントエンド勉強会】 フロントエンド基礎知識【フロントエンド勉強会】 フロントエンド基礎知識
【フロントエンド勉強会】 フロントエンド基礎知識Sota Takahashi
 
WordPress を使いこなそう
WordPress を使いこなそうWordPress を使いこなそう
WordPress を使いこなそうWataru OKAMOTO
 
HTMLのアウトラインを意識しよう
HTMLのアウトラインを意識しようHTMLのアウトラインを意識しよう
HTMLのアウトラインを意識しようshigetoshi komatsu
 
ズルいLT 〜はじめてのライトニングトーク〜 / WP-D Week
ズルいLT 〜はじめてのライトニングトーク〜 / WP-D WeekズルいLT 〜はじめてのライトニングトーク〜 / WP-D Week
ズルいLT 〜はじめてのライトニングトーク〜 / WP-D WeekMignon Style
 
20160720 okubo mt_cloud_handson
20160720 okubo mt_cloud_handson20160720 okubo mt_cloud_handson
20160720 okubo mt_cloud_handsonSix Apart
 
nanocのhelper 利用実例
nanocのhelper 利用実例nanocのhelper 利用実例
nanocのhelper 利用実例Go Maeda
 

La actualidad más candente (16)

JQuery入門
JQuery入門JQuery入門
JQuery入門
 
いちばん簡単なconcrete5テーマ
いちばん簡単なconcrete5テーマいちばん簡単なconcrete5テーマ
いちばん簡単なconcrete5テーマ
 
141115 making web site
141115 making web site141115 making web site
141115 making web site
 
Html講習会資料
Html講習会資料Html講習会資料
Html講習会資料
 
HTML
HTMLHTML
HTML
 
.インストールをやってみよう
.インストールをやってみよう.インストールをやってみよう
.インストールをやってみよう
 
Java script
Java scriptJava script
Java script
 
情報編集 (web) 第2回:HTML入門
情報編集 (web) 第2回:HTML入門情報編集 (web) 第2回:HTML入門
情報編集 (web) 第2回:HTML入門
 
HTML5での制作、いつから始める?
HTML5での制作、いつから始める?HTML5での制作、いつから始める?
HTML5での制作、いつから始める?
 
メディア芸術基礎 II 第11回:HTML5実践 表現のための様々なJavaScriptライブラリ
メディア芸術基礎 II 第11回:HTML5実践 表現のための様々なJavaScriptライブラリメディア芸術基礎 II 第11回:HTML5実践 表現のための様々なJavaScriptライブラリ
メディア芸術基礎 II 第11回:HTML5実践 表現のための様々なJavaScriptライブラリ
 
【フロントエンド勉強会】 フロントエンド基礎知識
【フロントエンド勉強会】 フロントエンド基礎知識【フロントエンド勉強会】 フロントエンド基礎知識
【フロントエンド勉強会】 フロントエンド基礎知識
 
WordPress を使いこなそう
WordPress を使いこなそうWordPress を使いこなそう
WordPress を使いこなそう
 
HTMLのアウトラインを意識しよう
HTMLのアウトラインを意識しようHTMLのアウトラインを意識しよう
HTMLのアウトラインを意識しよう
 
ズルいLT 〜はじめてのライトニングトーク〜 / WP-D Week
ズルいLT 〜はじめてのライトニングトーク〜 / WP-D WeekズルいLT 〜はじめてのライトニングトーク〜 / WP-D Week
ズルいLT 〜はじめてのライトニングトーク〜 / WP-D Week
 
20160720 okubo mt_cloud_handson
20160720 okubo mt_cloud_handson20160720 okubo mt_cloud_handson
20160720 okubo mt_cloud_handson
 
nanocのhelper 利用実例
nanocのhelper 利用実例nanocのhelper 利用実例
nanocのhelper 利用実例
 

Destacado

Implementation patterns
Implementation patternsImplementation patterns
Implementation patternsTatsuya Maki
 
Language toolを使ってみる
Language toolを使ってみるLanguage toolを使ってみる
Language toolを使ってみるTakatsugu Nokubi
 
再帰、漸化式、差分方程式とアルゴリズム Gx#20
再帰、漸化式、差分方程式とアルゴリズム   Gx#20再帰、漸化式、差分方程式とアルゴリズム   Gx#20
再帰、漸化式、差分方程式とアルゴリズム Gx#20鉄次 尾形
 
WordPress 多言語化プラグインqTranslateの紹介
WordPress 多言語化プラグインqTranslateの紹介WordPress 多言語化プラグインqTranslateの紹介
WordPress 多言語化プラグインqTranslateの紹介Takashi Uemura
 
Detroit Programming City
Detroit Programming CityDetroit Programming City
Detroit Programming CityKoichi ITO
 
Git・Mercurial両対応 リポジトリ管理ツール「Kallithea」
Git・Mercurial両対応 リポジトリ管理ツール「Kallithea」Git・Mercurial両対応 リポジトリ管理ツール「Kallithea」
Git・Mercurial両対応 リポジトリ管理ツール「Kallithea」Go Maeda
 

Destacado (6)

Implementation patterns
Implementation patternsImplementation patterns
Implementation patterns
 
Language toolを使ってみる
Language toolを使ってみるLanguage toolを使ってみる
Language toolを使ってみる
 
再帰、漸化式、差分方程式とアルゴリズム Gx#20
再帰、漸化式、差分方程式とアルゴリズム   Gx#20再帰、漸化式、差分方程式とアルゴリズム   Gx#20
再帰、漸化式、差分方程式とアルゴリズム Gx#20
 
WordPress 多言語化プラグインqTranslateの紹介
WordPress 多言語化プラグインqTranslateの紹介WordPress 多言語化プラグインqTranslateの紹介
WordPress 多言語化プラグインqTranslateの紹介
 
Detroit Programming City
Detroit Programming CityDetroit Programming City
Detroit Programming City
 
Git・Mercurial両対応 リポジトリ管理ツール「Kallithea」
Git・Mercurial両対応 リポジトリ管理ツール「Kallithea」Git・Mercurial両対応 リポジトリ管理ツール「Kallithea」
Git・Mercurial両対応 リポジトリ管理ツール「Kallithea」
 

Más de ourmaninjapan

テレビのウェブ開発:その1
テレビのウェブ開発:その1テレビのウェブ開発:その1
テレビのウェブ開発:その1ourmaninjapan
 
テレビのウェブ開発:その2
テレビのウェブ開発:その2テレビのウェブ開発:その2
テレビのウェブ開発:その2ourmaninjapan
 
テレビのウェブ開発:その3
テレビのウェブ開発:その3テレビのウェブ開発:その3
テレビのウェブ開発:その3ourmaninjapan
 
HTML5概要、コードサンプル
HTML5概要、コードサンプルHTML5概要、コードサンプル
HTML5概要、コードサンプルourmaninjapan
 
The status of living HTML (highlights)
The status of living HTML (highlights)The status of living HTML (highlights)
The status of living HTML (highlights)ourmaninjapan
 
How to read W3C specs
How to read W3C specsHow to read W3C specs
How to read W3C specsourmaninjapan
 
HTML5: APIの活用事例 と 今後の広がり
HTML5: APIの活用事例 と 今後の広がりHTML5: APIの活用事例 と 今後の広がり
HTML5: APIの活用事例 と 今後の広がりourmaninjapan
 
HTML5とデバイスの連携: 良いところ、悪いところ、未来のこと
HTML5とデバイスの連携: 良いところ、悪いところ、未来のことHTML5とデバイスの連携: 良いところ、悪いところ、未来のこと
HTML5とデバイスの連携: 良いところ、悪いところ、未来のことourmaninjapan
 
testharness.js の基礎
testharness.js の基礎testharness.js の基礎
testharness.js の基礎ourmaninjapan
 
W3C Widgets、どこが面白い?
W3C Widgets、どこが面白い?W3C Widgets、どこが面白い?
W3C Widgets、どこが面白い?ourmaninjapan
 
W3C Widgets: Why should I care?
W3C Widgets: Why should I care? W3C Widgets: Why should I care?
W3C Widgets: Why should I care? ourmaninjapan
 
Widgets in theory and in practice
Widgets in theory and in practiceWidgets in theory and in practice
Widgets in theory and in practiceourmaninjapan
 
Mobile web development without developing a mobile site
Mobile web development without developing a mobile siteMobile web development without developing a mobile site
Mobile web development without developing a mobile siteourmaninjapan
 
HTML5: New capabilities, new markup
HTML5: New capabilities, new markupHTML5: New capabilities, new markup
HTML5: New capabilities, new markupourmaninjapan
 
small 画面でも、 BIG 画面でも、 今すぐ使えるレスポンシブ活用術
small 画面でも、 BIG 画面でも、 今すぐ使えるレスポンシブ活用術small 画面でも、 BIG 画面でも、 今すぐ使えるレスポンシブ活用術
small 画面でも、 BIG 画面でも、 今すぐ使えるレスポンシブ活用術ourmaninjapan
 
スマートTVへの アプローチと制作
スマートTVへの アプローチと制作スマートTVへの アプローチと制作
スマートTVへの アプローチと制作ourmaninjapan
 
「Network Service Discovery API ができました!」 と言われた時
「Network Service Discovery API ができました!」 と言われた時「Network Service Discovery API ができました!」 と言われた時
「Network Service Discovery API ができました!」 と言われた時ourmaninjapan
 

Más de ourmaninjapan (20)

テレビのウェブ開発:その1
テレビのウェブ開発:その1テレビのウェブ開発:その1
テレビのウェブ開発:その1
 
テレビのウェブ開発:その2
テレビのウェブ開発:その2テレビのウェブ開発:その2
テレビのウェブ開発:その2
 
テレビのウェブ開発:その3
テレビのウェブ開発:その3テレビのウェブ開発:その3
テレビのウェブ開発:その3
 
Developing for TV
Developing for TVDeveloping for TV
Developing for TV
 
HTML5概要、コードサンプル
HTML5概要、コードサンプルHTML5概要、コードサンプル
HTML5概要、コードサンプル
 
The status of living HTML (highlights)
The status of living HTML (highlights)The status of living HTML (highlights)
The status of living HTML (highlights)
 
How to read W3C specs
How to read W3C specsHow to read W3C specs
How to read W3C specs
 
HTML5: APIの活用事例 と 今後の広がり
HTML5: APIの活用事例 と 今後の広がりHTML5: APIの活用事例 と 今後の広がり
HTML5: APIの活用事例 と 今後の広がり
 
HTML5とデバイスの連携: 良いところ、悪いところ、未来のこと
HTML5とデバイスの連携: 良いところ、悪いところ、未来のことHTML5とデバイスの連携: 良いところ、悪いところ、未来のこと
HTML5とデバイスの連携: 良いところ、悪いところ、未来のこと
 
Web payments
Web paymentsWeb payments
Web payments
 
testharness.js の基礎
testharness.js の基礎testharness.js の基礎
testharness.js の基礎
 
W3C Widgets、どこが面白い?
W3C Widgets、どこが面白い?W3C Widgets、どこが面白い?
W3C Widgets、どこが面白い?
 
W3C Widgets: Why should I care?
W3C Widgets: Why should I care? W3C Widgets: Why should I care?
W3C Widgets: Why should I care?
 
Widgets in theory and in practice
Widgets in theory and in practiceWidgets in theory and in practice
Widgets in theory and in practice
 
Mobile web development without developing a mobile site
Mobile web development without developing a mobile siteMobile web development without developing a mobile site
Mobile web development without developing a mobile site
 
HTML5: New capabilities, new markup
HTML5: New capabilities, new markupHTML5: New capabilities, new markup
HTML5: New capabilities, new markup
 
small 画面でも、 BIG 画面でも、 今すぐ使えるレスポンシブ活用術
small 画面でも、 BIG 画面でも、 今すぐ使えるレスポンシブ活用術small 画面でも、 BIG 画面でも、 今すぐ使えるレスポンシブ活用術
small 画面でも、 BIG 画面でも、 今すぐ使えるレスポンシブ活用術
 
スマートTVへの アプローチと制作
スマートTVへの アプローチと制作スマートTVへの アプローチと制作
スマートTVへの アプローチと制作
 
「Network Service Discovery API ができました!」 と言われた時
「Network Service Discovery API ができました!」 と言われた時「Network Service Discovery API ができました!」 と言われた時
「Network Service Discovery API ができました!」 と言われた時
 
Presentation Skills
Presentation SkillsPresentation Skills
Presentation Skills
 

Último

新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
新人研修のまとめ       2024/04/12の勉強会で発表されたものです。新人研修のまとめ       2024/04/12の勉強会で発表されたものです。
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。iPride Co., Ltd.
 
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptxIoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptxAtomu Hidaka
 
20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directory20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directoryosamut
 
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システムスマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システムsugiuralab
 
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。iPride Co., Ltd.
 
UPWARD_share_company_information_20240415.pdf
UPWARD_share_company_information_20240415.pdfUPWARD_share_company_information_20240415.pdf
UPWARD_share_company_information_20240415.pdffurutsuka
 
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略Ryo Sasaki
 
Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By DanielPostman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Danieldanielhu54
 
PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000Shota Ito
 

Último (9)

新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
新人研修のまとめ       2024/04/12の勉強会で発表されたものです。新人研修のまとめ       2024/04/12の勉強会で発表されたものです。
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
 
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptxIoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
 
20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directory20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directory
 
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システムスマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
 
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
 
UPWARD_share_company_information_20240415.pdf
UPWARD_share_company_information_20240415.pdfUPWARD_share_company_information_20240415.pdf
UPWARD_share_company_information_20240415.pdf
 
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
 
Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By DanielPostman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Daniel
 
PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000
 

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