狠狠撸

狠狠撸Share a Scribd company logo
コーディングが上达するコツ
  株式会社エボルニ システム部門
   ディレクター 出口 達也
プロフィール
? Webエンジニア兼ディレクター

? PHPでの開発が得意です(CakePHP2.1が素晴らしく楽し
 い!)

? 最近は、テスト駆動開発(TDD)に興味があります!

? システム寄りのディレクターですが、HTMLのコーディン
 グは社内で一番早いはず!

? Galaxy Nexusを使っています!でもiPhoneが欲しいです!
 誰かください!
アジェンダ


? コーディングが遅い理由

? コーディング速度をあげる方法

? さらなる高みへ

? コーディングが上达するコツ(まとめ)
コーディングが遅い理由
コーディングが遅い理由
? 文書構造が想像出来ない

? class名、ID名に迷う

? ツールを使いこなせていない

? プロパティが分からない、使い方が分からな
 い、意味が分からない

? IE6などの古いブラウザ対応
                     など
コーディング速度を上げる方法
文書構造が想像出来ない


? なぜ想像出来ないのか?

 ? 経験が足りない

 ? コーディングの進め方が分からない
文書構造が想像出来ない
? 他のWebサイトを見て、研究する

 ? 私は、お昼休憩に適当にWebサイトを見て、HTML
  や、CSSの組み方を研究しました

 ? 他の人のコーディングを見ることはとても勉強になる

? 迷ったら、他の人に聞いてみる

 ? 他の人はどうやって組むのか誰かに聞いてみる

 ? コードレビューを積極的に行う
文書構造が想像出来ない
? 大枠から小枠へ考えていく

 ? いきなり細かいところを見ない

 ? まずは、大枠から考える

   ? ヘッダー、フッター、メイン、サイドと分けて考える

   ? そのあとに、メインの内容などを細かく見ていく

   ? 大枠から考えると、idのつけ方が分かる

    ? idって大体大枠に付いているのです
文書構造が想像出来ない


? スライス段階で構造を考える

 ? スライスをする時に構造を考えながらスライ
  ス領域を設定する

 ? 戻りが少なくて、効率が良くなる
文書構造が想像出来ない
? スライスの戻りを減らす方法

 ? デザインを見て、文書構造を考える

 ? ページ全体にスライスを設置

 ? すべてのスライスに画像名を設定

 ? 書き出し

 ? 画像をimagesなどに設置

 ? コーディング

   ? 考えた文書構造をベースに、大枠から記述していく

   ? スタイルを付けるのはHTMLがある程度出来てから
文書構造が想像出来ない


? 他の人のコーディングを見て研究

? 自分のコーディングを見てもらって発見

? 大枠から考えることが重要

? スライス段階でコーディングの8割が決まる
class名、ID名に迷う


? なぜ迷うのか?

 ? ルールが無い!

 ? どうしたらいいの!?
class名、ID名に迷う

? 迷わないように、ルール化しよう!

 ? みんなで共通したルールに出来ると最高にい
  いね!

 ? 最低限、自分の中でだけでもルール化しよう
  ね!
class名、ID名に迷う

? 全体に使えそう

 ? wrapper
 ? contents
 ? container
 ? page
 ? layout
               参考:http://css-happylife.com/archives/2007/0115_1345.php
class名、ID名に迷う

? 要素の上の方で使えそう

 ? head
 ? headline
 ? top
 ? header

              参考:http://css-happylife.com/archives/2007/0115_1345.php
class名、ID名に迷う

? 要素の下の方で使えそう

 ? foot
 ? bottom
 ? copyright
 ? footer

               参考:http://css-happylife.com/archives/2007/0115_1345.php
class名、ID名に迷う
?   ナビゲーションで使えそう

    ?   navi

    ?   gnavi

    ?   subnavi

    ?   nav

    ?   gnav

    ?   subnav
                  参考:http://css-happylife.com/archives/2007/0115_1345.php
class名、ID名に迷う



? パンくずで使えそう

 ? breadcrumbs
 ? path


             参考:http://css-happylife.com/archives/2007/0115_1345.php
class名、ID名に迷う
?   メインで使えそう

    ?   main

    ?   entry

    ?   item

    ?   box

    ?   block

    ?   lead
                参考:http://css-happylife.com/archives/2007/0115_1345.php
class名、ID名に迷う
? メニュー、サイドで使えそう

 ? menu
 ? side
 ? sub
 ? subMenu
 ? sideBar
 ? sideMenu
 ? aside
              参考:http://css-happylife.com/archives/2007/0115_1345.php
class名、ID名に迷う


? 画像で使えそう

 ? image
 ? photo
 ? eyecache

              参考:http://css-happylife.com/archives/2007/0115_1345.php
class名、ID名に迷う

? テキストで使えそう

 ? text
 ? lead
 ? title
 ? label
 ? caption
             参考:http://css-happylife.com/archives/2007/0115_1345.php
class名、ID名に迷う
? 囲みで使えそう

 ? block
 ? entry
 ? article
 ? texts
 ? images
 ? ~Wrapper(内容物に設定しているclass名+” Wrapper”)

 ? ~s(内容物に設定しているclass名の複数形)
             参考:http://css-happylife.com/archives/2007/0115_1345.php
class名、ID名に迷う

? 決まらなかったら

 ? 内容を1英単語で表す
  アルクで日本語を英訳するのがオススメ

 ? 内容が分からない場合は、諦めて汎用的な
  block、textなどのclass名を付ける
class名、ID名に迷う




? 迷わないようにルール化する
ツールが使いこなせていない
?   はじめのうちは、Dreamweaverが一番良い

    ?   設定を変えて、自分のやりやすい環境を作りましょう

?   慣れたら、Zen-Cordingを使う

    ?   構造を頭で考えられるようになったら、Zen-Cordingが一番早
        くHTMLを組める

?   でも、NetbeansなどのIDEを使ってもらいたい

    ?   改行コードが勝手に変わる、文字コードの判定が微妙、システ
        ム開発に向かないなどの理由で、Dreamweaverでのコーディ
        ングは非推奨
ツールが使いこなせていない
?   開発者ツール(Firebugなど)に慣れる

    ?   開発者ツールを使いこなして、悩むのをやめて、効率良く試す

    ?   ツールをもっと積極的に使う

?   インデントを    える

    ?   インデントは馬鹿に出来ない

    ?   読みやすさ(可読性)が低いと、把握するのに時間がかかっ
        て、無駄が多くなる

    ?   Dreamweaverのソースフォーマット機能は非推奨
ツールが使いこなせていない



? ツールと仲良くなって効率アップ

? インデントしてないソースは見ません
プロパティが色々分からない
? 聞いてみる

 ? やりたいことを伝えて、教えてもらう

? やってみる

 ? 簡単なHTMLとCSSで実際にやってみる!

 ? やってみると分かることが多い!

? 結果を伝える

 ? 教えてもらった人に結果を伝える
プロパティが色々分からない




? 聞いてみる、やってみる、結果を伝える
古いブラウザ対応
?   IE6、IE7へ対応する

    ?   positionを極力使わない

        ?   z-indexを管理しきれなくなる

    ?   widthを設定すると表示崩れが直ることが多い

    ?   FirefoxやChrome,IE8が大丈夫でも崩れるときは崩れる

    ?   正直対応はやめたいが、対応せざるを得ない場合がいまでもある

    ?   どうしても分からない場合は、悩むぐらいなら、誰かに聞いた方
        が良い
古いブラウザ対応

? IE8へ対応する

 ? IE8でも、ChromeやFirefoxに比べるとまだまだ

 ? 不可解な1pxの空白が開く場合がある

 ? それでもIE7以前に比べれば幾分もマシ

 ? これも分からなかったら、誰かに聞きましょう
古いブラウザ対応
? 互換モードへの対応

 ? 標準モードへ変更をお願いするのが一番

 ? かなり大変なので、覚悟が必要

 ? 難しい場合は、positionやwidthの計算方法、
  margin:autoなど注意しながら対応

 ? 非推奨だが、ブラウザ毎にCSSを分けるのも方法の一つ

 ? 何かあったら誰かに見てもらいましょう
古いブラウザ対応
?   FirefoxやChromeと一緒に、対応するIEの最低バージョ
    ンでも同時に確認をしながら、コーディングを行う

    ?   IEの開発者ツールを使えば、旧バージョン(7ま
        で)での表示を再現出来る

?   IE6,7で表示崩れしたらwidthで解決することが多い

?   出来る限り自力でやってみる

?   どうしても出来ないなら誰かに助けを求めましょう
速度アップテクニック
スライス编
速度アップテクニック(スライス编)

? 慣れるまでは、スライスだけではなく、デザインを印刷して、
 構造を考えると分かりやすい

? 連番の生成は、Fireworksに拡張(PI_Slice)を追加して楽に出
 来る

? 複数のスライス領域を選択すると、そのスライス領域らの横幅
 と高さがプロパティウィンドウに表示されるので、横幅を測る
 手間が省ける

? ガイドを引いたあと、Shiftキーを押すことで、ガイド間の長さ
 が分かるので、長さを測る手間が省ける
贬罢惭尝编
速度アップテクニック(贬罢惭尝编)

? Zen?Cordingを使う

  ? やっぱりZen-Cordingは偉大です

? 補完機能を活用する

  ? Dreamweaver、NetBeans、Eclipseなど大体使える

? 原稿の流し込みが必要な場合は。コピペじゃなく、
 カットペにすると、ミスが減る
速度アップテクニック(贬罢惭尝编)

? 同じ作業はまとめて行う

 ? 多ページに渡る修正の場合、1ページずつ対
  応するのではなく、修正箇所を洗い出して、
  一気に修正する

? バリデーションをかける癖をつける

 ? 閉じタグ忘れなどを防ぐことが出来る
颁厂厂编
速度アップテクニック(颁厂厂编)
? 開発者ツールで試してから、それをCSSファイルに反映する

 ? 反映して、ちょっと修正して、反映して…のサイクルが短く
  なるので、結果早くなる

 ? widthをデザインからではなく、開発者ツールで教えてくれ
  る幅に設定する

 ? Chromeの開発者ツールなら、編集したCSSファイルを出力す
  ることが出来る

   ? コロンの後ろにスペースが入ったり、プロパティの順序
    が変わってしまうが、部分的に利用すれば良い
速度アップテクニック(颁厂厂编)
?   補完機能を使う

    ?   HTMLと同様に、大体のIDEで使えるので、使って
        いく

?   セレクタは極力短くする

    ?   3つぐらいが理想的

        ?   idから始まるようにしておく

        ?   id毎にまとめておくと管理がしやすい
速度アップテクニック(颁厂厂编)

? ルール化する

 ? marginを上に付けるか、下に付けるか迷った
  ら、下に付けることにするなど

  ? ルールは自分の成長に合わせて、変更すれ
   ば良いでしょう

? バリデーションをかける癖をつける
その他编
速度アップテクニック(その他编)

? 目標時間を決めてから制作を開始する

 ? 目標があると、時間を意識出来て、自然と効率が
     アップ出来る

? マウス、キーボードを自分が使いやすいものに変え
 る

? 横幅や縦幅が狭いディスプレイは新しいものに変える

? ショートカットキーを覚える
さらなる高みへ
さらなる高みへ


? HTML5
? CSS3
? JavaScript
? スマホ対応
HTML5

? これからのWebを支える超重要な技術

 ? 最近はスマホサイトだけではなく、PCサイトで
  も取り入れられ始めているが数は多くない、
  2014年に勧告されるので、それ以降はHTML5で
  のコーディングが当たり前になると考えられる

 ? HTML5GOGOで、もっともっと情報発信をし
  たい
CSS3
?   HTML5と並んで超重要な技術

    ?   HTML5と一緒に扱うことが多い

    ?   CSS3でなくても出来る場合があるので、今はまだスマホ
        サイトや、先進的なサイトじゃない限りは使うことが少
        ないかもしれない

    ?   ブラウザ毎にpre?x(-webkit-のような)を付ける必要がある

    ?   これもHTML5GOGOで、もっともっと情報発信をした
        い
JavaScript

? コーディングするならJavaScriptまでは覚えたい

 ? 今やJavaScriptを使っていないサイトは皆無

 ? エンジニア界隈ではJavaScriptが熱い

 ? これもHTML5GOGOで、もっともっと情報
  発信をしたい
スマホ対応
? フィーチャーフォンからスマートフォンへの移行期が終わり、
 本格的なスマホ時代へ

 ? スマホはHTML5やCSS3が使いたい放題

 ? レスポンシブWebデザインが流行っている

   ? 最初から考慮することが多く、設計でミスをすると取り
    返しがつかないので、かなり高度なテクニック

   ? 今あるPCサイトをスマホに対応する場合などは、レスポ
    ンシブWebデザインを使わずに、スマホサイトを作った
    方が、結果良い物が出来る
コーディングが上达するコツ
   (まとめ)
コーディングが上达するコツ(まとめ)

? 普段からサイトのコーディング方法を見る習慣を付ける

? 自分ルールを作る

 ? 悩む時間を短くする

? ツールと仲良くなる

 ? 書くコードの量を減らす

? 時間がかかっている点を洗い出し、どうすれば改善出来るか
 を、誰かに相談する

 ? 日々成長することを意識する

More Related Content

What's hot (20)

PPTX
2016年版 フロントエント?開発フォーマット
Kenya Kodaira
?
PDF
使いやすい奥辞谤诲笔谤别蝉蝉のための颁厂厂のつくりかた
Hiroshi Urabe
?
PDF
HTML/CSSを効率的にする メタ言語とツールのアレコレ
知己 久保
?
PDF
大规模サイトにおける本当は怖い颁厂厂の话
井上 誠
?
PDF
イマドキの「タグ=贬罢惭尝」とスタイルシート=颁厂厂」を知ろう
Mori Kazue
?
PDF
E2E CSS Testing at HTML5 Conference 2016
Takeharu Igari
?
PDF
?箩蚕耻别谤测をおぼえよう!その2
Nishida Kansuke
?
PDF
?今日から使える! HTML/CSS/JSの シンフ?ルテクニック15選
Horiguchi Seito
?
PPTX
マルチデバイス时代の高速化
Shin Takeuchi
?
PPTX
第10回勉強会 CSS設計について
takumaro web
?
PDF
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
Yoshiki Hayama
?
PPTX
厂惭础颁厂厂入门
iPride Co., Ltd.
?
PDF
贬罢惭尝5マークアップの心得と作法
Futomi Hatano
?
PPTX
叠辞辞迟蝉迟谤补辫を使って効率よく奥辞谤诲笔谤别蝉蝉オリジナルテーマを作る
Yoshinori Kobayashi
?
PDF
奥别产勉强会(贬罢惭尝+颁厂厂+闯厂入门の入门)
Noriaki UCHIYAMA
?
PDF
奥辞谤诲笔谤别蝉蝉で颁厂厂プリプロセッサ入门
Sou Lab
?
PDF
JavaScript 研修
Yuki Ishikawa
?
PDF
设计から実装まで、今すぐ始める高速化
masaaki komori
?
PPTX
css基本。
web12
?
PDF
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
rie05
?
2016年版 フロントエント?開発フォーマット
Kenya Kodaira
?
使いやすい奥辞谤诲笔谤别蝉蝉のための颁厂厂のつくりかた
Hiroshi Urabe
?
HTML/CSSを効率的にする メタ言語とツールのアレコレ
知己 久保
?
大规模サイトにおける本当は怖い颁厂厂の话
井上 誠
?
イマドキの「タグ=贬罢惭尝」とスタイルシート=颁厂厂」を知ろう
Mori Kazue
?
E2E CSS Testing at HTML5 Conference 2016
Takeharu Igari
?
?箩蚕耻别谤测をおぼえよう!その2
Nishida Kansuke
?
?今日から使える! HTML/CSS/JSの シンフ?ルテクニック15選
Horiguchi Seito
?
マルチデバイス时代の高速化
Shin Takeuchi
?
第10回勉強会 CSS設計について
takumaro web
?
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
Yoshiki Hayama
?
厂惭础颁厂厂入门
iPride Co., Ltd.
?
贬罢惭尝5マークアップの心得と作法
Futomi Hatano
?
叠辞辞迟蝉迟谤补辫を使って効率よく奥辞谤诲笔谤别蝉蝉オリジナルテーマを作る
Yoshinori Kobayashi
?
奥别产勉强会(贬罢惭尝+颁厂厂+闯厂入门の入门)
Noriaki UCHIYAMA
?
奥辞谤诲笔谤别蝉蝉で颁厂厂プリプロセッサ入门
Sou Lab
?
JavaScript 研修
Yuki Ishikawa
?
设计から実装まで、今すぐ始める高速化
masaaki komori
?
css基本。
web12
?
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
rie05
?

Viewers also liked (6)

PDF
はじめての欧文书体
Shohei Itoh
?
PDF
レスポンシブ奥别产デザインの基础
Hiroyuki Ogawa
?
PDF
尝笔デザインに関して?作成のセオリーとコツ?
典子 松本
?
PDF
「奥别产デザイナーのためのタイポグラフィと文字组版」
swwwitch inc.
?
PDF
SEOに効くコンテンツの作り方 ver1.1
滨狈贵翱叠础贬狈.颈苍肠(株式会社インフォバーン)
?
PDF
奥别产デザインのセオリーを学ぼう
Toshiaki Sasaki
?
はじめての欧文书体
Shohei Itoh
?
レスポンシブ奥别产デザインの基础
Hiroyuki Ogawa
?
尝笔デザインに関して?作成のセオリーとコツ?
典子 松本
?
「奥别产デザイナーのためのタイポグラフィと文字组版」
swwwitch inc.
?
奥别产デザインのセオリーを学ぼう
Toshiaki Sasaki
?
Ad

Similar to コーディングが上达するコツ (20)

PDF
jQuery Performance Tips – jQueryにおける高速化 -
Hayato Mizuno
?
PDF
Web制作勉強会 #1
Moto Yan
?
PDF
フロント作业の効率化
Yuto Yoshinari
?
PDF
「html5 boilerplate」から考える、これからのマークアップ
Yasuhito Yabe
?
PPTX
バレンタイン直前开催奥别产勉强会
Takahide Hosokawa
?
PDF
HTML5
smallworkshop
?
PDF
Sacss WordPress Special with Fireworks
YUKI YAMAGUCHI
?
PDF
アイテ?アを形にする ②HTML/CSSから始めるWeb技術の基礎
DIVE INTO CODE Corp.
?
PDF
スマフォ时代に乗り遅れない為のレスポンシブ?ウェブデザイン
invogue
?
PDF
贬罢惭尝初心者向け勉强会
SakiKomuro
?
PPTX
颁蝉蝉によるレイアウト
Tomoko Takashima
?
PDF
奥贰叠开発はじめの一歩 讲师:村井亮介様
株式会社骋谤别别苍贬补肠办
?
PDF
コーディングがラクになる!? “自分仕様”のさくさくコーディング法
Rico Sengan
?
PDF
Css
SD Labo
?
KEY
Webapp startup example_to_dolist
Shinichiro Kumeuchi
?
ODP
SaCSS20100327
Seiko Kuchida
?
PPT
颁厂厂勉强会
Chisa Youzaka
?
PDF
Dw
Taku Kata
?
PDF
顿飞补讲
Taku Kata
?
PDF
_WEB の作業が楽になるテクニック総まとめ 第7回
Kelly Holonic
?
jQuery Performance Tips – jQueryにおける高速化 -
Hayato Mizuno
?
Web制作勉強会 #1
Moto Yan
?
フロント作业の効率化
Yuto Yoshinari
?
「html5 boilerplate」から考える、これからのマークアップ
Yasuhito Yabe
?
バレンタイン直前开催奥别产勉强会
Takahide Hosokawa
?
Sacss WordPress Special with Fireworks
YUKI YAMAGUCHI
?
アイテ?アを形にする ②HTML/CSSから始めるWeb技術の基礎
DIVE INTO CODE Corp.
?
スマフォ时代に乗り遅れない為のレスポンシブ?ウェブデザイン
invogue
?
贬罢惭尝初心者向け勉强会
SakiKomuro
?
颁蝉蝉によるレイアウト
Tomoko Takashima
?
奥贰叠开発はじめの一歩 讲师:村井亮介様
株式会社骋谤别别苍贬补肠办
?
コーディングがラクになる!? “自分仕様”のさくさくコーディング法
Rico Sengan
?
Webapp startup example_to_dolist
Shinichiro Kumeuchi
?
SaCSS20100327
Seiko Kuchida
?
颁厂厂勉强会
Chisa Youzaka
?
顿飞补讲
Taku Kata
?
_WEB の作業が楽になるテクニック総まとめ 第7回
Kelly Holonic
?
Ad

コーディングが上达するコツ

Editor's Notes