はじめての実務コーディングでやらかしました
※2019/10/22追記：VSCode利用者への注意点
Webデザイナー改めマークアップエンジニアとして雇われてから約１ヶ月経った時、初めて仕事としてコーディングを任されました。
※時間が空いてますが、9月初旬の話です
一応無事に納品することはできましたが、
途中でスケジュールケジュールを変更してもらったり、
先輩に手伝ってもらったり、
徹夜したり、
３連休も休まずコーディングしたり、
最後の最後まで修正を何度もしたり
と、先方に迷惑をかけると共に、自分も苦しめる結果となりました。
そこで今回、そのような結果を招いてしまった「失敗するコーディング方法」をご紹介します。
同時に、その失敗の原因を振り返りながら、今後同じ失敗をしないための対策もご紹介します。
正しいコーディングの方法はググればたくさん出てきますが、ダメな方法って意外と少ないと思うので、今回はあえて「失敗する方法」を紹介します。
私も含め、コーディング初心者やWebデザイン勉強中の方にとって役に立つ情報になればよいなと思います。
実務コーディング概要
案件の条件は以下の通り。
- 某企業の新商品特設ホームページの中のLP、２ページ（ホームページ部分は先輩が担当）
- デザインカンプのデータ形式はイラレ（PC、スマホ版）
- アニメーションの実装（セクション毎にフェードイン、ボタンホバー）
- コーディング規則などは特になし
作業環境
- Windows10
- メモリ8GB
- ディスプレイ１つ
私のコーディング手順
- HTMLを完成させる（画像データが出てきたらその都度イラレ・フォトショから書き出す）
- ページの上からCSSを追加していく
- 最後にJSファイルで動きをつける
今までこの手順でやってきましたが、今回の実務経験を通じてこの手順の悪い所を見つけたので、それも合わせてご紹介します。
失敗するコーディング①デザインをもらったらすぐにHTMLを書き始める
デザインデータをもらった私は、頭の中だけでHTMLやCSSをぼんやりと考えました。
その後「いける」と踏んだ私は、すぐにエディタを立ち上げてコーディングに取り掛かりました。
しかし、これが間違いでした。
いきなりコーディングし始めると、要素を決める際に時間がかかってしまいます。
例えば、
- どの要素を使うか迷う
- hタグを使うかどうか
- divなのかfigureなのか
- 画像で実装するかテキストにするか
- imgにするかbackground-imageにするか
コーディングは時間との戦いでもあるので、できるだけ効率的に行うのが理想です。
対策：紙媒体を活用してコーディングの全体像を掴む
闇派遣会社での実務研修の際は、この行程を取り入れていましたが、独学し始めてから面倒くさくなって辞めてしまっていました…。^^;
言葉ではイメージしにくいと思うので、実務研修で使っていた時のプリントを例として載せておきます。
こんな感じで、どの要素を使うかや、余白のpx、色コードなどをメモしておくと、楽になります。
LPなどの長ったらしいデザインカンプの場合、細かくて書き込みにくかったり、作業に時間がかかってしまう恐れがあります。
そんな時は、デザインカンプでなくても、何かしら紙媒体のメモに書いても良いと思います。
失敗するコーディング②アセットを書き出しながらコーディングする
まず、私のコーディングの進め方そのものが間違っていることに気付きました。
HTMLを書く→imgタグ出現→イラレからアセットを書き出す→imgタグにsrcを指定→HTMLを書く→…とやっていましたが、
エディタとイラレを行ったり来たりしなければいけないので、非効率なやり方でした。
会社のPCのメモリがたったの８GBなので、このせいで何度もフリーズし、作業時間を無駄にしてしまいました。
対策：一度にアセット書き出しする
コードを書き始める前に、使う画像を一度にすべてアセット書き出しするのが良いです。（フォトショならスライス）。
もちろん、htmlのコードを書き終えてからやってもいいと思います。
失敗するコーディング③Retinaディスプレイ対策をしない
これは今回の実務コーディングで初めて知ったことなので、仕方ないという気持ちです。
Retinaディスプレイ対策は、Webスクールでも実務研修でも習いませんでしたし、独学で買ったWebデザインの本のどれにも書いていませんでした。
しかし、世の中のiPhone率を考えると、コーディングする際はこれをするのがスタンダードだと考えます。
この作業をしていないと、普通のバソコンではキレイに見えている画像でも、Macで見たら画像が粗い、ギザギザしている、みたいなことが起こります。
今回は不運なことに、すべてのコーディングが一通り終わって、仮提出した際に、先輩からRetinaディスプレイ対策について教えていただき、
…ということで、面倒くさいと思いますが、またデザインデータからRetinaディスプレイ用に２倍の画像を書き出してください。
と言われたので、２倍の画像だけアセット書き出しをするという、二度手間が発生しました。
対策：srcset属性がおすすめ
このRetinaディスプレイ対策には、いくつかの手段があります。
- <picture>要素
- srcset属性
- Retina.jsなどのJavaScriptライブラリ
- メディアクエリ
など。詳しくはご自身で調べるのが一番だと思います。
一応おすすめ参考サイトを載せておきます。
先輩はpicutreタグを使っていました。
私の場合、あとから修正する必要があったため、追加するだけで済むsrcset属性で実装しました。
既存のサイトやポートフォリオなどにRetina対策をするならsrcset属性がおすすめです。
イラレの場合、アセット書き出しの設定で「x2」みたいに等倍以外の倍率で簡単に書き出すことができます。
失敗するコーディング④文字をテキスト化せず画像で実装する
今回の案件のデザインは、とても素晴らしく凝ったものでした。しかし、その分テキストと画像が入り組んだ所が多く、どこをテキストにして、どこを画像にしようか判断しにくかったです。
先方から指示があればよいのですが、今回は完全にお任せだったので悩みました。
そこで先輩に訪ねたところ、
無理そうなところはテキスト化せず画像をつかって大丈夫ですよ。
とのこと。私はその言葉に甘えすぎました。テキスト部分の半分以上をimgタグとして処理。
その結果…
仮アップした際に、先方から「もっとテキスト化してください」との指示が。
画像化したものをテキストと画像に分けることによって、余白が崩れ、flexやpositionの調整が必要になり、ほぼ上から下まで全てのコーディングをやり直しすることに…。
仮アップの段階でその指示がきた時は、本当に泣きそうになりました。
この指示によって「明らかに終わらない」と判断され、２つあるLPの方のテキスト化と調整を、先輩が手伝ってくださいました。そしてその日、先輩と２人で徹夜しました。申し訳なさすぎて本気で死にたかったです。
対策：ロゴ以外の文字はテキスト化する
- テキスト化したものを画像化
- 画像化したものをテキスト化
ですと、作業量は圧倒的に２の方が多くなります。
フォントサイズ、letterspacing、line-heightなど細かな調整が必要となるからです。
ですので、最初から「ロゴ以外の文字は全部テキスト化する」くらいでやっちゃっていいと思います。
コーディングのスキルも自然とあがります。何より結果的に早く終わります。
失敗するコーディング⑤position、translate、ネガティブマージンの乱用
要素の位置調整は、基本的にはmarginとpaddingで行いますが、微調整でpositionなどを使うことがあると思います。
今回はセクションが斜めで区切られていたり、やたらとテキストと画像が入り組んでいたりしたため、位置調整のプロパティを乱用しました。
全部positionだけで調整すればよかったのですが、ある所はpositionで調整したのに別の所はtranslateで調整するなど、自分の中でCSSのルールを明確にしないまま、行きあたりばったりでコーディングしていました。
これによって、
- レスポンシブ化した時に、調整が面倒くさくなる
- 後から修正する時にどのCSSだか分かりにくい
などの弊害が生じました。
また、セクションのつなぎ目ではネガティブマージンも乱用したため、コーディングしている途中、「え？何でこれ効かないの！？positionのせい？marginのせい？うおおおおおおおおお…！！！」
ということが何度もありました。
対策：出来るだけpadding、marginで整え、位置調整の自分ルールをつくる
位置調節はできるだけpaddingとmarginで行うのがベストだと思います。
positionを使うと自動的にz-indexも関係してきて、要素が重なるようなデザインだとさらなる混乱を招きます。
細かい位置調整は、
- 基本はposition。
- 動きをつけるならtranslate。
など、自分でルールを設けるのがよいかと思います。
【追記】VSCodeのLive Serverでしかチェックしない
VSCodeに「Live Server」という、ローカル上でHTMLファイルが見られて、保存した瞬間に変更点がわかる優れたプラグインがあります。
しかし、実際にChromeなどネット上で見ると、ズレている場合がほとんどです。
私も初案件は全てLiverServerでチェックしながら進めて、最終チェックでネット上で見たら余白などがズレていて、最後の最後でまた１から修正し直す、という手間が発生しました。
失敗は成功のもと
今回ご紹介した失敗するコーディング方法を知ることで、正しいコーディング方法を勉強した時と同じくらいレベルアップしたはずです。
正しいコーディング方法を知ることも大切ですが、汚いコードを見たり、他人の失敗を糧にすることもコーディングのレベルアップには必要なことだと考えています。
これからも共に頑張っていきましょう。
今後の課題
備忘録も含め、今後の課題を書き残しておきます。
- CSS設計
- Sassのさらなる活用
- CSS、JavaScriptでのアニメーション
- モバイルファーストのコーディング
- vw⇔px、remの自動換算の理解と設定（Sassかgulp）
これを見て「俺もこれ勉強中」「私も同じスキル身につけたい」など、もし一緒の所を勉強している方いらしゃいましたら、コメント欄やTwitterでご連絡いただけると嬉しいです。
１人で勉強するより誰かと一緒に勉強する方が効率的に学ぶことができるはずです！win-winの関係、お待ちしております。
コメント