コーディングする前に確認していること

Date:

Share post:

あけましておめでとうございます!(遅いですね)

年末年始はどこにもいかず、家に引きこもっていました。
ですがイベントごとが大好き人、ちょっとでもお正月気分を味わいたくて
初めて煮しめとか年越しそばとか作って自己満足に浸っておりました。
それはそれで楽しかった。!!

今年もよろしくお願い致します。

❄️ ❄️ ❄️

フロントエンドエンジニアはデザイナーさんからカンプを頂き、
そのデザインどおりにコーディングしたり機能を追加することが役目です。

カンプをいただいた途端に、よしやるぞ〜〜!!!とテンションがあがってしまいそのまますぐに作業に入りがちですが、作業にとりかかる前に個人的に気をつけていることがあるのでそれについて今回は書いてみようかなと思います。

大前提として、制作の取り掛かり方は人それぞれだと思います。
そのやり方、いいね!と少しでも思ってもらえたら嬉しいです。

? ? ?

まずカンプとじっくり向き合う

コーディングしたい気持ちをすこし抑えてカンプをたくさん見ます。

主に私が気をつけてみているのは以下のポイントです。

・どんな構成のサイトなのか
・コンテンツ幅はいくつで作られているか
・全ページバラバラのレイアウトなのか、共通部が多いのかどうか

・スマートフォンになった時(レスポンシブ対応)はどうなるのか

コーディング指示書を作成してくださる時はそちらもしっかり見ます。

なにか少しでも不明に思うことや、カンプだけで分からないことがでてきたら
ディレクターさんやデザイナーさんに確認します。

制作していく中で、遅れて参加するフロントエンドエンジニアは特にそうなのですが、
ディレクターさんとデザイナーさんの間では共通認識のことも認識できていない場合があります。

実装してから「そうゆうことじゃなかった!」を防ぐにはどうしたらいいか?を意識して気をつけるようにしています。

デザインをもっとしっかり確認する

脳内でマークアップして考えます。
心の中で独り言を言いながらCSSをイメージする時間です。笑

・実装に時間のかかりそうな複雑なレイアウトはどれくらいあるか
・共通のパーツ(ボタンや装飾)はどれくらいあるか
・ヘッダーとフッターは全ページ共通か
・自分が実装するのに苦手な部分があるか
・Javascriptを使う箇所がどれくらいあるか(やったことのある機能か初めてなのかも重要)
・他のレギュレーションと異なるページがあるかどうか
・画像やテキストは仮のものかどうか
・フォントは何を使うか
(WEBフォントを使うならその指定は何か、そうじゃないフォントはダウンロードするのか、もしくは画像として書き出すのか…)

…たくさんありますが、疑問点を洗い出してデザイナーさんに相談したり質問したりします。

自分にとっての不安要素も先に洗い出してしまうことで
なにか先手をうつなどの対策をしたり時間の見積もりを考えます。

もしも?パターンを考える

大切なのに忘れがちです。

例えば、記事のサムネイルがたくさん並ぶページがあるとします。
カンプではきっちり記事が入った状態ですが、これが「もし」記事が1つしかなかったら?

そもそも記事が登録されていない空っぽの状態だったらどうなるのか?
タイトルの長さがめちゃくちゃ長くなった時どうなるのか?

…私はこれを考えずに実装して、いざ公開!となった時に表示バランスがおかしくなっていたりしたことがあります。

シンプルに慌てる。汗

それ以来は「もしこうなったら」の想像力を掻き立てて、相談したり
あるいはこうしたら良いのではないかと提案したりするようにしています。

ざっくりと工数を見積もる

納期が決まっていることがほとんどなので、それを基準にしてスケジュールをたてます。

最初のうちは慣れずに大変でしたが、繰り返すことによって
自分が何にどれくらい時間がかかるのか分かってきました。

(それでもいまだに工数計算はむずかしいのでコツを知りたい)

そして!コーディング開始!

HTMLを組み立ててからCSSを当てていく流れになります。

時間がかかる部分を最初にじっくりやってしまうと、時間がなくなってくるので
さくさくと進められるところからおおまかに作っていきます。

そして残っているものをみて時間配分を改めて考え、
仕上げてくとうまくいくような気がします。

勉強会で交流のある先輩エンジニアいわく、
「文章をHTMLで表示した際にWEBのデフォルトのスタイルで文章が読めるマークアップをすることが良い」
らしいです。

なるほど….

きちんと適材適所なタグを使用してマークアップするとSEO的にも有利らしいので
調べつつクオリティの高いマークアップをしていきたいです。

? ? ?

コミュニケーションを積極的にとりながら制作をすすめていくのはとても大切だなと日々実感します。
職種関係なく、どんなことに気を付けているのかを共有するのも勉強になりそうだと思いました。

2021年もスキルをあげていけるように頑張ります〜〜?

Related articles

EC-CUBE 4系のプラグイン開発について その...

前回、プラグインを一旦有効化させて管理...

EC-CUBE 4系のプラグイン開発について その...

以前から作成したいと考えていたのですが...

Laravel Filamentを使用した管理画面...

前回Breezeをインストールしたこと...

Laravel Filamentを使用した管理画面...

前回、filamentでのリソース作成...