「HTMLとCSSを習得した後は何に取り組めばいいのかわからない」
「できれば仕事を意識し手勉強したい」
HTMLとCSSの基礎を習得した人は、次に取り組むことを調べているのではないでしょうか。
ホームページの見た目を作れるようになった人は、JavaScriptに取り組むのがおすすめです。
自分のパソコンにJavaScriptを動かす環境を作るのが簡単で、ほかの言語（PythonやJava）よりスムーズに勉強しやすいためです。仕事につながりやすく、収入を得ようと考えている人に適した言語といえます。
そこで本記事では、Webアプリ開発の経験があるみずがめが、以下の内容を紹介します。
- 仕事を意識したJavascriptのロードマップ2種
- 基礎を徹底的に固める理由
- JavaScriptを実際に操作するための準備4TEP
この記事を最後まで読むことで、仕事につなげるために何をすればいいのかわかります。
記事後半では、初心者の方でもわかりやすいようスクショ付きで環境構築の方法を説明しているので、確認しながら進めてみてください。
HTMLとCSSの次にJavaScriptをおすすめ
JavaScriptは、インターネットにあるほぼすべてのWebアプリやホームページに使われているため、仕事につなげたいなら習得必須の言語です。
自分の目的によって、どこまで深堀して勉強するのかが決定します。
収入を得ること前提なら以下の2つに分けられます。
- 応用まで深堀して就職を目指す
- 基礎だけ固めて別言語を習得し副業を目指す
どちらのケースでもJavaScriptの基礎固めは必要です。案件獲得の場合は、基礎を固めた後依頼内容に沿ったスキルの習得に取り組みます。
1.応用まで深堀して就職を目指す
エンジニアとして働くことが目的なら、JavaScriptを深く勉強するだけで企業に就職する強力な武器になります。
通常、サービスを開発するのには、マッチした言語を選択して勉強し、開発しながら試していく手間がかかります。
しかし、JavaScriptは、1つの言語だけで多くのサービス開発が可能です。
ライブラリ（必要なものをまとめたツールセット）やフレームワーク（スターターセット）を切り替えるだけで、開発できるものが変わります。
開発現場で使われるライブラリ・フレームワークは以下のとおりです。
| 開発できるもの | 使用されるライブラリ・フレームワーク |
|---|---|
| フロントエンド（アプリケーションの見た目） | React,Vue Next.js |
| バックエンド（アプリケーションの裏方） | Node.js,Express |
さらに、「React」を使えばスマホアプリ、「Electron」ならデスクトップアプリが作れる汎用性の高い言語です。
また、求人ボックスでは、JavaScriptの求人数が全部で13万件以上あります。そのため、習得しておけば、さまざまな現場で活躍できます。
基本文法を習得し、関心のあるライブラリやフレームワークを重点的に勉強してみてください。
2.基礎だけ固めて別言語を習得し副業を目指す
案件を獲得して収入を得たいなら、JavaScriptの後にPHPを勉強します。
PHPは、サイト運営に必要なサーバー設定やデータベースといった操作をサポートしており、書籍も多く出版されているため、日本のサイトはWordPress（PHP言語）で作られていることが多いのです。
Googleのエンジニアも参考にするW3Techsでは「日本製Webサイトの87.3%がWordPressである」と発表されています（2026年3月時点）。
また、WordPressの案件は保守やメンテナンスといったものが多く、未経験者でも比較的取り掛かりやすい難易度のため、実績を積むのに向いています。
JavaScriptの基礎を固めたらPHPに移行してお問い合わせフォームやWordPressの勉強をしてください。
HTMLとCSSの次に学ぶJavaScriptは基礎を徹底的に固める
企業が求めているのは、HTMLやCSS、JavaScriptの基礎をしっかり習得している人です。
求人にあるjQueryはコード量を減らす効果、bootstrapはデザインの知識が少なくてもプロのような作品ができるフレームワークで、初心者の段階で使ってしまうと理解が浅くなる危険があります。
JavaScriptは、基本構文とDOM操作を重点的に勉強してください。
DOM操作（Document Object Model）は、JavaScriptを使ってHTMLやCSSを自由自在に書き換えることです。Webサイトの動きはほとんどDOM操作で作られています。JavaScriptの中でもっとも重要な仕組みです。
HTMLとCSSの次に取り組むJavaScriptの学習準備4STEP
JavaScriptを学習するには、自分のパソコンで動かす環境を構築する必要があります。
この記事ではWIndows10のパソコンで進めますが、WIndows11も手順は同じです。
以下の手順通りに進めてください。
- パソコン環境の確認
- Node.jsのインストール
- VSCodeのインストールと設定
- 動作テストとプロジェクト保存場所の確認
インストールするソフトウェアはすべて要求される容量が少ないものばかりです。
1.パソコン環境の確認
パソコンのCPUスペックを確認します。
「Windowsアイコン」をクリックして、歯車の設定を選択してください。
表示されたウィンドウの中央にある「システム」をクリックします。
画面左側の「詳細情報」を選択します。
画面が切り替わったら「プロセッサ」の項目を確認します。「Intel」か「ARM」のどちらかが表示されているはずです。
水がめのパソコンでは「Intel」になっています。わかったらメモしてください。
確認出来たら、スペック画面を閉じて、ブラウザを立ち上げます。
２．Node.jsのインストール
JavaScriptで本格的な開発をするにはNode.jsというソフトウェアをインストールする必要があります。
以下のリンクをクリックして公式サイトを表示してください。
下の画像はNode.jsの公式サイトトップ画面です。
「Node.jsⓇを入手」をクリックします。
画面を下にスクロールしてください。
自分のパソコンにあったバージョンを選択します。
下の画像では、上から「x64」と「ARM」、「Windows」と「Mac」と「Linux」が選択できます。
みずがめのパソコンでは「Intel」のCPUを搭載しているため、上から「x64」「Windows」を選択しました。
選択できたら「Windows インストーラー（.msi）」をクリックします。
ブラウザの右上を見ると「↓」のところでダウンロード状況を確認できます。ダウンロードが終わったらクリックして履歴を展開しNode.jsを起動してください。
みずがめのパソコンでは「mode-c24.14.9-x64.msi」を展開します。
「Node.js」のインストール画面が表示されます。基本的に「Next」を押しておけば正常にインストールされます。
最初に利用規約が出ます。すべて読んだら「I accept the terms in the License Agreement 」にチェックを入れて「Next」を押してください。
インストールする場所を聞かれています。変えずに「Next」をクリックしてください。
どの機能を入れるか選択する画面に切り替わります。デフォルトだとすべてチェックされている状態です。そのまま「Next」をクリックします。
C++やPythonで作られたツールを使うか問われています。学習段階では使わないためそのまま「Next」を押してください。
「Install」をクリックするとパソコンにインストールされます。
もし、ダウンロードが開始されない場合は「このアプリがデバイスに変更を加えることを許可しますか？」という画面が表示されていないか確認してみてください。
下の画像がインストールがスタートする直前の画面です。
インストールが終わったら「Finish」をクリックします。
正常に「Node.js」をインストールできたのか確認します。
パソコンのタスクバー部分に「cmd」と入力し「コマンドプロンプト」を開きます。
node -vと入力して「Enter」を押してください。
下画像のように、バージョンが出れば正常です。
npm -vと入力し「Enter」を押します。
バージョン情報が出ればNode.jsのインストールは完了です。
3.VSCodeのインストールと設定
エディタ（コードを書くためのソフトウェア）をインストールします。
リンクをクリックしてください。
下画像と同じ画面が出てくるはずです。
「Download for Windows」をクリックします。
ブラウザの右上にある「↓」でダウンロード状態を確認してください。
ダウンロードが終わったら「↓」をクリックしてダウンロード履歴を表示します。
「VSCoce」のアイコンをクリックしてインストーラーを起動しましょう。
利用規約が表示されます。
「同意する（A）」にチェックして「次へ（N）」を押します。
インストール先を指定します。そのまま「次へ（N）」をクリックします。
Windowsのスタートメニューに追加します。何も変更せず「次へ（N）」をクリックしてください。
デスクトップにアイコンを作成します。これも「次へ(N)」です。
設定した内容が表示されます。問題がなければ「インストール（I）」を選択してください。
インストールが始まる直前の画面です。
インストールが正常に終わると以下の画面が表示されます。「完了（E）」をクリックしてください。
すぐにVScodeの画面が表示されます。「Mark Done」をクリックしてください。
画面が切り替わります。
左側の一番下にある「4つの四角い箱のアイコン」を選択します。
検索窓が表示されます「japanese」と入力してください。一番上に表示されたプラグインをインストールします。
インストールしたものは英語から日本語に翻訳して表示するプラグインです。
1分程度待ったら、画面右下にある「Change Language and Restart」で再起動どうします。
RestartボタンはVScodeを最大で表示しないと隠れてしまいます！
日本語に変わりました。
VScode画面の左下にある「歯車ボタン」をクリックし「テーマ」を選択してください。
「配色テーマ」を選択します。
画面中央にメニューが表示されます。「ライト＊」を選択すると画面が上がるく設定されます。
画面が白色に変わりました。
4.動作テストとプロジェクト保存場所の確認
正常に動くのかテストします。
VScodeの左上にある「ファイル（F）」をクリックし、「新しいテキスト ファイル」を選択してください。
画面中央のエリアにコードを書き込める画面が表示されます。
以下の文をエリアに貼り付けてください。
console.log("Hello World");
「ファイル(F)」を選択し「名前を付けて保存….」をクリックします。
エクスプローラーが起動します。「PC」を展開し「Windows 8(C:)」をクリックしてください。Windows11では「Windows SSD」になっています。
「ユーザー」をクリックします。
自分のユーザーアカウントを選択します。
みずがめの場合「bushi」になっています。
ユーザーアカウントを開いた状態でファイル名を「test.js」にして「保存」します。
コマンドプロンプトに以下の文を乳ryくしてください。
node test.js
すると、ファイル世呼び出し、プログラムが処理されます。
Node.jsの設定ができたら本格的な学習が可能です。JavaScriptの基本的文法から進めてみてください。
コメント