はじめに
前回の記事ではHTML・CSS・JavaScript・Gitといった基礎スキルを紹介しました。今回はその続編として「どこで学ぶか」「どんな環境で書くか」という視点から、おすすめの学習サービス・VS Codeのセットアップ・そして実際のミニプロジェクトまでを一気にまとめます。これから環境を整えたい方にも、すでに学習中の方にもお役立ていただける内容です。
1. プログラミングを学べるおすすめアプリ・サイト
1.1 初心者に最適な入門サービス
プログラミング学習の最大のハードルは「最初の一歩」です。難しい教科書を開く前に、ブラウザだけで完結するインタラクティブな学習サービスを活用することで、挫折せずにコードの感触を掴むことができます。
Progate
スライドで概念を学んでからその場でコードを書く、日本語完全対応のサービス。HTML・CSS・JavaScriptはもちろん、PythonやRubyにも対応。まず「動く体験」を得るのに最適です。スマホアプリで学習するのがお勧めです。
https://prog-8.com/
CODEPREP
PC版のみですが登録して学習するので途中で止めてもまた後日学習の続きができます。現在のコースの何％まで到達しているかや履修済みのコースなども管理できるので学習状況が把握しやすくお勧めです。
https://codeprep.jp/
2. VS Codeのインストールとおすすめプラグイン
2.1 VS Codeのインストール手順
Visual Studio Code（VS Code）は、Microsoftが無償提供するコードエディタです。軽量でありながら拡張性が高く、世界中の開発者に最も使われているエディタの一つです。インストールは公式サイト（code.visualstudio.com）からOSに合ったインストーラをダウンロードするだけで完了します。
インストール後、日本語化するには拡張機能の検索欄で「Japanese Language Pack」を検索してインストールし、VS Codeを再起動するだけです。すぐに日本語インターフェースで使い始めることができます。
2.2 Web制作に役立つおすすめプラグイン
VS Codeは拡張機能を追加することで、コーディングの効率が大幅に向上します。まず導入したいプラグインを厳選して紹介します。
必須
Prettier — Code formatter 保存するたびにコードを自動整形してくれる拡張機能。インデントやクォートの統一など、コードの読みやすさを保ってくれます。
必須
Live Server – HTMLファイルをブラウザでリアルタイムプレビューできる拡張機能。ファイルを保存するたびに自動でブラウザが更新されるため、確認の手間が激減します。
必須
Git Graph – Gitのコミット履歴をグラフィカルなツリー形式で表示してくれる拡張機能。ブランチの分岐・マージの流れが視覚的に把握でき、どのコミットでどのファイルを変更したかもすぐ確認できます。第六弾で学んだGitHub連携後に特に重宝します。
必須
Git History – ファイルごと・行ごとの変更履歴をVS Code上で確認できる拡張機能。特定のファイルをいつ・誰が・どのように変更したかをタイムライン形式で閲覧でき、コミット間の差分（diff）も色分け表示されます。「いつのコードに戻せばいい？」という場面で素早く原因を特定できます。
おすすめ
GitHub Copilot – AIがコードの続きを提案してくれる拡張機能。コメントに日本語で意図を書くだけでコードが補完されるため、学習スピードが大幅に上がります。
８０回以上使用すると有料になるので出来るだけ普段の質問はこまごまとAIに聞いて解決して、どうしてもVS Code上で質問したい時のために使用回数はセーブしておきましょう。
3. 学んだことを活かした簡単な実用例
3.1 Flexboxで画像＋テキストの横並びレイアウト（レスポンシブ対応）
Flexboxを使うと、PC表示では画像とテキストを横並びにしつつ、スマホでは縦積みに切り替えるレイアウトがわずかなCSSで実現できます。ポイントは flex-direction: column をメディアクエリで切り替えるだけです。
VS Codeで新規ファイル index.html を作成し、以下のコードを貼り付けてLive Serverで開いてみましょう。 デスクトップに「上高地」という名前のフォルダを作成し、その中に下のindex.htmlとstylesheet.cssとphoto.pngを全て格納したらindex.htmlをダブルクリックすればブラウザで開きます。
開いたブラウザで右クリックして「開発者ツール」もしくは「検証」を出し、右上のデバイス選択でPC版とスマホ版の見え方が変わっていることを確認しましょう。
<!– HTML構造 –>
<!DOCTYPE html>
<html lang=”ja”>
<head>
<title>上高地</title>
<link rel=”stylesheet” href=”stylesheet.css”>
<link href=”https://use.fontawesome.com/releases/v5.6.1/css/all.css” rel=”stylesheet”>
</head>
<body>
<div class=”header”>
<h1>上高地</h1>
<div class=”contents-item”>
<img src=”photo.png”>
<p>都会の喧騒から逃れてこの場所に来ると息を飲むほどの景色の美しさに心の洗濯が出来る気持ちになります。この美しさを保つために車両は侵入規制されており観光客はバスでしかこの地に足を踏み入れることは出来ません。不便ではありますがこの先もずっとこのまま美しさを保ち続けて欲しいと願います。</p>
</div>
</div>
</body>
</html>
まずHTMLにセットする写真を探しに「写真AC 上高地」と検索し、好きな画像を保存してHTMLに表記した画像名”photo.png”に変更しましょう。 テキストも適当に書いてしまいました。これはサンプルなのでこの程度で良いかなと思います。 「都会の喧騒から逃れてこの場所に来ると息を飲むほどの景色の美しさに心の洗濯が出来る気持ちになります。この美しさを保つために車両は侵入規制されており観光客はバスでしかこの地に足を踏み入れることは出来ません。不便ではありますがこの先もずっとこのまま美しさを保ち続けて欲しいと願います。」
下のコードはHTMLファイルに記載した通りstylesheet.cssというファイル名で作成してください。
/* PC: 横並び */
.contents-item {
display: flex;
gap: 2rem;
align-items: flex-start;
}
.contents-item img { width: 40%; border-radius: 8px; }
/* スマホ: 縦積み */
@media (max-width: 640px) {
.contents-item { flex-direction: column; }
.contents-item img { width: 100%; }
}
3.2 実用例から学べること
このシンプルなサイトは、HTMLにより要素を作成すること、CSSで並びを決めることの実用を含んでいます。Progateで学んだDOM操作の知識、VS CodeのLive Serverでリアルタイム確認、Prettierで整形、と今回紹介したツールがそのまま実践で使えることが体感できます。
ここからCSSでさらにスタイルを整えたり、要素や動きを少しずつ拡張していくことで「作りながら学ぶ」サイクルが回り始めます。最初は小さく作って動かすことが、挫折しないための最大のコツです。
まとめ
学習ツールと開発環境の整備は、スキルアップの土台です。今回のポイントをまとめると：
・ProgateやCODEPREPで基礎を楽しくインプット
・VS Code ＋ Prettier・Live Server で快適な執筆環境を整える
・小さな実用例でアウトプットし、学習サイクルを回す
次の記事では、小さなプロジェクトに必要な準備をより詳細に紹介する予定です。お楽しみに！
コメント