- JavaScriptとは
- JavaScriptでできること
- JavaScriptの勉強方法・学習ロードマップ
- JavaScriptの学習サイト選びのポイント
- 初心者向けの学習サイト12選
- 中級者向けの学習サイト2選
- JavaScriptに関するよくある質問
- まとめ
JavaScriptとは
JavaScriptとは、Webサイト上で動的な処理を実現するために開発されたプログラミング言語です。近年のWebサイトの多くは、JavaScriptを用いて開発しています。
JavaScriptでできる処理の主な例は「要素の表示状態の切り替え」「画像のスライド」「画像の拡大表示」などです。またWebサイトのほか、サーバーサイドアプリやスマホアプリ、デスクトップアプリの開発でも使用されています。
関連記事：JavaScriptとは？基本の書き方を初心者にわかりやすく解説
JavaScriptとJavaの違い
JavaScriptとJavaは、名前が似ているため混同されることが多いですが、まったく別のプログラミング言語です。JavaScriptは、一般的にはフロントエンド開発で使用されます。その一方で、Javaは基幹システム開発などに使用されるプログラミング言語で、文法や使用用途が完全に異なる言語です。
もともと、JavaScriptは「LiveScript」という名称で開発されました。その後LiveScriptを開発した企業がJavaを開発したサン・マイクロシステムズ社（後のオラクル社）と提携した際に、JavaScriptに名称変更されました。
JavaScriptを勉強するメリット
JavaScriptを勉強するメリットは、将来性があり請け負う案件が多く、仕事に困らない点などがあります。JavaScriptは、人気のプログラミング言語ランキングでも常に上位にランキングされています。
例えば、定期的にプログラミング言語の人気を観測している「世界のプログラミング言語トップ50（GitHub）」では、長年の間トップを獲得しています。また、2024年Q1で4位にランクインしているTypeScirptもJavaScirptをベースに開発されたプログラミング言語です。
JavaScriptは、WebサイトやWebアプリ、サーバーサイドなどに使われるため、利用されるプロジェクトは多くあります。そのため、仕事に困る可能性は低いです。
なおレバテックキャリアは、ITエンジニア専門の転職エージェントとして、JavaScriptの関連求人も多数掲載中。求職者様の特徴に合わせた個別の転職サポートを無料で提供しています。
詳しくは次の記事「レバテックキャリアの利用料金は無料！登録から転職までの流れやサービスを紹介」をご覧ください。
関連記事：
JavaScriptの将来性とは？需要状況を解説
JavaScriptエンジニアの仕事内容は？年収や求人例も紹介
JavaScriptエンジニアの年収を職種別に解説！求人情報も紹介
JavaScriptでできること
JavaScriptで実現できることは非常に多いです。ここからは、JavaScriptで実装できる代表例を5つ紹介します。JavaScriptではユーザーインターフェースの動的更新やイベント処理、別サービスの連携などが可能です。より詳しく確認していきましょう。
ユーザーインターフェースの動的更新
JavaScriptを使用すると「クリックすると表示される要素」や「マウスホバーした際に色の変わるメニュータブ」など、ユーザーの動きに合わせて要素を変更できます。また、本ページの年収診断のような「スクロールすると表示される要素」もJavaScriptを用いることで実装可能です。さらに、ユーザーの動きだけでなく時間経過で表示が変更される画像のスライドショーなどもJavaScriptで実装できます。
イベント処理
申し込みフォームの「送信ボタン」や検索バー横にある「検索する」ボタンなど、クリックしたタイミングなどイベントに合わせて発生する処理もJavaScriptで実装できます。ボタンクリックの他に、キーボードの入力に合わせた変化やフォーム送信などが可能です。イベント処理を適切に実装すると「Youtubeでスペースを押した際に一時停止する」などのイベント処理が実装できます。
複雑なアニメーション
要素のサイズ変更や描画位置の変更を組み合わせることで、複雑なアニメーションも実装できます。また、最新のCSSではCSS単体でもアニメーションを実装できますが、JavaScriptを用いることでより高度なアニメーションを簡単に実装可能です。
JavaScriptにはアニメーション実装用のライブラリもあります。代表例がGSAPです。GSAP公式ページのshowcaseを見ると、GSAPを用いて開発された高度なアニメーションを確認できるので興味のある方はぜひご確認ください。
非同期通信
Webページではイベントに応じてサーバーからデータを取得しページに表示する処理をよく用います。例えば、X（旧Twitter）のスクロールに応じてポスト（ツイート）を取得するなどです。
この際に同期通信でしか実装していない場合、新たなポストを取得している間Webアプリがフリーズしてしまいます。この問題を解決するのが非同期通信です。
非同期通信を用いることで、データの取得処理と並行してWebページの描画など別の処理を行えます。そのため、UXが向上しやすいです。JavaScriptを用いると、簡単に非同期通信を実装できます。
データの処理や検証
申し込みフォームのフォーム入力検証や金額の計算などもJavaScriptで実装できます。例えば、E-mailアドレス欄に入力された値がE-mailアドレス形式でない場合にエラー文言を出し「送信」ボタンをクリックできない状態に変更などが実装可能です。
また、ECサイトで表示するカゴの中身の合計金額などもJavaScriptで実装できます。JavaScriptで金額計算することで、カゴに入れた商品によって異なる合計金額をフロントエンドで処理可能です。
JavaScriptの勉強方法・学習ロードマップ
JavaScriptの勉強において最も重要なのは、JavaScriptによるプログラムを記載し動作を確認しながら理解度を深めることです。ここからはJavaScriptの勉強ステップを紹介します。具体的な勉強ステップは、開発環境の準備、基本文法の習得、教材選び、アウトプットの作成です。それぞれについて詳しく見ていきましょう。
関連記事：未経験からJavaScriptエンジニアへの転職！学習方法も解説
開発環境の準備
最初に、JavaScriptの開発環境を準備します。JavaScriptの開発環境としては「Webサービス」「デベロッパーツール」「HTMLファイル・JSファイル」の3種類があります。
実際にリリースするモジュールは「HTMLファイル・JSファイル」形式です。Webサービスやデベロッパーツールは学習や検証用途では便利ですが、あくまでお試しの環境と認識しておきましょう。
Webサービス
オンライン上でJavaScriptのプログラミングができるWebサービスは、JavaScriptの開発環境を構築する手間がかからず、初心者にとっては便利です。Webサービスの例としては、progateなどがあります。ほかにも多くのWebサービスが存在するので、自分の使い勝手に合ったものを使うといいでしょう。
デベロッパーツール
Google ChromeなどのWebブラウザのデベロッパーツール上でも、JavaScriptのプログラミングができます。デベロッパーツールとは、HTMLやCSS、JavaScriptなどのコードチェックや表示速度の検証、メモリ使用量など、開発者向けのツールのことです。
Google Chromeデベロッパーツールの起動方法とJavaScriptの入力方法
-
1.画面右上の「設定」をクリック。
2.「その他のツール」をクリック。
3.「デベロッパーツール」をクリック（そのほか、「Ctrl + Shift + I」または「F12」でもデベロッパーツールが起動します）
4.上部メニューの「Console」をクリック。
5.JavaScriptの入力画面が表示されます。入力後、Enterキーを押すことで実行されます。
HTMLファイル・JSファイル
3つめの方法としては、JavaScriptをHTMLファイルの中に書き込む、もしくはJSファイルを作成してHTMLファイルに読み込ませる方法があります。HTMLファイルの中にJavaScriptを書き込むには、JavaScriptのコードをタグで囲みます。
関連記事：HTMLとは？CSSとの違いや代表的なタグなどをわかりやすく解説
基本文法の習得
JavaScriptの開発環境の準備ができたら、JavaScriptの書き方の練習をします。書き方の練習としては、最初に文字列や現在時刻の表示をしてみましょう。それらの表示ができたら、次に条件分岐（if文）の実行処理の練習をします。
条件分岐（if文）とは「もし◯◯だったら✕✕を行う」という処理を行うときに使います。条件分岐の書き方を学習した後は、繰り返し処理（for文）を学びます。繰り返し処理（for文）とは、同じ処理を繰り返し実行するときに行います。
さらにクラス構文とメソッド（関数）の書き方の練習も行います。クラス構文はclassコマンドの後に、プロパティやメソッドを定義して書きます。
以下のサンプルコードでは、Chrome（バージョン: 120.0.6099.225）のデベロッパーツールにて検証を行っています。
文字列の出力
文字列を出力したい場合、文字列の出力先によって記述方法は変わります。
コンソール上に出力する場合、console.log()を使って出力が可能です。
・スクリプト
//コンソールにログを出力する
console.log("Hello,Levtech！");
・出力
Hello,Levtech！
ブラウザのアラート機能（Chromeではポップアップ）による文字列の出力では、window.alert()を用います。
・スクリプト
//アラートメッセージを出力する
window.alert("Hello,Levtech！");
その他、HTMLのページ内に文字列を出力する場合は、document.write()やinnerHTML要素の書き換えも利用できます。ただし、Chromeのデベロッパーツールでは利用できません。
現在時刻の表示
現在の日時をコンソール上に出力します。出力結果は実行タイミングによって変わりますので注意下さい。
・スクリプト
//現在日時
var now = new Date();
//コンソールに出力
console.log(now);
//年、月、日、時、分、秒の取得
var nowYear = now.getFullYear();
var nowMonth = now.getMonth() + 1; //0を起点に数えるため1増やす
var nowDay = now.getDate();
var nowHour = now.getHours();
var nowMinute = now.getMinutes();
var nowSecond = now.getSeconds();
//結合して出力
console.log("現在は" + nowYear + "年" + nowMonth + "月" + nowDay + "日" + nowHour + "時" + nowMinute + "分" + nowSecond + "秒");
・出力
Sat Aug 17 2024 15:36:49 GMT+0900 (日本標準時)
現在は2024年8月17日15時36分49秒
条件分岐（if文）
条件分岐は、各種の条件を判断しプログラムの実施する処理を切り替える際に利用します。その代表的な記述としてif文があります。if文では()の中の条件にあてはまる場合、あてはまらない場合で実行される処理が変わります。numの値を変更して、処理が変わる事を確認しましょう。
・スクリプト
//任意の整数値
var num = 2;
//整数を2で割ってあまりが0ならば偶数、そうでなければ奇数
if(num % 2 == 0){
console.log(num + "は偶数です。");
}else{
console.log(num + "は奇数です。");
}
・出力
2は偶数です。
繰り返し処理（for文）
繰り返し処理は、条件を満たしている間は処理を繰り返す制御が可能です。for文では、繰り返しの回数を指定して繰り返し処理を行います。
・スクリプト
//numが1から5以下の間は繰り返す。numは一つずつ増える。
for(var num = 1; num <= 5; num++){
console.log(num + "回目");
}
・出力
-
1回目
2回目
3回目
4回目
5回目
クラス構文とメソッド
JavaScriptではクラスを定義して複数回使用するデータ型を定義できます。オブジェクト指向に則った記述のため、他言語を経験した方は特に扱いやすいです。以下はレバテックキャリアに掲載されている求人例をclassで表した場合のイメージになります。
・スクリプト
// レバテックキャリアクラスの定義
class CareerLevtech {
constructor(jobTitle, salaryRange, requiredSkills) {
this.jobTitle = jobTitle;
this.salaryRange = salaryRange;
this.requiredSkills = requiredSkills;
}
// 求人情報を表示するメソッド
displayInfo() {
console.log(`求人名: ${this.jobTitle}`);
console.log(`想定年収: ${this.salaryRange}`);
console.log('必要スキル:');
this.requiredSkills.forEach(skill => {
console.log(`- ${skill}`);
});
}
}
// 求人情報の例
const job1 = new CareerLevtech(
'フロントエンドエンジニア',
'400万円〜600万円',
['JavaScript', 'React', 'Vue.js']
);
// 求人情報を表示
job1.displayInfo();
・出力
-
求人名: フロントエンドエンジニア
想定年収: 400万円〜600万円
必要スキル:
- JavaScript
- React
- Vue.js
学習サイト・本での学習
JavaScriptの基本文法を身につけたら、次に学習サイトや本を活用してスキルアップしましょう。Web上には、動画やプログラミングできる学習サイトが多くあります。また、JavaScriptは専門書も多く出版されており、体系的に学ぶことも可能です。
成果物の作成
JavaScriptの学習の最終段階として、JavaScriptを使ったWebサイトなどの成果物の作成をしましょう。Webサイトの作成には、HTML・CSSなどの知識が必要です。
実際にWebサイトを作成することで、学習時に発生しなかったエラーや理解の浅い文法に気づけます。それらを経験することは、問題に対処する力を養う機会です。また作成したWebサイトは、転職活動時にポートフォリオとして活用できます。
関連記事：JavaScriptの転職市場は？需要や未経験からの習得方法を解説
JavaScriptの学習サイト選びのポイント
JavaScriptが学べる学習サイトが最近増えています。そのため、どの学習サイトを利用したらいいか迷う方も多いでしょう。
ここでは、JavaScriptの学習サイト選びのポイントを解説します。
環境構築の必要性を確認する
JavaScriptでプログラミングをするには、環境構築が必要です。環境構築はPCによる差分でWebサイトに記載されている通りにやってもうまく行かない場合があります。
学習サイトのなかには、環境構築不要でJavaScriptの練習ができるサイトも増えています。このような学習サイトでは、動画やスライドなどの解説を見たあとに、すぐプログラミング練習ができます。プログラミングをすぐに実行したい方は、そのような学習サイトを選ぶといいでしょう。
ただし、いずれ本格的に学習するのであれば、環境構築は避けられません。一定レベルに達したら、環境構築についても説明のあるサイトを参考に環境構築にも挑んでください。
丁寧な解説があるかで判断する
JavaScriptを学んでいるときに、理解できない疑問にぶつかることがあります。そのような疑問に対して、丁寧な解説があることは、学習サイトを選ぶ上で重要な要素です。動画やスライド、テキストなどで解説が丁寧な学習サイトを選ぶといいでしょう。
自分のレベルを測定できる
どの学習でも同じですが、独学をしていると自分のレベルがわかりにくいというデメリットがあります。JavaScriptの学習でも、自分のレベルに合った学習ができないと非効率です。
自分のレベルを測れる機能がある学習サイトならば、自分のレベルに合わせた教材で効率的に学習することが可能です。自分のレベルを測れる機能があるか、確認することをおすすめします。
初心者向けの学習サイト12選
ここからは事前知識のない初心者向けの学習サイトを紹介します。いずれのサイトを利用しても、基本文法を身につけられるため、まずは覗いてみて気になるサイトを利用しましょう。また、いずれのサイトを使用した場合でも、自身でアウトプットすることが大切です。それぞれのサイトについて詳しく見ていきましょう。
日本語の学習サイト
日本語の学習サイトを紹介します。国内の事業者や個人が提供している場合が多く、日本でのトレンドを知る上でも役立ちます。
1.ドットインストール / はじめてのJavaScript
「はじめてのJavaScript」は、定番のプログラミング学習サイト「ドットインストール」のJavaScript入門レッスンです。ドットインストールは動画で学習ができ、視覚的に理解しやすい学習コンテンツといえます。
旧版の「JavaScript入門」から「はじめてのJavaScript」にアップデートし、全11回のレッスンでJavaScriptの基本的な使い方を学んでいきます。各レッスン動画は3分以内なので、ちょっとした隙間時間に勉強するのに最適です。
2.Progate / JavaScript （ES6）
無料で学べるプログラミング学習サイト「Progate」では、2015年に標準化された仕様ES6に対応したカリキュラムが用意されています。学習コースはⅠ〜Ⅶに分かれており、JavaScriptを基礎から学べるレッスンプログラムです。サイト上でコードを動かしながら学習できる形態のサービスです。
コースⅠの修了目安の時間は2時間で、JavaScriptの基本文法、変数、条件分岐、繰り返し処理、配列と連想配列、関数を学びます。 jQueryの初級編もありますので、JavaScriptの基礎編の勉強を終えたらそちらのレッスンもぜひ受けてみてください。
3.CODEPREP/JavaScript入門
実際にコードを打ちながら勉強できる学習サイト「CODEPREP」のJavaScript入門コースです。「JavaScript入門 基本操作編」は7チャプター構成で、JavaScriptの基本ルール、型、演算、関数を学び、簡単な計算プログラムを作ります。
他にも入門編として「はじめてのReact」「はじめてのVue.js」などフレームワークの学習コースや、基礎編として「JavaScriptで正規表現を理解する」「JavaScriptで学ぶUnitテスト」、実践編として「Three.jsではじめる3Dグラフィックス基礎」など上級コースが無料で受けられます。
4.マンガで分かるJavaScriptプログラミング講座
マンガでわかるJavaScriptプログラミング講座はマンガでJavaScriptが勉強できるサイトです。
4部構成で、第3部ではWebページのプログラミング、第4部ではjQueryを学びます。 「活字ばかりの参考書の勉強は頭に入らない」という方におすすめです。
5.Let'sプログラミング/JavaScript入門
Let'sプログラミングは初心者〜中級者向けにプログラミングの解説を行っているサイトです。JavaScript関連のコンテンツとして、JavaScript入門、jQueryの使い方を提供しています。
初心者から中級者に向けた内容になっていますので、これからJavaScriptを学ぶ方におすすめです。
6.パズルネット智慧（ソフィア）/JavaScript入門
パズルネット智慧はパズル関係コンテンツを主に配信しているサイトです。JavaScript初心者向けの入門解説記事もコンテンツとして提供しています。
基本編、ダイアログ編、フォーム編、タイマー編、DOM編など14のカテゴリに分けて解説していますので、目的に応じて参照ください。
7.Web Programming Portal
Web Programming Portalはプログラマーやクリエイターのための情報サイトで、HTML5、CSS、JavaScript、PHPなどのプログラミング言語の解説ページがあります。
JavaScriptは入門編、中級編、応用編、実践編の4グレードを提供してくれているため、スキルにあったものを選んで学習に利用しましょう。
8.CodeCombat
CodeCombatはJavaScriptをRPGゲーム感覚で学べるサイトです。海外の事業者によって提供されていますが、日本語にも対応しています。プログラミング初心者でも、手軽に学習できることが特徴です。また、ゲームの中盤以降は一部課金対象のコースもあります。
9.JavaScript Primer/迷わないための入門書
JavaScript Primer/迷わないための入門書は書籍『JavaScript Primer 迷わないための入門書』のウェブサイト版です。ES2015をベースとした入門書で、他言語プログラミング経験者をターゲットにしているため、完全なるプログラミング無経験者の方には少し難しい部分があるかもしれません。その代わりに、内容は継続的にアップデートされているため有用な情報を得やすいといえます。
10.Schoo/JavaScript（プログラミング）の授業
Schooは、7,000本以上の授業が提供されている社会人向けオンライン学習コミュニティです。
レッスン内容によっては、無料公開しているものもあります。JavaScript関連のラインアップには、React.jsなどのライブラリー関連の入門コンテンツもありますので、初心者の方でも幅広く学習できるサイトです。
英語の学習サイト
JavaScriptは世界中で利用されているプログラミング言語です。もちろん英語圏の学習サイトも存在しているため、その一部を紹介します。近年では、ブラウザの自動翻訳機能の性能も高まっているため、英語に不安のある方でも取り組み易くなっています。
11.freeCodeCamp
freeCodeCampは、フロントエンドからサーバーサイドまで幅広くアプリケーション開発を無料で学習できるサイトです。実際にコードを作成し、問題を解きながら進めていく形式になっています。解題に躓いた際は、文字・動画のヒントで確認できます。
さらに、freeCodeCampは大きなオープンソースコミュニティを抱えており、コースに関連する質問を投稿できます。登録せずに利用することも可能ですが、登録すると学習の進捗が記録できます。英語の勉強も兼ねて挑戦してみてはいかがでしょうか。
12.Codecademy/Learn JavaScript
Codecademyは、学習の進捗状態が確認でき、科目修了ごとにバッジがもらえるため、学習意欲が続きやすいサイトです。 ただし日本語非対応のため、英語で読解しなければなりません。学習を記録する機能を使わない場合は、ユーザー登録なしでレッスンを受けることができます。
中級者向けの学習サイト2選
初級者向けのサイトでの学習が物足りない方に向けて、JavaScriptの中級者向けの学習サイトを紹介します。初心者向けの知識を身につけてよりステップアップしたい方はこちらで紹介している学習サイトを活用しましょう。また、紹介する学習サイトには初心者向けコンテンツが提供されているサイトもあります。
1.MDN/JavaScriptリファレンス
MDN/JavaScriptリファレンスは「MDN（Mozilla Developer Network）」によるJavaScriptリファレンスです。海外の学習サイトですが、一部日本語対応もしています。テキストメインのシンプルなデザインで、項目ごとに章分けされており、必要な情報にもスピーディーにアプローチできます。中級編・上級編のほか、JavaScript初心者向けの初級編もあります。
2.とほほのJavaScriptリファレンス
杜甫々（とほほ）氏が運営するWebサイトとほほのWWW入門の一コンテンツとして、JavaScriptのリファレンスサイト（とほほのJavaScriptリファレンス）が提供されています。
JavaScript入門の解説もありますが、ある程度JavaScriptを扱えるようになった中級者以上向けとなっています。読みやすい文章と、継続的に情報が更新されていることがおすすめのポイントです。
JavaScriptに関するよくある質問
JavaScriptは初心者が独学で身につけやすいプログラミング言語です。そのため、これから学習する初学者から多数の質問が寄せられます。ここからはJavaScriptを勉強し始めた初心者が抱きやすいJavaScriptに関する質問に回答します。
Q1. JavaScriptは主にどんな職種に使用されていますか？
主にWebサイトのフロントの設計や開発を担当するフロントエンドエンジニアや、Webアプリケーションやスマホアプリの開発・保守・運用を担当するアプリケーションエンジニアなどに使用されています。
Q2. JavaScriptは今後も需要がありますか？
Webのフロントサイド開発で圧倒的な市場シェアを誇っていることから、今後も需要が続くでしょう。また、実行エンジンNode.jsを用いることで、Webサーバーでのアプリ開発も可能になり、活躍の場はさらに広がっています。
Q3. JavaScript習得に必要な学習時間を教えてください
一般的には15〜200時間が、JavaScriptの習得に必要な学習時間といわれています。もちろん、この時間は設定された目標によって変わります。趣味レベルであれば、15時間程度で習得できます。業務レベルになると、最低200時間程度は必要とされています。
まとめ
この記事では、JavaScriptを勉強しようと考えている方に向けて、JavaScriptの概要や勉強するメリット、勉強方法、初級〜中級者向けの学習サイトなどについて解説しました。
JavaScriptは、さまざまなWebサイトやアプリで利用されており、Webのフロントエンドの仕事に携わるならば、必須といえるプログラミング言語です。サーバーサイドやスマホアプリの開発など利用領域が拡大しており、様々な分野のエンジニアがスキル向上を目指すために学ぶのにも適しています。
また、初心者でも比較的学びやすく、この記事で紹介したような初心者向けの学習サイトが多くあります。JavaScriptに興味がある方は、この記事を参考に学習サイトで学んでみてはいかがでしょうか。
ITエンジニアの転職ならレバテックキャリア
レバテックキャリアはIT・Web業界のエンジニア職を専門とする転職エージェントです。最新の技術情報や業界動向に精通しており、現状は転職のご意思がない場合でも、ご相談いただければ客観的な市場価値や市場動向をお伝えし、あなたの「選択肢」を広げるお手伝いをいたします。
「将来に向けた漠然とした不安がある」「特定のエンジニア職に興味がある」など、ご自身のキャリアに何らかの悩みを抱えている方は、ぜひ無料のオンライン個別相談会にお申し込みください。業界知識が豊富なキャリアアドバイザーが、一対一でさまざまなご質問に対応させていただきます。
「個別相談会」に申し込む
転職支援サービスに申し込む
※転職活動を強制することはございません。
レバテックキャリアのサービスについて
