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