環境構築
30分 入門ブラウザとエディタだけ。今すぐ始められる。ブラウザだけで完結。
概要
環境構築とは、プログラミングを始めるための準備のことです。難しそうに聞こえますが、このサイトではブラウザだけで演習できます。ローカルでやる場合は「ブラウザ」と「テキストエディタ」の2つがあれば今すぐ始められます。
Web開発の良いところは、パソコンに最初から入っているツールだけで始められることです。演習はブラウザだけで完結するので、インストール不要。まずは気軽に始めましょう。
- ブラウザの役割と使い方
- テキストエディタでHTMLファイルを作る方法（ローカル開発の場合）
- 演習画面の使い方（コード→実行→プレビュー）
- VS Codeのインストール方法（オプション）
詳細解説
ブラウザって何？
ブラウザは、Webページを見るためのソフトウェアです。Chrome、Edge、Firefox、Safariなどがあります。あなたが今このページを見ているのもブラウザです。ブラウザはHTMLを解釈して、人間が見やすい形で表示します。
- Windows: Edge（最初から入っている）
- Mac: Safari（最初から入っている）
- どのOSでも: Chrome（無料でダウンロード可能）
- どのブラウザでも基本的な機能は同じ
- 開発者はChromeを使うことが多い（DevToolsが便利）
- ブラウザとGoogle検索を混同する
- Internet Explorerを使う → 古くて非推奨
演習の流れ
画面上のエディタにコードを書いて「実行」を押すと、すぐ下のプレビューに結果が表示されます。環境構築不要。ブラウザだけで完結します。まずは演習問題の「体験」から始めて、実行ボタンを押す感覚を掴みましょう。
- 1. 解説を読む
- 2. エディタにコードを書く（または穴埋め）
- 3. 実行ボタンをクリック
- 4. プレビューで確認
- 最初は解答をコピペして「動く」を体験してもOK
- エラーが出たら行番号をクリックで該当箇所へ
- いきなり難しい問題から始める → 体験→h1→p の順で
HTMLファイルって何？（ローカル開発用）
HTMLファイルは、Webページの設計図です。.htmlという拡張子のファイルで、ブラウザで開くとWebページとして表示されます。メモ帳で作れます。このサイトの演習ではファイルを作る必要はありません。
- index.html: トップページによく使われる名前
- about.html: 会社概要ページなど
- ファイル名は半角英数字で
- 拡張子を.htmlにしないとブラウザで開けない
- index.html.txtになる → 拡張子が二重
- 日本語のファイル名 → 英数字に
実践手順
- 1 演習ページを開く 1分
「演習問題」ページを開きます。
- 上部メニューから「学習」→「演習問題」をクリック
- または /learn/ に直接アクセス
- 問題を選んで解く
- 2 体験問題を解く 2分
最初の「体験：実行してみよう」問題で、実行ボタンを押してプレビューを確認します。
- カテゴリで「環境構築」を選ぶ
- 「体験：実行してみよう」をクリック
- コードはそのままで「実行」をクリック
- プレビューに「Hello World」と表示されたら成功
<h1>Hello World</h1> - 3 最初のHTMLを自分で書く 5分
「最初のHTML」問題で、h1タグを使って「Hello World」と表示するコードを書きます。
- エディタに <h1>Hello World</h1> と入力
- 半角の < と > を使う
- h1は小文字で
- 実行してプレビューを確認
<h1>Hello World</h1>
よくある質問
- コード書き直したのに画面変わらん！なぜ！
- それ、ブラウザのキャッシュ（記憶）がイタズラしてる可能性大です！開発者ツール（F12）開いた状態で、リロードボタンを長押しして「キャッシュの消去とハード再読み込み」をガツンとキメてみてください。
- ローカルのファイル（file://）じゃダメなの？
- 最初はいいんだけど、後でFetch APIとかモジュール（import/export）使おうとすると、ブラウザが「ローカルファイルから勝手に通信すんな！」ってキレてくるんですよ。VS Codeの『Live Server』って拡張機能入れて、なんちゃってWebサーバー起動しちゃうのが一番ラクです。
- .htmlで保存したのに、ただのテキスト丸出しになるんだけど…
- Windowsあるあるですね…。OSの設定で「拡張子は隠すよ！」ってなってて、実際のファイル名が『index.html.txt』みたいな悲惨なことになってるはず。エクスプローラーの表示設定から「ファイル名拡張子」にチェック入れて成敗してください。
- VS Codeに最初に入れとくべき神拡張機能ある？
- とりあえず日本語化パックと、保存した瞬間にブラウザもリロードしてくれる神ツール『Live Server』。あとはタグを自動で閉じてくれる『Auto Rename Tag』あたり入れとけば、最初のストレスは激減するはず！
① 解説を読んだ。次は② 演習する。
環境が整いました！演習でコードを書いて即確認できることを体験しました。
次はHTMLの基礎を詳しく学びましょう。見出し、段落、リスト、リンクなど、文章を構造化するタグを1つずつ押さえます。