Webコーダーを目指している方へ〜勉強時と実務でのギャップについて〜｜北海道・旭川のホームページ・DTPデザイン制作会社、ドリームクリエイト

2023.08.02

実務でコーディングしていると、勉強していた時には気にならなかったことなど様々な違いがありました。

コードの正確さと速さが求められる

自分で勉強していた時はコードを書くスピードというものはあまり意識していませんでしたが、実務では納期があるため自分のペースだけで進めることはできません。勉強している段階では、このデザインを実装するのにどれくらいの時間がかかるのか把握することはなかなか難しいと思います。

実務では最初このスピード感に慣れず大変でしたが、たくさんコードを書くうちに少しは早くなったかなと思います。自分のスピードを上げる他にも、効率をよくすることで早く記述できるようにしています。

使用頻度の高いもの(ハンバーガーメニューなど)やいつも検索してしまうものなどを、いちから記述したり、検索する手間を省くためにコードのストックを作り使用しています。自分の使いまわしやすい方法で良いと思いますが、私はNotionにストックしています。見やすく管理しやすくておすすめです。ストックしておくと、スペルミスなども防げるので間違いも少なくなります。

ページの読み込み速度を気にするようになった

これも勉強時では気にしたことがありませんでした。実務では勉強時よりも規模の大きいサイトを作るので、読み込み速度が遅くて気になる…ということがありました。勉強時に作っていたサイトよりも画像数も多く、 webフォントを使用したり色々なプラグインを使用したり…と何も気にせず作るとページの読み込みに影響を与える要因満載なサイトになってしまいます。

そこで以下のようなことに注意しながら、 Webページの読み込み速度に配慮しています。

①画像・動画は軽量化し、適切なサイズを使用

ネット上のサービスを使用するなどして画像の軽量化をしています。画像によっては軽量化前後でかなり変わるものもあります。また、画像サイズにも注意が必要です。PCサイズの画像だとスマホでは大きすぎる時もあるので、画面幅や端末の条件に応じて画像の切り替えなども必要になってくると思います。

また、ページの読み込み時に全ての画像を表示するのではなく、例えば最初に表示される画面の領域外の画像は遅延読み込みすることもページ読み込み速度改善につながります。

②不要なコードの削除

不要なコードを記述していることは少ないかもしれませんが、不要なコメントアウトや使用していないコードなどは削除するとページ読み込み速度改善につながります。

どこを改善したら良いかわからない時もあると思いますが、PageSpeed Insightsを使用すると、ここを改善すると良いよと教えてくれます。URLを入力するだけで簡単に計測することができます。

勉強時と実務では色々ギャップがあり最初は大変ですが、制作した webサイトが公開された時などはとても達成感があり嬉しいものです。Webコーダーを目指し勉強していると勉強の終わりが見えず、行き詰まる時もあるかとも思いますが少しでもみなさんの参考になればと思います。

Suggestion 000