- 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を使って、Webのクライアントサイドで実現できることについて解説します。本項では言及しませんが、Node.jsを使ったサーバーサイド処理の作成、ReactNativeを用いたスマホアプリの作成なども可能です。
要素の表示状態の切り替え
JavaScriptを使えば、画像やテキストなどの要素の表示状態を切り替えることができます。すなわち、画像やテキストなどにマウスカーソルが重なったとき、これらの要素が動く（アニメーション）ような処理ができます。
画像のスライド
画像のスライドもJavaScriptを使用すれば可能です。画像のスライドの例としては、Webサイトの画像が自動で切り替わるスライドショーなどがあります。
画像の拡大表示
JavaScriptならば、Webサイトの画像の拡大表示も可能です。Webサイトの画像をクリックすると、画像が拡大されて表示される機能は、JavaScriptで作成されたものになります。この機能は、画像の内容が小さくて見えにくい場合に役立ちます。
送信フォームの入力内容確認
ECサイトなどによくあるユーザー登録フォームや決済フォームなどで使われる「送信フォームの入力内容確認機能」もJavaScriptで作成できます。送信フォームの入力内容確認の例としては、パスワードの大文字小文字の判別や電話番号のハイフンの有無のチェックなどがあります。
地図上での移動
Google Mapなどの地図上での移動も、JavaScriptで作成できます。Google Mapでは、特定の処理の終了を待たずに次の処理が行われる「非同期処理」が使われています。具体的には、サーバーから地図情報を取得する一方で、地図画面上の操作を受け付けることが可能です。それにより、地図上で移動をさせても、ユーザーはリアルタイムに情報を見ることができます。これらの処理は、JavaScriptを使って実装された機能です。
JavaScriptを勉強するメリット
JavaScriptを勉強するメリットは、将来性があり請け負う案件が多く、仕事に困らない点などがあります。JavaScriptは、人気のプログラミング言語ランキングでも常に上位にランキングされています。例えば、定期的にプログラミング言語の人気を観測している「世界のプログラミング言語トップ50（GitHub）」では、長年の間トップを獲得しています。
JavaScriptは、WebサイトやWebアプリ、サーバーサイドなどに使われるため、利用されるプロジェクトは多くあります。そのため、仕事に困る可能性は少ないと考えられます。
関連記事：
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の開発環境の準備ができたら、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！");
・出力
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 Jan 20 2024 12:33:35 GMT+0900 (日本標準時)
現在は2024年1月20日12時33分35秒
条件分岐（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 careerLevtech {
kw1 = "本コードは";
kw2 = "レバテックキャリアに";
kw3 = "掲載予定です。";
dispMsg() {
console.log(this.kw1 + this.kw2 + this.kw3);
return;
}
}
// careerLevtechのオブジェクトを生成
var cl = new careerLevtech();
// dispMsgメソッドを呼び出す
cl.dispMsg();
・出力
本コードはレバテックキャリアに掲載予定です。
学習サイト・本での学習
JavaScriptの書き方を学ぶことができたら、次に学習サイトや本を活用してスキルアップしましょう。Web上には、動画や実際にプログラミングができる学習サイトが多くあります。また、JavaScriptは専門書も多く出版されており、体系的に学ぶことも可能です。
成果物の作成
JavaScriptの学習の最終段階として、JavaScriptを使ったWebサイトなどの成果物の作成をしましょう。Webサイトの作成には、HTML・CSSなどの知識が必要になります。
実際にWebサイトを作成することで、いままで気がつかなかったエラーなども知ることができます。それらを経験することは、問題に対処する力を養う機会です。また作成したWebサイトは、転職活動時にポートフォリオとして活用できます。
関連記事：JavaScript関連の転職市場状況について
JavaScriptの学習サイト選びのポイント
JavaScriptが学べる学習サイトが最近増えています。そのため、どの学習サイトを利用したらいいか迷う方も多いでしょう。
ここでは、JavaScriptの学習サイト選びのポイントを解説します。
環境構築の必要性を確認する
JavaScriptでプログラミングをするには、環境構築が必要になります。JavaScriptの環境構築は、初心者にとっては動作確認など、手間がかかり慣れない作業です。
学習サイトのなかには、環境構築不要で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」でも、JavaScriptのレッスンが無料（一部有料）で受けられます。
学習の進捗状態が確認でき、科目修了ごとにバッジがもらえるため、学習意欲が続きやすいサイトです。 ただし日本語非対応のため、英語で読解しなければなりません。学習を記録する機能を使わない場合は、ユーザー登録なしでレッスンを受けることができます。
中級者向けの学習サイト2選
初級者向けのサイトでの学習が物足りない方に向けて、JavaScriptの中級者向けの学習サイトを紹介します。紹介する学習サイトには、初心者向けコンテンツが提供されているサイトもあります。
1.MDN/JavaScriptリファレンス
MDN/JavaScriptリファレンスは「MDN（Mozilla Developer Network）」によるJavaScriptリファレンスです。海外の学習サイトですが、一部日本語対応もしています。テキストメインのシンプルなデザインで、項目ごとに章分けされており、必要な情報にもスピーディーにアプローチできます。中級編・上級編のほか、JavaScript初心者向けの初級編もあります。
2.とほほのJavaScriptリファレンス
杜甫々（とほほ）氏が運営するWebサイトとほほのWWW入門の一コンテンツとして、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業界のエンジニア職を専門とする転職エージェントです。最新の技術情報や業界動向に精通しており、現状は転職のご意思がない場合でも、ご相談いただければ客観的な市場価値や市場動向をお伝えし、あなたの「選択肢」を広げるお手伝いをいたします。
「将来に向けた漠然とした不安がある」「特定のエンジニア職に興味がある」など、ご自身のキャリアに何らかの悩みを抱えている方は、ぜひ無料のオンライン個別相談会にお申し込みください。業界知識が豊富なキャリアアドバイザーが、一対一でさまざまなご質問に対応させていただきます。
「個別相談会」に申し込む
転職支援サービスに申し込む
※転職活動を強制することはございません。
レバテックキャリアのサービスについて
