SlideShare uma empresa Scribd logo
1 de 14
Baixar para ler offline
実際のウェブページコーディング
  (ま、殆ど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)

Mais conteúdo relacionado

Mais procurados

いちばん簡単な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
 

Mais procurados (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 利用実例
 

Destaque

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
 

Destaque (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」
 

Mais 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
 

Mais 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

LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー  DS20L  カタログ  LiDARデバイスLoRaWANスマート距離検出センサー  DS20L  カタログ  LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイスCRI Japan, Inc.
 
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)NTT DATA Technology & Innovation
 
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。iPride Co., Ltd.
 
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半        2024/04/26の勉強会で発表されたものです。新人研修 後半        2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。iPride Co., Ltd.
 
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。iPride Co., Ltd.
 
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアルLoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアルCRI Japan, Inc.
 
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)Hiroshi Tomioka
 

Último (7)

LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー  DS20L  カタログ  LiDARデバイスLoRaWANスマート距離検出センサー  DS20L  カタログ  LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
 
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
 
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
 
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半        2024/04/26の勉強会で発表されたものです。新人研修 後半        2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
 
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
 
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアルLoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
 
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
 

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