Publicité
コーディングが上達するコツ
25 Apr 2012•0 j'aime•29,821 vues
69 j'aime
Soyez le premier à aimer ceci
afficher plus
vues
Nombre de vues
0
Sur Slideshare
0
À partir des intégrations
0
Nombre d'intégrations
0
Télécharger pour lire hors ligne
Signaler
Développement personnel
http://html555.jp/2012/04/25/cording-speed-up/
evol-niSuivre
Publicité
コーディングが上達するコツ
- コーディングが上達するコツ 株式会社エボルニ システム部門 ディレクター 出口 達也
- プロフィール • 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キーを押すことで、ガイド間の長さ が分かるので、長さを測る手間が省ける
- HTML編
- 速度アップテクニック（HTML編） • Zen−Cordingを使う • やっぱりZen-Cordingは偉大です • 補完機能を活用する • Dreamweaver、NetBeans、Eclipseなど大体使える • 原稿の流し込みが必要な場合は。コピペじゃなく、 カットペにすると、ミスが減る
- 速度アップテクニック（HTML編） • 同じ作業はまとめて行う • 多ページに渡る修正の場合、1ページずつ対 応するのではなく、修正箇所を洗い出して、 一気に修正する • バリデーションをかける癖をつける • 閉じタグ忘れなどを防ぐことが出来る
- CSS編
- 速度アップテクニック（CSS編） • 開発者ツールで試してから、それをCSSファイルに反映する • 反映して、ちょっと修正して、反映して…のサイクルが短く なるので、結果早くなる • widthをデザインからではなく、開発者ツールで教えてくれ る幅に設定する • Chromeの開発者ツールなら、編集したCSSファイルを出力す ることが出来る • コロンの後ろにスペースが入ったり、プロパティの順序 が変わってしまうが、部分的に利用すれば良い
- 速度アップテクニック（CSS編） • 補完機能を使う • HTMLと同様に、大体のIDEで使えるので、使って いく • セレクタは極力短くする • 3つぐらいが理想的 • idから始まるようにしておく • id毎にまとめておくと管理がしやすい
- 速度アップテクニック（CSS編） • ルール化する • marginを上に付けるか、下に付けるか迷った ら、下に付けることにするなど • ルールは自分の成長に合わせて、変更すれ ば良いでしょう • バリデーションをかける癖をつける
- その他編
- 速度アップテクニック（その他編） • 目標時間を決めてから制作を開始する • 目標があると、時間を意識出来て、自然と効率が アップ出来る • マウス、キーボードを自分が使いやすいものに変え る • 横幅や縦幅が狭いディスプレイは新しいものに変える • ショートカットキーを覚える
- さらなる高みへ
- さらなる高みへ • HTML5 • CSS3 • JavaScript • スマホ対応
- HTML5 • これからのWebを支える超重要な技術 • 最近はスマホサイトだけではなく、PCサイトで も取り入れられ始めているが数は多くない、 2014年に勧告されるので、それ以降はHTML5で のコーディングが当たり前になると考えられる • HTML5GOGOで、もっともっと情報発信をし たい
- CSS3 • HTML5と並んで超重要な技術 • HTML5と一緒に扱うことが多い • CSS3でなくても出来る場合があるので、今はまだスマホ サイトや、先進的なサイトじゃない限りは使うことが少 ないかもしれない • ブラウザ毎にprefix(-webkit-のような)を付ける必要がある • これもHTML5GOGOで、もっともっと情報発信をした い
- JavaScript • コーディングするならJavaScriptまでは覚えたい • 今やJavaScriptを使っていないサイトは皆無 • エンジニア界隈ではJavaScriptが熱い • これもHTML5GOGOで、もっともっと情報 発信をしたい
- スマホ対応 • フィーチャーフォンからスマートフォンへの移行期が終わり、 本格的なスマホ時代へ • スマホはHTML5やCSS3が使いたい放題 • レスポンシブWebデザインが流行っている • 最初から考慮することが多く、設計でミスをすると取り 返しがつかないので、かなり高度なテクニック • 今あるPCサイトをスマホに対応する場合などは、レスポ ンシブWebデザインを使わずに、スマホサイトを作った 方が、結果良い物が出来る
- コーディングが上達するコツ （まとめ）
- コーディングが上達するコツ（まとめ） • 普段からサイトのコーディング方法を見る習慣を付ける • 自分ルールを作る • 悩む時間を短くする • ツールと仲良くなる • 書くコードの量を減らす • 時間がかかっている点を洗い出し、どうすれば改善出来るか を、誰かに相談する • 日々成長することを意識する
Notes de l'éditeur
- \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
Publicité