AI時代のコーディングで大切なこと

これからのコーディングで最も大切になるのは、単純にコードを書けることだけではなく、AIにやりたいことを正しく言語化できる力です。

AIはコードを書く作業を助けてくれますが、何を作るのか、どのような構造にするのか、どんなルールで実装するのかは、人が判断して指示する必要があります。

コードを書く力だけでは足りなくなる

AIを使えば、HTMLやCSS、JavaScriptのコードを短時間で生成できます。しかし、生成されたコードが実務で使いやすいかどうかは別の話です。

例えば、クラス名のルールがばらばらだったり、レスポンシブ対応が弱かったり、WordPressのテンプレート階層を無視していたりすると、あとから修正しにくいコードになります。

AIへ正しく指示するために必要な理解

AIへ正しく指示するには、それぞれの言語で何ができるのか、どういう設計があるのか、どんなルールで構築するのかを理解しておく必要があります。

• HTMLでは、どのような構造で組むのか
• CSSでは、どのようにレスポンシブ対応するのか
• JavaScriptでは、どのタイミングで処理を動かすのか
• WordPressでは、どのテンプレートで表示するのか

このような前提を理解していると、AIに対して「BEMで統一してください」「data属性を使って処理を分けてください」「サブループで関連記事を表示してください」のように、具体的な指示を出しやすくなります。

HTMLで大切なこと

HTMLでは、シンプルで意味の伝わる構造を意識することが大切です。見た目だけを合わせるのではなく、後から読んでも意図が分かる構造にしておくことで、AIにも人にも伝わりやすいコードになります。

BEMとFLOCSSで構造を言語化する

HTMLの設計で特に理解しておきたいのが、BEMやFLOCSSなどのコーディング設計です。

BEMはクラス名の付け方を整理する考え方で、Block、Element、Modifierという単位で構造を表します。FLOCSSはCSS設計の考え方ですが、HTMLのクラス設計にも大きく関係します。

こうした設計を理解していると、「このセクションはBEMで命名してください」「コンポーネント単位で再利用できる構造にしてください」のように、AIへ具体的に伝えられます。

クラス名とinner・wrap構造をそろえる

Web制作では、セクションの内側に余白や最大幅を持たせるために、innerやwrapのような共通構造を使うことがあります。

• BEMで統一してください
• クラス構造はシンプルにしてください
• inner・wrap構造で組んでください

このようにルールを先に決めておくと、AIが生成するコードも安定しやすくなります。人が修正するときにも、どこに何があるのかを追いやすくなります。

CSSで大切なこと

CSSでは、レスポンシブ対応の理解が非常に重要です。スマホ、タブレット、PCで表示が変わることを前提に、余白、幅、文字サイズ、画像比率を調整できるようにしておく必要があります。

レスポンシブ対応を前提に考える

レスポンシブ対応では、画面幅に応じてレイアウトや見え方を調整します。特にmax-widthを使った最大幅の管理は、基本として押さえておきたい考え方です。

PCでは横幅を広く使い、スマホでは縦に積むなど、表示を切り替えるルールを理解しておくと、AIにも「スマホでは1カラム、PCでは2カラムにしてください」と自然に指示できます。

flexboxで基本レイアウトを組む

現在のWeb制作では、横並び、縦並び、中央寄せなどの基本レイアウトでflexboxを使う場面が多くあります。

flexboxを理解していると、AIに対して「カードを横並びにしてください」「スマホでは縦並びにしてください」「上下左右中央に配置してください」のように、レイアウトの意図を伝えやすくなります。

aspect-ratioとclamp()で崩れにくくする

aspect-ratioは、画像やカードの比率を保つために便利です。サムネイルやメインビジュアルの比率を固定できるため、画像サイズが変わってもデザインが崩れにくくなります。

clamp()は、画面幅に応じて文字サイズを自動調整したいときに役立ちます。固定サイズだけで考えるのではなく、最小値、可変値、最大値を決めることで、柔軟な文字設計ができます。

JavaScriptで大切なこと

JavaScriptでは、クリック、スクロール、アニメーションなど、ユーザーの操作に合わせて画面を変化させる理解が重要になります。

activeクラスとdata属性で処理を整理する

JavaScriptでは、activeクラスを付け外しして表示状態を切り替える実装がよく使われます。例えば、メニューを開く、タブを切り替える、スクロール時に要素を表示するなどの場面です。

また、data属性を使うと、デザイン用のクラスと処理用の目印を分けることができます。これにより、見た目の変更とJavaScriptの処理が混ざりにくくなります。

• data-triggerが付いた要素にactiveを付与する
• data-animationが付いた要素を順番に動かす

このようにルール化しておくと、AIにも「data属性を基準に処理を作ってください」と指示しやすくなります。

GSAPで演出の幅を広げる

GSAPを理解すると、複雑なアニメーションにも対応しやすくなります。スクロールアニメーション、テキストアニメーション、メインビジュアルの演出、パララックスなど、実務でも使う場面は多くあります。

クライアントから演出の相談を受けたときにも、GSAPで何ができるのかを理解していると、AIに具体的な動きやタイミングを指示しやすくなります。

WordPressで大切なこと

WordPressでは、HTMLやCSSだけではなく、CMSとしてどのように情報を管理し、どのテンプレートで表示するのかを理解することが大切です。

テンプレート階層を理解する

WordPressでは、固定ページ、一覧ページ、詳細ページなどが、どのテンプレートファイルで表示されるのかを理解する必要があります。

• front-page.php
• page.php
• single.php
• archive.php
• taxonomy.php

どのファイルが優先されるのかを理解していると、AIに「このカスタム投稿タイプの詳細ページを作ってください」のように、より正確に依頼できます。

メインループとサブループを使い分ける

WordPressでは、メインループとサブループを使い分けることも重要です。メインループは、そのページで本来表示する投稿を出力する基本の仕組みです。

一方で、サブループを使うと、おすすめ記事、関連記事、最新記事などを別の条件で表示できます。CMSとしてブログを構築するなら、一覧表示だけでなく、こうした柔軟な表示も理解しておきたいポイントです。

カスタム三兄弟でCMSを設計する

WordPressでは、いわゆる「カスタム三兄弟」の理解も重要です。

• カスタム投稿タイプ
• カスタムタクソノミー
• カスタムフィールド

この3つを使いこなせると、実績、お知らせ、スタッフ、サービス、ブログなど、用途ごとに管理画面を整理できます。オリジナルのCMSを構築するうえで、実務では非常に重要な知識です。

アウトプットする環境を作る

これからは、学習した内容を実際にアウトプットすることも非常に重要です。理解したつもりの内容でも、自分の言葉で説明しようとすると、曖昧な部分に気づくことがあります。

ブログやサイトを運営して理解を深める

おすすめなのは、自分でブログやサイトを運営してみることです。例えば、Xserverのサービスでは、永久無料ドメインを取得できるプランもあります。

• WordPressを構築する
• ブログを書く
• SEOを意識する
• サイトを改善する

このような経験は、コーディング学習だけでなく、サイト運営全体の理解にもつながります。

アクセス解析やAdSenseも学習につながる

さらに、Google アナリティクスやGoogle AdSenseを導入すれば、アクセス解析、SEO、広告収益化、ユーザー行動についても学べます。

最初から大きく収益化できるわけではありませんが、記事を書く、改善する、分析する、継続するという経験そのものが大きな学習になります。