Yuhei Katayama 
こんにちは。ゆーへー（@katayamada_Y）です。
最近、人にコーディングを教える事が多いので、コーディングってどうやったら早くなるのか。
時間がどこにかかっているのか考えてみました。
自分でいうのもなんですが、それなりに早くサイトを作れます。
月に５ページ～１０ページのサイトを平均5～８サイトくらいは構築してます。
✔本記事を読んでほしい人
- コーディングに時間がかかってしまう人
- 納品後の修正が多い人
コーディングが早くなると・・・
- 自由な時間が増える
- 不具合の修正もさくっと終わる
- 収入が増える( ^)o(^ )
良い事しかない！！爆速コーディングしよう！！
コーディングに時間がかかってしまう理由はだいたいこれ
- レイアウト構成が想像できてない
- CSSプロパティの特性が把握できていない
- どのスクリプト使えば良いのかわからない
技術的な問題もあるのかもしれませんが、知ってるけど、書きなおしで時間がかかってしまうケースが多いかなぁという印象です。
最初の頃にやっていた方法が参考になればと思います。
レイアウト構成が想像出来てない。
レイアウト構成がしっかりイメージできていればコーディングも迷いません。
デザイナーからデザインをもらった時、デザイナーからこういう動きにして欲しいと指示があります。
もしくはディレクターから。パッとデザインを見た時にどういったコーディングでいくか見えてないと時間がかかります。
複雑なデザインや、簡単そうに見えてやってみると複雑なコードになるデザインがある。
作りながらだと、後でズレやスクリプトで変更しないといけない場合に対応できず、無駄に修正をしないといけない時がありますので、ここで悩む人はまず、デザインにマークをつけることをオススメする。
ここはheaderを使う。ここはナビゲーションなのでnav。Footerはここなど。
ざっくりレイアウトを意識する事でHTMLを悩むことなくコーディングできます。
慣れれば頭の中で構築できるようになります。
簡単なレイアウトなら時間はかからないでしょう。
しかしこんなのはどうでしょうか。
昨日Twitterで簡単そうに見えて難しいデザイン内容でつぶやきました。
まーたドMデザインきたぞーおおおおぉ😊😊😊
簡単そうに見えるこのデザインが案外難しい。日付と記事タイトルの部分は、センター揃えです。 pic.twitter.com/DPLiSMStXy— ユーヘー@WEBデザイナー (@katayamada_Y) 2018年3月22日
あー簡単そう・・・？
これもpositionと疑似クラスがあれば簡単に出来るんですが、ぱっと見た時にそれが想像できないとやはり時間がかかってしまう。
凝ったサイトだとこんなのもざらになります。
CSSプロパティの特性を理解しよう。
今はFlexという超便利なプロパティがあるので、レイアウトも楽なのですが、floatでなんとかしようとしたりinline blockでなんとかしようとしたりする人がまだいます。
floatもinline blockもレイアウト用のプロパティではありません。
現時点ならflex1択で良いと思います。
floatでよくみる不具合
よく見る不具合
- クリア忘れなどで起こるレイアウト崩れ
- リストで3カラムなどにした時に一つだけ高さが高いとズレが生じる。
floatでレイアウトするのは、面倒くさいです。
やめましょう。floatの使い時は画像を回り込ませたい時などで使いましょう。
これも注意。vertical-align:topで隙間を埋めましょう。
inline blockでよく見る問題
インラインブロックはインライン要素とブロック要素の特性を持つようになります。
こちらもレイアウトでよく使われていた手法なのですが、このプロパティはインライン要素を持ったままブロック要素にするプロパティです。
使い時は主に2つ
- ブロック要素の横幅を文字数分にしたい時。
- インライン要素に高さを持たせたい時など。
他にもテーブルでレイアウトなんてのもありましたが、テーブルは表です。
表以外で使うのはおススメしません。
✔先程の通り現時点ではレイアウトはflex1択でOK
※他にはGridてのもあります。覚えておくと良いです。
若干使い方が難しいのと一部ブラウザに対応してないのですが、今後はこちらが主流になると思います。
どのスクリプトを使えば良いのかわからず探すのに時間がかかる。
おそらく最も時間がかかるのはここではないでしょうか？
コピペやめましょう！！！
現在、多くの案件はJqueryを使って作っていると思いますが、うまく動かない、仕様に合わないなど様々な問題が発生します。
これを解決するにはjavascript、Jqueryを勉強するか、多くのプラグインを知るかどちらかだと思います。
位置なら書くのは時間かかるので、Jqueryを探して使うのが早いでしょう。そのためにはJqueryの基礎は覚えておかないといけません。
どのタイミングでJSを動かすか。
表示はフェードかスライドか、表示非表示だけで良いのかなど。
口で動きを説明できれば、そのまま作るだけなので、案外Jqueryも簡単です。
progateで基礎を覚えるだけでは足りないので、実践的な事で覚えましょう。
買っても良いですが、「Jquery サンプル」とかで結構たくさん出てきます。
ぼくが最初の頃かった本は＞こちら
絵はきもいんですが、このシリーズはわかりやすかった。
業務でよく使うのは、これくらいですかね。
- Jqueryでタブ切り替え
- アコーディオンメニュー
- ハンバーガーメニュー
- 表示、非表示
- アンカーへのスムーススクロール
最低限これくらいは覚えましょう。コピペは理解してからです。
一個つくれば使いまわしがきくので作業も短縮できます。
ぼくも今はコピペしかしてない・・・(‘_’)
他にもできる事はあります。
技術とかレイアウト構成は、経験すれば自然と早くなります。
それ以外にも早くする方法はあります。
すぐにでも実践可能です。
- 短縮記述法emmet使う。
- scss使う。
- 素材書き出しは自動処理
emmet以外にもエディターによっては便利な書き方とかあります。
pugとかもそうですかね。使ったことないですけど。
あとはscss。こちらもほかにもあるんですが、
CSS慣れてる人が一番すんなり入ってくるのがSCSS/SASSじゃないでしょうか
今となっては、emmetとscssないと仕事になりません・・・(/ω＼)
WordPressにはemmetのプラグインもあるので、必ず入れるようにしてます。
素材の自動処理。
イラストレーターやフォトショップでもたまにありますけども空白部分は自動処理で削除できます。
アクションで自動処理を登録して、あとはボタン一つでぽちっと修正！
拡張子かえたりとかサイズ変更も簡単です。
新しい技術を入れるのはなかなかハードルがありますが、入れた方がミスも少なくて短時間で高品質のサイトが作れます。
結局のところ、たくさん経験を積むことが速さや品質に繋がります。
たくさん作っていきましょー！＼(^o^)／
