「HTML・CSSを習得した後、何に取り組めばいいのかわからない」
「できれば仕事につながるよう勉強したい」
マークアップ言語（HTML・CSSなどの装飾を担当する言語）の基礎を習得した人は、Javascriptに取り組むのがおすすめです。
HTML・CSSの知識を活用でき、お問い合わせフォームといった本格的な機能を実装できます。
本記事では、Webアプリ開発の経験があるみずがめが、以下の内容を紹介します。
- JavaScriptの特徴
- 仕事を意識したJavaScriptの勉強方針2種
- JavaScriptを実際に操作するための準備4STEP
この記事を最後まで読むことで、仕事につなげるために何をすればいいのかわかります。
記事後半では、初心者の方でもわかりやすいようスクショ付きで環境構築の方法を説明しているので、確認しながら進めてみてください。
HTMLとCSSの次にJavaScriptをおすすめ
マークアップ言語を習得した後、JavaScriptに取り組むとスムーズにスキルアップできます。
理由は以下のとおりです。
- 習得難易度が低い
- 日本語情報が豊富
- 環境構築が簡単
とくに、環境構築が簡単な点は、初心者に向いています。
1.習得難易度が低い
JavaScriptは、PythonやJavaと比べると習得難易度が低い言語です。
基礎習得にかかる時間には、今までの経験や吸収力といった個人的要素が影響すします。以下の表は目安として考えてください。
| プログラミング言語 | 基礎習得時間 | 参考サイト |
|---|---|---|
| JavaScript | 15～200時間 | レバテックキャリア |
| Python | 200～300時間 | レバテックフリーランス |
| Java | 200時間 | 侍エンジニア |
JavaScriptは、1日2時間の勉強で半年以内に基礎固めができる言語です。
2.日本語情報が豊富
JavaScriptは、日本語書籍が充実しており、英語ができない人でも問題なく学習できます。
多くのプログラミング言語では、有益な情報が翻訳されていなかったり、ネットを駆使して自分で調べたりする必要があるため、時間と手間がかかります。
しかし、JavaScriptの基礎を固める程度なら、本を1冊購入してやりこんでいけば十分です。
3,000円前後の初心者用書籍（200～400ページ）を手元に置いて、勉強を進めていきましょう。
3.環境構築が簡単
JavaScriptは、環境構築が容易です。
ほかの言語との比較は以下のとおりになります。
| プログラミング言語 | 主な開発環境 | 開発環境の特徴 |
|---|---|---|
| JavaScript | VSCode と Node.js | デフォルト設定のままで開発できる 古めのパソコンで問題なく動く |
| Python | PyCharm | Python開発で必要な機能がそろっている 動作が若干重い |
| Java | Eclipse または IntelliJ IDEA | Python開発で必要な機能がそろっている 動作が若干重い |
JavaScriptは、「VScode」と「Node.js」の2種類をパソコンにインストールすれば、すぐ開発できます。処理落ちやファイル読み込みエラーが少ないため、動作が安定しているのが特徴です。
HTMLとCSSの勉強で、すでに「VScode」を使っている場合、「Node.js」を追加するだけで本格的な開発環境が構築できます。
HTMLとCSSの次にJavaScriptを習得すると仕事につながる
JavaScriptは、インターネットにあるほぼすべてのWebアプリやホームページに使われているため、開発の仕事にかかわるなら習得必須の言語です。
Webアプリやスマホアプリの開発に限定すれば、ほかの言語（PythonやJava）より自由度が高いため、自分の目的によってどこまで深堀して勉強するのかを決定する必要があります。
収入を得ることを前提にするなら、以下の2つに分けられます。
- 応用まで深堀して就職を目指す
- 基礎だけ固めて別言語を習得し副業を目指す
どちらも基礎を習得する部分は共通しています。どちらを目指すか決まっていない場合は、基礎だけ先に押さえてから方向性を考えてもいいでしょう。
1.応用まで深堀して就職を目指す
エンジニアとして働くことが目標なら、JavaScriptを深く勉強するだけで企業に就職する強力な武器になります。
通常、サービスを開発するには適した言語を選択し、勉強しながら開発していくのが基本です。3つ以上の言語習得を求められるケースも多く、学習コストが大きくなります。
しかし、JavaScriptは、1つの言語だけで多くのサービス開発が可能です。
基礎ができていれば、ライブラリ（必要なものをまとめたツールセット）やフレームワーク（スターターセット）を切り替えるだけで、ほぼすべての開発に対応できます。
開発現場で使われるライブラリ・フレームワークは以下のとおりです。
| 開発できるもの | 使用されるライブラリ・フレームワーク |
|---|---|
| フロントエンド（アプリケーションの見た目） | React Vue.js Next.js |
| バックエンド（アプリケーションの裏方） | Node.js Express |
さらに、「React」を使えばスマホアプリ、「Electron」ならデスクトップアプリが作れる汎用性の高い言語です。
また、求人ボックスでは、JavaScriptの求人数が全部で13万件以上あります。そのため、習得しておけば、さまざまな現場で活躍できるエンジニアになれるでしょう。
基本文法を習得し、関心のあるライブラリやフレームワークを重点的に勉強してみてください。
2.基礎だけ固めて別言語を習得し副業を目指す
案件を獲得して収入を得たいなら、JavaScriptの後にPHPを勉強します。
PHPは、サイト運営に必要なサーバー設定やデータベースといった操作をサポートしており、書籍も多く出版されている言語です。
サポートが多く、個人ブログから大企業のWebサイトまで対応できるため、日本のサイトはWordPress（PHP言語）が多くのシェアを獲得しています。
Googleのエンジニアも参考にするW3Techsでは「日本製Webサイトの87.3%がWordPressである」と発表されています（2026年3月時点）。
また、WordPressの案件は保守やメンテナンスといったものが多く、未経験者でも比較的取り掛かりやすい難易度のため、実績を積むのに適しているのです。
JavaScriptの基礎を固めたら、PHPに移行してお問い合わせフォームやWordPressの勉強をしてください。
HTMLとCSSの次に取り組むJavaScriptの学習準備4STEP
JavaScriptを学習するには、自分のパソコンで動かす環境を構築する必要があります。
この記事ではWindows10のパソコンで進めますが、Windows11も手順は同じです。
以下の手順通りに進めてください。
- パソコン環境の確認
- Node.jsのインストール
- VSCodeのインストールと設定
- 動作テストとプロジェクト保存場所の確認
インストールするソフトウェアはすべて要求される容量が少ないものばかりです。
1.パソコン環境の確認
パソコンのCPUスペックを確認します。
「Windowsアイコン」をクリックして、歯車の「設定」を選択してください。
表示されたウィンドウの中央にある「システム」をクリックします。
画面左側の「詳細情報」を選択します。
画面が切り替わったら「プロセッサ」の項目を確認します。「Intel」か「ARM」のどちらかが表示されているはずです。
みずがめのパソコンでは「Intel」になっています。プロセッサの種類をメモしてください。
確認できたら、スペック画面を閉じてGoogle Chromeを立ち上げます。
2.Node.jsのインストール
JavaScriptで本格的な開発をするには「Node.js」というソフトウェアをインストールする必要があります。
以下のリンクをクリックして公式サイトを表示してください。
下の画像は「Node.js公式サイト」のトップ画面です。
「Node.jsⓇを入手」をクリックします。
画面を下にスクロールしてください。
自分のパソコンにあったバージョンを選びます。
「x64」か「ARM」を選択できます。CPUのタイプが「Intel」のパソコンなら「x64」です。
1つ下の項目では「Windows」「Mac」「Linux」が選択できます。
みずがめのパソコンでは「Intel」のCPUを搭載しているため、上から「x64」「Windows」を選択しました。
選択できたら「Windows インストーラー（.msi）」をクリックします。
ブラウザの右上を見れば「↓」のところでダウンロード状況を確認できます。ダウンロードが終わったらクリックして履歴を展開し「Node.js」のインストーラーを起動してください。
みずがめのパソコンでは「node-v24.14.9-x64.msi」の部分をクリックします。
「Node.js」をインストールするための設定画面が表示されます。基本的に「Next」を押しておけば正常にインストールされます。
最初に利用規約が出ます。すべて読んだら「I accept the terms in the License Agreement」にチェックを入れて「Next」を押してください。
インストールする場所を問われています。変更せずに「Next」をクリックしてください。
どの機能を入れるか選択する画面に切り替わります。デフォルトだとすべてチェックされている状態です。変更せずに「Next」をクリックします。
C++やPythonで作られたツールを使うか問われています。学習段階では使わないため、下画像のように何もチェックせずに「Next」を押してください。
「Install」をクリックするとインストールが開始されます。
下の画像がインストールがスタートする直前の画面です。
もし、3分待ってもダウンロードが開始されない場合は「このアプリがデバイスに変更を加えることを許可しますか？」という画面が表示されていないか確認してみてください。
インストールが終わったら「Finish」をクリックします。
正常に「Node.js」をインストールできたのか確認します。
タスクバー部分に「cmd」と入力し「コマンドプロンプト」を開きます。
node -vと入力して「Enter」を押してください。
下画像のように、バージョンが出れば正常です。
npm -vと入力し「Enter」を押します。
バージョン情報が出ればNode.jsのインストールは完了です。
3.VSCodeのインストールと設定
エディタ（コードを書くためのソフトウェア）をインストールします。
リンクをクリックしてください。
下画像と同じ画面が出てくるはずです。
「Download for Windows」をクリックします。
ブラウザの右上にある「↓」でダウンロード状態を確認してください。
ダウンロードが終わったら「↓」をクリックしてダウンロード履歴を表示します。
「VSCoce」のアイコンをクリックしてインストーラーを起動しましょう。
利用規約が表示されます。
「同意する（A）」にチェックして「次へ（N）」を押します。
インストール先を指定します。そのまま「次へ（N）」をクリックします。
Windowsのスタートメニューに追加します。何も変更せず「次へ（N）」をクリックしてください。
「デスクトップ上にアイコンを作成する（D）」にチェックを入れて「次へ(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」にして「保存」します。
コマンドプロンプトに以下の文を入力くしてください。
node test.js
すると、ファイルを呼び出し、プログラムが処理されます。
Node.jsの設定ができたら本格的な学習が可能です。JavaScriptの基本的文法から進めてみてください。
コメント