相談のきっかけ：WordPressの「中身」を理解し、自由にカスタマイズしたい

ある日突然思いつき、プログラミングど素人の私がAIに教わりながら、よちよち進んでいく学習日記です。第２回目。
さしあたって、当面の目標は「WordPressのテーマ設定だけでは手が届かない、細かなデザインや構造を自分の手で自由に変えられるようになりたい」というものにしておきます。
前回の終わりに、AIから、「単に知識を詰め込むのではなく、プログラムのお手本を実際に入力してみては」とのアドバイスあり。AIいわく、プロが使うツール？を実際に導入し、自分のパソコン上で「コードが画面に反映される瞬間」を体験してみます。

AIとの対話メモ：定番のエディタ「VS Code」導入する

AIの指導のもと、世界シェアNo.1のエディタ「Visual Studio Code（VS Code）」の導入し、作業が快適になる設定まで行ってみました。

1. VS Codeのインストールと日本語化

• 公式サイトからの導入: Visual Studio Code公式サイトからインストーラーをダウンロード。
  1. Windowsの場合： ダウンロードされた .exe ファイルを実行。
     規約に同意して「次へ」。
     ヒント： 「追加タスクの選択」画面で 「デスクトップ上にアイコンを作成する」 にチェックを入れておくと、次から起動しやすくなります。
  2. 起動
  3. インストールが終わったらVS Codeを開きます。
     当然ながら、最初はすべて英語で表示されます。日本語化したいですね。聞いてみました。

ある程度日本語化できないかな

• 日本語化の手順:
  1. 左側のサイドバーにある「四角いアイコン（拡張機能/Extensions）」をクリック。
  2. 検索窓に「Japanese」と入力。
  3. 地球儀アイコンの「Japanese Language Pack for Visual Studio Code」 が出てくるので、「Install」 ボタンを押す。インストール後、「Restart」ボタンで再起動。
  4. 再起動後、メニューが日本語になっていれば成功。

ここまでで、親しみやすい日本語での表示に変わりました！

２．画面に文字を表示させる準備

教えてください。

試しに何か入力してみたい。入力した結果も確認したい

• 第一歩として「自分専用のHTMLファイル」を作って、ブラウザで表示させてみます。以下の手順で行いました。

1. 作業用の「フォルダ」を作る
   プログラミングでは、ファイルをフォルダにまとめて管理するのが基本です。
   デスクトップなど、どこでもいいので新しいフォルダを作ります（例えばmy-web など）。
   
2. 作ったフォルダを選択する
   VS Codeの「ようこそ」画面にある 「フォルダを開く」 をクリックして、今作ったフォルダを選択します。もしフォルダを信頼しますか？というメッセージが出たら「はい、作成者を信頼します」を押してOKです。
   
3. ファイルを作る
   左側のサイドバー（フォルダ名が表示されているところ）にある、「新しいファイル」アイコン（紙にプラスマークがついたような形）をクリックします。
   ファイル名を index.html と入力してEnterを押します。
   
4. 実際にコードを書いてみる
   実際の内容は後述しますが、色々と環境構築に右往左往したので、参考までに以下に再現してみます。

３．初期トレーニング「写経」？

サンプルコードをそのまま書き写すという、プログラミング言語習得の初期段階トレーニングがあり、それを「写経」！？と呼ぶそうです。
聞いてみました。

「写経」トレーニングの主なメリットを挙げて。その理由とともに。

1. 構文の「型」が身につく：if文のコロン、インデント、カッコの閉じなど、プログラミング特有の「リズム」に慣れることができます。
2. エラーへの耐性がつく：写し間違えたときに「なぜ動かないのか？」を自力で探すプロセスが、一番の勉強になります。
3. 「開発者の視力」を養える VS Codeの「色分け（構文ハイライト）」に目が慣れてきます。「あ、ここは色が変わったから文字列だな」「ここは色が変わらないから打ち間違えたかも」という感覚が身につくのは、実際に打っている人だけの特権です。
4. インデント（段落）の感覚が身につく プログラミングで最も初心者が苦戦するのが「どこまでがこの処理の塊か」という範囲の問題です。VS Codeが自動で入れてくれるインデントを意識しながら打つことで、構造が頭に入りやすくなります。
5. 補完機能（IntelliSense）との対話 数文字打つとVS Codeが候補を出してくれますよね？「コードのこの単語は、VS Codeも知ってる有名な命令なんだな」と気づくことが学びにつながります。

４．では実際に「写経」を始めてみる

ファイル名「index.html」にサンプルコードを入力してみます。
初めての作業で、しかも見慣れぬレイアウトなどなど。数行でしたが時間を要しました。
いったん保存。（Ctrl + S）
ファイル名の横の「●」マークが「×」に変われば保存完了とのこと。

実際にブラウザで見てみる

入力したサンプルコードがどうなるのか？確認するにはどうするんでしょう？
「作った index.html ファイルを、Google Chromeなどのブラウザにドラッグ＆ドロップします」と教えてくれました。

ちょっと書き換えてみて更新

青い文字は見れましたか？
もし表示されたら、次は blue を red や green に書き換えて保存・再読み込みしてみてください。それだけで、あなたはもうWebサイトのコントロールに一歩踏み出しました！

再読み込み？

「再読み込み（リロード）」は、プログラミングをしていく中で一番よく使う操作です！

VS Codeでコードを書き換えて保存しただけでは、すでにブラウザで開いている画面は自動的に変わりません。ブラウザに「最新の状態を読み直して！」と命令する必要があります。

〇再読み込みのやり方
　ブラウザ（Chromeなど）を開いた状態で、以下のいずれかを行ってください。

• キーボードで： Ctrl + R
• マウスで： アドレスバーの横にある 「ぐるっと回った矢印マーク（更新ボタン）」 をクリック

やってみよう：文字の色を変える実験

1. VS Code で、さっきのコードの color: blue; の部分を color: orange; に書き換えます。
2. 保存 します（Ctrl + S）。 ※これを忘れると反映されません！
3. ブラウザ に切り替えて、再読み込み（Ctrl + R）をします。

コードの「color: 」の内容や、「font-size: 」の数字を適当に変えてみて、保存、ブラウザ再読み込みしてみると、確かに反映されたことが確認できました。ちょっとというか、かなり感動。
しばらく遊んでいると、保存、再読み込みが面倒になってきました。
コードを変えながら、リアルタイムでブラウザに反映された様子を確認することはできないのか。

５．コードを入力しながら変化を確認したい

ブラウザでの変化を確認しながら、コードを入力することはできないの？
方法も詳しく教えて。

結論から言うと、「打ちながらリアルタイムで結果を見る」ことは可能です！むしろ、書いたコードがその場で動くのを見るのは、プログラミング学習において最高にモチベーションが上がる瞬間です。
VS Codeを使っているなら、言語（Python、HTML、JavaScriptなど）によっていくつか方法があります。今使っている言語はどれですか？

HTML（Webサイト制作）だよ

Web制作の学習なら、「Live Server」という拡張機能が神ツールです。

• メリット: 「色を変えた」「文字を大きくした」が即座に反映されるので、写経がとてもわかりやすく楽しくなります。
• 方法: VS Codeの拡張機能（左側の四角いアイコン）で「Live Server」をインストール。
• 効果: ファイルを保存した瞬間に、ブラウザ側の表示がサッと更新されます。ただし「拡張機能（プラグイン）」として自分で追加する必要があります。

以下の手順でプラグインを導入してみました。

---

６．プラグイン「Live Server」 を導入するステップ

1. 拡張機能アイコンをクリック
   VS Codeの左端にある、四角いブロックが組み合わさったようなアイコンをクリックします。
   （ショートカット：Ctrl + Shift + X ）
2. 「Live Server」を検索
   上の検索窓に「Live Server」と打ち込むと、金色のロゴ（電波のようなマーク）の「Live Server」が出てくるはずです。
3. 「インストール」を押す
   開発者が Ritwick Dey さんになっているものをインストールしてください。

---

７．使い方（写経しながら結果を見る方法）

インストールが終わったら、写経しているHTMLファイルを開いてください。

• 右下の「Go Live」をクリック: VS Codeの画面の一番右下（青いバーのところ）に「Go Live」という文字が出ているはず。そこを押すとブラウザが立ち上がります。
• 右クリックから起動: HTMLファイルの上で右クリックして 「Open with Live Server」を選んでもOKです。

これだけで、コードを書き換えて保存（Ctrl+S）するたびに、ブラウザが自動でリロードされて結果が表示されます！検索結果に似たような名前が並ぶと迷いますよね！
一番上の「Ritwick Dey（リトウィック・デイ）」氏が作成した、電波のような金色のアイコンのものを選べば間違いありません。

８．導入後の「リアルタイム確認」のコツ

インストールができたら、写経の効果を最大にする設定を1つだけやっておきましょう。

1. VS Codeのメニューから 「ファイル」→「自動保存（Auto Save）」 にチェックを入れる。
2. Live Server を起動する（右下の「Go Live」を押す）。

これで、「コードを打つたびに、ブラウザの結果がリアルタイムで勝手に変わる」 という素晴らしい環境が完成します。

９．さっそく「リアルタイム表示」してみましょう！

「Live Server」のインストールが終わったら、以下の手順で画面をセットアップしてください。

1. ブラウザを立ち上げる VS Codeの右下にある 「Go Live」 という文字をクリックしてください。 ※もし出てこなければ、エディタ上のコードを右クリックして「Open with Live Server」 を選択。
2. 画面を「左右」に並べる
   • 左側に VS Code
   • 右側に 立ち上がったブラウザ （Windowsなら Win + 矢印キーで並べられます）
3. 書き換えてみる 写経しているコードの中の、例えば <h1>こんにちは</h1> の「こんにちは」を「ヤッホー！」に変えて、保存（Ctrl + S ） してみてください。

１０．ブラウザとの連動（ライブリロードの仕組み）

変わったけど、なぜこのファイルとブラウザが連動しているの？

• AIの解説: ブラウザは「HTMLという設計図を読み取って、画面を組み立てる翻訳機」である。
• 再読み込み（リロード）: VS Codeで設計図（コード）を更新したら、保存（Ctrl + S）し、ブラウザに「最新の設計図を読み直して！」と伝える必要がある（Ctrl + R）。

プログラム事例と解説：HTML/CSSの基礎構造

実際に作成し、ブラウザで文字の色や背景を変えることに成功したコード一式です。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>プログラミング学習日記</title>
    <style>
        /* ここにデザイン（CSS）を書く */
        h1 { 
            color: #ff6600; /* 見出しをオレンジ色に */
            border-bottom: 2px solid #ccc; /* 下線を引く */
        }
        p { 
            font-size: 18px; /* 文字を少し大きく */
            line-height: 1.6; /* 行間を広げて読みやすく */
            background-color: #f9f9f9; /* 背景を薄いグレーに */
            padding: 10px; /* 内側に余白を作る */
        }
    </style>
</head>
<body>
    <h1>プログラミング開始！</h1>
    <p>
        これはVS Codeを使って、自分のパソコンで作成した初めてのページです。<br>
        HTMLで「骨組み」を作り、CSSで「お化粧」をしています。
    </p>
</body>
</html>

【実行結果】ブラウザでの表示イメージ

実際にコードを書いてブラウザで開くと、以下のような画面が表示されます。

ここがポイント！

• h1 タグの部分が指定した通りオレンジ色になり、下に線が引かれています。
• p タグ（本文）の部分は、背景が薄いグレーになり、文字の周りにほどよい**余白（パディング）**ができています。

HTMLタグについて

• <!DOCTYPE html>: 「これは最新のHTMLですよ」という宣言。
• <head>: サイトのタイトルやCSSの設定など、表には見えない「設定情報」を置く場所。
• <body>: 実際にブラウザの画面に表示される「中身」を書く場所。

CSS（スタイル）について

• セレクタ（h1やp）: 「誰に対して」命令するか。
• プロパティ（colorやfont-size）: 「何を」変えるか。
• 値（blueや20px）: 「どう」変えるか。 この3つの組み合わせだけで、Webサイトの見た目をコントロールできます。

HTML：文章の構造を作る

上記の<body>内に書かれた部分です。<h1>は「ここが一番大きな見出しですよ」、<p>は「ここは段落（本文）ですよ」という、情報の「意味」を定義しています。

CSS：見た目をデザインする

<style>の中に書かれた部分です。h1 { color: #ff6600; }のように、「誰の（セレクタ）」「何を（プロパティ）」「どうするか（値）」を指定します。

気がついたことなど

• 入力候補の自動表示: 一文字を打ち込むと、入力候補がずらりと出るのは便利なのでしょうが、私のような超初心者にとっては、入力候補決定に頼らず自力で入力することも訓練上、大変重要と思います。候補が出ないようにすればよいのですが、今のところ設定方法がわかりません。なので、候補表示を極力頼らず、最後まで入力することを心がけています。
  近いうちになんとか便利機能をキャンセルしたい。
• 半角入力の鉄則: 日本語入力のままコードを打ってしまうと、スペースが全角になり、エラーが出る原因になることを知りました。
• ファイルの保存忘れ: 保存（Ctrl + S）を忘れると、ブラウザを何度更新しても中身が変わりません。単純ですが、最初は気がつくまで困りました。

今回の学び：独学でも調べながら地道に前進できる

今回の収穫は、
「全くの初心者でもAIを活用しながら進めれば、少しずつ理解でき、前進が実感できる」
「WebサイトはHTMLという設計図をブラウザが翻訳して表示している」という仕組みを、実体験として理解できたことです。
「<>」などを一つずつ打つのが面倒に感じましたが、VS Codeを色々触ったり、紹介した以外にも短いサンプルコードをいくつかAIに提案してもらい、根気よく入力してみました。
しばらく進めていると、コーディングが「作業」から「実験」へと変わるような意識の変化が感じられ、HTMLが「骨格」、CSSが「装飾」という基本的な役割分担を理解でき、地道に繰り返していれば次へのステップを踏み出せそうな気がします。絶対にあきらめず継続していこうと決心しました。

次回は（今後のことも）

改めて、VS Codeを使って、新たなサンプルコードを入力していこうと思います。
AIに提案させた新しいステップでの技術も紹介していきます。
その中で気がついたこと、つまづいたことなど、書いていきます。
このシリーズでは、超初心者である私が何に困ったか、どう解決したか、どう役立ったか、
そして何より、いかに楽しんでいるか、示していきます。
単純なことや細かいことも具体的にメモするので、自分の復習というか備忘録的な内容にもできれば。