Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

36,780 views

Published on

http://html555.jp/2012/04/25/cording-speed-up/

Published in: Self Improvement

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

  1. 1. コーディングが上達するコツ 株式会社エボルニ システム部門 ディレクター 出口 達也
  2. 2. プロフィール• Webエンジニア兼ディレクター• PHPでの開発が得意です(CakePHP2.1が素晴らしく楽し い!)• 最近は、テスト駆動開発(TDD)に興味があります!• システム寄りのディレクターですが、HTMLのコーディン グは社内で一番早いはず!• Galaxy Nexusを使っています!でもiPhoneが欲しいです! 誰かください!
  3. 3. アジェンダ• コーディングが遅い理由• コーディング速度をあげる方法• さらなる高みへ• コーディングが上達するコツ(まとめ)
  4. 4. コーディングが遅い理由
  5. 5. コーディングが遅い理由• 文書構造が想像出来ない• class名、ID名に迷う• ツールを使いこなせていない• プロパティが分からない、使い方が分からな い、意味が分からない• IE6などの古いブラウザ対応 など
  6. 6. コーディング速度を上げる方法
  7. 7. 文書構造が想像出来ない• なぜ想像出来ないのか? • 経験が足りない • コーディングの進め方が分からない
  8. 8. 文書構造が想像出来ない• 他のWebサイトを見て、研究する • 私は、お昼休憩に適当にWebサイトを見て、HTML や、CSSの組み方を研究しました • 他の人のコーディングを見ることはとても勉強になる• 迷ったら、他の人に聞いてみる • 他の人はどうやって組むのか誰かに聞いてみる • コードレビューを積極的に行う
  9. 9. 文書構造が想像出来ない• 大枠から小枠へ考えていく • いきなり細かいところを見ない • まずは、大枠から考える • ヘッダー、フッター、メイン、サイドと分けて考える • そのあとに、メインの内容などを細かく見ていく • 大枠から考えると、idのつけ方が分かる • idって大体大枠に付いているのです
  10. 10. 文書構造が想像出来ない• スライス段階で構造を考える • スライスをする時に構造を考えながらスライ ス領域を設定する • 戻りが少なくて、効率が良くなる
  11. 11. 文書構造が想像出来ない• スライスの戻りを減らす方法 • デザインを見て、文書構造を考える • ページ全体にスライスを設置 • すべてのスライスに画像名を設定 • 書き出し • 画像をimagesなどに設置 • コーディング • 考えた文書構造をベースに、大枠から記述していく • スタイルを付けるのはHTMLがある程度出来てから
  12. 12. 文書構造が想像出来ない• 他の人のコーディングを見て研究• 自分のコーディングを見てもらって発見• 大枠から考えることが重要• スライス段階でコーディングの8割が決まる
  13. 13. class名、ID名に迷う• なぜ迷うのか? • ルールが無い! • どうしたらいいの!?
  14. 14. class名、ID名に迷う• 迷わないように、ルール化しよう! • みんなで共通したルールに出来ると最高にい いね! • 最低限、自分の中でだけでもルール化しよう ね!
  15. 15. class名、ID名に迷う• 全体に使えそう • wrapper • contents • container • page • layout 参考:http://css-happylife.com/archives/2007/0115_1345.php
  16. 16. class名、ID名に迷う• 要素の上の方で使えそう • head • headline • top • header 参考:http://css-happylife.com/archives/2007/0115_1345.php
  17. 17. class名、ID名に迷う• 要素の下の方で使えそう • foot • bottom • copyright • footer 参考:http://css-happylife.com/archives/2007/0115_1345.php
  18. 18. class名、ID名に迷う• ナビゲーションで使えそう • navi • gnavi • subnavi • nav • gnav • subnav 参考:http://css-happylife.com/archives/2007/0115_1345.php
  19. 19. class名、ID名に迷う• パンくずで使えそう • breadcrumbs • path 参考:http://css-happylife.com/archives/2007/0115_1345.php
  20. 20. class名、ID名に迷う• メインで使えそう • main • entry • item • box • block • lead 参考:http://css-happylife.com/archives/2007/0115_1345.php
  21. 21. class名、ID名に迷う• メニュー、サイドで使えそう • menu • side • sub • subMenu • sideBar • sideMenu • aside 参考:http://css-happylife.com/archives/2007/0115_1345.php
  22. 22. class名、ID名に迷う• 画像で使えそう • image • photo • eyecache 参考:http://css-happylife.com/archives/2007/0115_1345.php
  23. 23. class名、ID名に迷う• テキストで使えそう • text • lead • title • label • caption 参考:http://css-happylife.com/archives/2007/0115_1345.php
  24. 24. class名、ID名に迷う• 囲みで使えそう • block • entry • article • texts • images • ∼Wrapper(内容物に設定しているclass名+” Wrapper”) • ∼s(内容物に設定しているclass名の複数形) 参考:http://css-happylife.com/archives/2007/0115_1345.php
  25. 25. class名、ID名に迷う• 決まらなかったら • 内容を1英単語で表す アルクで日本語を英訳するのがオススメ • 内容が分からない場合は、諦めて汎用的な block、textなどのclass名を付ける
  26. 26. class名、ID名に迷う• 迷わないようにルール化する
  27. 27. ツールが使いこなせていない• はじめのうちは、Dreamweaverが一番良い • 設定を変えて、自分のやりやすい環境を作りましょう• 慣れたら、Zen-Cordingを使う • 構造を頭で考えられるようになったら、Zen-Cordingが一番早 くHTMLを組める• でも、NetbeansなどのIDEを使ってもらいたい • 改行コードが勝手に変わる、文字コードの判定が微妙、システ ム開発に向かないなどの理由で、Dreamweaverでのコーディ ングは非推奨
  28. 28. ツールが使いこなせていない• 開発者ツール(Firebugなど)に慣れる • 開発者ツールを使いこなして、悩むのをやめて、効率良く試す • ツールをもっと積極的に使う• インデントを える • インデントは馬鹿に出来ない • 読みやすさ(可読性)が低いと、把握するのに時間がかかっ て、無駄が多くなる • Dreamweaverのソースフォーマット機能は非推奨
  29. 29. ツールが使いこなせていない• ツールと仲良くなって効率アップ• インデントしてないソースは見ません
  30. 30. プロパティが色々分からない• 聞いてみる • やりたいことを伝えて、教えてもらう• やってみる • 簡単なHTMLとCSSで実際にやってみる! • やってみると分かることが多い!• 結果を伝える • 教えてもらった人に結果を伝える
  31. 31. プロパティが色々分からない• 聞いてみる、やってみる、結果を伝える
  32. 32. 古いブラウザ対応• IE6、IE7へ対応する • positionを極力使わない • z-indexを管理しきれなくなる • widthを設定すると表示崩れが直ることが多い • FirefoxやChrome,IE8が大丈夫でも崩れるときは崩れる • 正直対応はやめたいが、対応せざるを得ない場合がいまでもある • どうしても分からない場合は、悩むぐらいなら、誰かに聞いた方 が良い
  33. 33. 古いブラウザ対応• IE8へ対応する • IE8でも、ChromeやFirefoxに比べるとまだまだ • 不可解な1pxの空白が開く場合がある • それでもIE7以前に比べれば幾分もマシ • これも分からなかったら、誰かに聞きましょう
  34. 34. 古いブラウザ対応• 互換モードへの対応 • 標準モードへ変更をお願いするのが一番 • かなり大変なので、覚悟が必要 • 難しい場合は、positionやwidthの計算方法、 margin:autoなど注意しながら対応 • 非推奨だが、ブラウザ毎にCSSを分けるのも方法の一つ • 何かあったら誰かに見てもらいましょう
  35. 35. 古いブラウザ対応• FirefoxやChromeと一緒に、対応するIEの最低バージョ ンでも同時に確認をしながら、コーディングを行う • IEの開発者ツールを使えば、旧バージョン(7ま で)での表示を再現出来る• IE6,7で表示崩れしたらwidthで解決することが多い• 出来る限り自力でやってみる• どうしても出来ないなら誰かに助けを求めましょう
  36. 36. 速度アップテクニック
  37. 37. スライス編
  38. 38. 速度アップテクニック(スライス編)• 慣れるまでは、スライスだけではなく、デザインを印刷して、 構造を考えると分かりやすい• 連番の生成は、Fireworksに拡張(PI_Slice)を追加して楽に出 来る• 複数のスライス領域を選択すると、そのスライス領域らの横幅 と高さがプロパティウィンドウに表示されるので、横幅を測る 手間が省ける• ガイドを引いたあと、Shiftキーを押すことで、ガイド間の長さ が分かるので、長さを測る手間が省ける
  39. 39. HTML編
  40. 40. 速度アップテクニック(HTML編)• Zen−Cordingを使う • やっぱりZen-Cordingは偉大です• 補完機能を活用する • Dreamweaver、NetBeans、Eclipseなど大体使える• 原稿の流し込みが必要な場合は。コピペじゃなく、 カットペにすると、ミスが減る
  41. 41. 速度アップテクニック(HTML編)• 同じ作業はまとめて行う • 多ページに渡る修正の場合、1ページずつ対 応するのではなく、修正箇所を洗い出して、 一気に修正する• バリデーションをかける癖をつける • 閉じタグ忘れなどを防ぐことが出来る
  42. 42. CSS編
  43. 43. 速度アップテクニック(CSS編)• 開発者ツールで試してから、それをCSSファイルに反映する • 反映して、ちょっと修正して、反映して…のサイクルが短く なるので、結果早くなる • widthをデザインからではなく、開発者ツールで教えてくれ る幅に設定する • Chromeの開発者ツールなら、編集したCSSファイルを出力す ることが出来る • コロンの後ろにスペースが入ったり、プロパティの順序 が変わってしまうが、部分的に利用すれば良い
  44. 44. 速度アップテクニック(CSS編)• 補完機能を使う • HTMLと同様に、大体のIDEで使えるので、使って いく• セレクタは極力短くする • 3つぐらいが理想的 • idから始まるようにしておく • id毎にまとめておくと管理がしやすい
  45. 45. 速度アップテクニック(CSS編)• ルール化する • marginを上に付けるか、下に付けるか迷った ら、下に付けることにするなど • ルールは自分の成長に合わせて、変更すれ ば良いでしょう• バリデーションをかける癖をつける
  46. 46. その他編
  47. 47. 速度アップテクニック(その他編)• 目標時間を決めてから制作を開始する • 目標があると、時間を意識出来て、自然と効率が アップ出来る• マウス、キーボードを自分が使いやすいものに変え る• 横幅や縦幅が狭いディスプレイは新しいものに変える• ショートカットキーを覚える
  48. 48. さらなる高みへ
  49. 49. さらなる高みへ• HTML5• CSS3• JavaScript• スマホ対応
  50. 50. HTML5• これからのWebを支える超重要な技術 • 最近はスマホサイトだけではなく、PCサイトで も取り入れられ始めているが数は多くない、 2014年に勧告されるので、それ以降はHTML5で のコーディングが当たり前になると考えられる • HTML5GOGOで、もっともっと情報発信をし たい
  51. 51. CSS3• HTML5と並んで超重要な技術 • HTML5と一緒に扱うことが多い • CSS3でなくても出来る場合があるので、今はまだスマホ サイトや、先進的なサイトじゃない限りは使うことが少 ないかもしれない • ブラウザ毎にprefix(-webkit-のような)を付ける必要がある • これもHTML5GOGOで、もっともっと情報発信をした い
  52. 52. JavaScript• コーディングするならJavaScriptまでは覚えたい • 今やJavaScriptを使っていないサイトは皆無 • エンジニア界隈ではJavaScriptが熱い • これもHTML5GOGOで、もっともっと情報 発信をしたい
  53. 53. スマホ対応• フィーチャーフォンからスマートフォンへの移行期が終わり、 本格的なスマホ時代へ • スマホはHTML5やCSS3が使いたい放題 • レスポンシブWebデザインが流行っている • 最初から考慮することが多く、設計でミスをすると取り 返しがつかないので、かなり高度なテクニック • 今あるPCサイトをスマホに対応する場合などは、レスポ ンシブWebデザインを使わずに、スマホサイトを作った 方が、結果良い物が出来る
  54. 54. コーディングが上達するコツ (まとめ)
  55. 55. コーディングが上達するコツ(まとめ)• 普段からサイトのコーディング方法を見る習慣を付ける• 自分ルールを作る • 悩む時間を短くする• ツールと仲良くなる • 書くコードの量を減らす• 時間がかかっている点を洗い出し、どうすれば改善出来るか を、誰かに相談する • 日々成長することを意識する

×