未経験での転職をし、約1年ほどWeb制作に携わる中で、個人的に静的ページを作成する上で気をつけていることや意識していること・これまでやってきたことをまとめました。
この記事は、あくまで個人的な意見です。
以下の理由からページの構成をちゃんと考えられるようにするという練習を最初のうちはしていました。
例えば、「この要素は何のためにあるのか」「このグループはどういう関係性を持っているのか」を明確に理解しておくことで、無駄なスタイルを当てることなく効率的なコーディングができると思っています。
僕が今までやってきたWeb制作案件ではHTML、CSS（SCSS）がメインのものが多かったため、HTML構造についてや、CSS設計について考える練習をすることが多かったです。
Reactのようなコンポーネント化という概念はありませんでしたが、CSS設計さえうまくできていれば同じコードを書かずに済むので、作成するページのどこが共通化できそうか？とか、どこの要素をまとめればなるべく少ないコード量で実現できるかなどを頭で考えられるようになるまでは、図に起こして考える練習をしました。
具体的な図の作成方法としては：
個人的には最初のうちはコードを書く前に上記のように構造を明確にすることで、実装段階での混乱や手戻りを大幅に減らすことができたと思っています。
CSS設計の基本原則
CSS設計にはいくつかの確立された手法があります：
上記の設計思想のように、すでに手法として確立しているものは、それなりの理由があるし実際やってみて使いやすいという面もあるので、不要な再開発はせず、ちゃんと設計思想を理解してそれを実践することが結局早く・綺麗にコーディングするという面でいいのかなと考えているため、それを意識しています。
便利なことに今の世の中には、ChatGPTやClaudeなどのいった優秀なAIが存在します。誰もがいうことかもしれませんが、これを活用しない手はないので、僕は実際に使ってコーディングや練習をすることが多いです。
練習をする時に、自分が実際に使っていたやり方は：
とりあえず自分でコーディングしてみる
自分の知識でベストと思われる方法でコードを書く
AIにコードレビューを依頼する
書いたコードをAIに投げて、「セマンティックなコーディングに変換してみて」や「適切なスタイル・無駄のないスタイルに変えてみて」などのプロンプトで改善案をもらう
具体的なプロンプト例：
・「このHTMLコードをより適切なセマンティックタグを使用して改善してください。SEOとアクセシビリティの観点からアドバイスもください。」
・「このCSSコードをBEM設計に沿って最適化してください。無駄なスタイルがあれば指摘してください。」
とか
改善案を分析する
AIからの提案を見て、なぜこの部分にこのタグを使うのか、このスタイルを当てるのかを公式の情報を見ながら考える＋理解する
理解して実践に活かす
理解したことを次のコーディングに活かす
このプロセスを繰り返すことで、ただコードの書き方だけでなく、「なぜそのコードが適切なのか」という理解が深まり、より質の高いコーディングができるようになります。
静的ページ制作を正確に早く作るという点において、大事なのは作成するページの構造をちゃんと捉えていい設計をするということだと思ってます。
ページの構造を正確に理解し、設計した上でコーディングをすることで：
また、セマンティックなHTMLとCSS設計の基本原則を理解し実践することで、より良いWebページを効率的に作成することができると思っています。
僕個人的には、結局『量』をこなすことが一番の上達への方法だと思ってます。
その上で、それぞれに合う方法もあると思うので、どうやったら早くいいコードが書けるのかを考えながらやるのがいいと思ってます。
（この辺りは、良書と呼ばれている本を読んで参考して取り入れるというのもやってます。）
以上、読んでいただきありがとうございました🙌🏼
Be the first to comment
