スライドショー スライドショー スライドショー

【JavaScript完全入門ガイド】初心者向け学習ロードマップ必勝正攻法

JavaScript入門の勉強法を知りたい!
JavaScript入門者向けの本を教えてほしい

JavaScript入門者の多くは、効果的な勉強法や教材を探しているのではないでしょうか。

JavaScriptを習得すれば、スマートフォンのアプリやチャットボット、ゲームなど、さまざまなものを作れます。

この記事では、入門者が必ず習得できるJavaScriptの勉強法や学習ロードマップ、おすすめの教材を紹介します。JavaScript入門者があっという間に上級者になるコツが掴めるので、ぜひ最後までご覧ください。

JavaScriptについて詳しく知りたいという方は、こちらの記事をご覧ください。

JavaScriptとは?初心者向けに言語の特徴やできること、使い方を解説
更新日 : 2021年7月14日

JavaScriptの入門知識

JavaScriptの入門知識

まずはJavaScriptについて、入門者が押さえておくべき基礎知識を解説します。

なお、JavaScriptの概要については、下記の動画でも詳しくご説明しています。JavaScript入門者向けにわかりやすく解説していますので、ぜひご覧ください。

JavaScriptとは何か

JavaScriptとは何か

JavaScriptは、Webサイトにアニメーションなどの動きを与えるために開発されたプログラミング言語です。企業サイトやECサイトなど、多くのWebサイトはJavaScriptで開発されています。

例えばJavaScriptを利用すれば、Webサイト上で下記のようなことを実現できます。

  • 画像をスライドさせる
  • ポップアップウィンドウを表示させる
  • Googleの地図をWebブラウザ上で自由に動かす
サーバーサイドとフロントエンドのプログラミング言語

ユーザビリティが追求されるフロントエンド開発で、JavaScriptは主流の言語です。

JavaScriptとJavaの違い

JavaScriptとJavaの違い

JavaScriptとJavaは名前が似ていますが、異なるプログラミング言語です。

一般的にJavaScriptはフロントエンド開発に、Javaはバックエンド開発に使われます。

JavaScriptは、開発当初「LiveScript」と呼ばれていました。

LiveScriptを開発していたネットスケープ・コミュニケーションズという会社は、当時注目を集めていた「Java」の開発元であるサン・マイクロシステムズ(現在はOracle)と提携していたため、LiveScriptをJavaScriptという名前に変更しました。

JavaとJavaScriptの違いについて詳しく知りたい方は、以下の記事をご覧ください。

JavaとJavaScriptって何が違うの?わかりやすく4つの違いで徹底分析
更新日 : 2021年1月25日

JavaScriptを学ぶべき理由とは

JavaScriptを学ぶべき理由は、習得すれば仕事に困らないからです。

JavaScriptは人気のプログラミング言語ランキングで、常に上位を獲得しています。GitHub社が毎年実施する「最も使用されているプログラミング言語ランキング」を参照すると、JavaScriptは長い間、トップの座を守り続けていることがわかります。

またJavaScriptは、Webブラウザがあればすぐ開発できる点も、プログラミング初心者におすすめしたいポイントです。

JavaScriptでできること

JavaScriptでできること

続いて、JavaScriptでできることを具体的に紹介します。

JavaScriptでできることについて、詳しくは以下の記事をご覧ください。

JavaScriptでできることや作れるものって? 超初心者向けにわかりやすく解説!
更新日 : 2021年6月17日

要素の表示・非表示を切り替え

JavaScriptを使うと、Webサイト上に表示されている画像やテキストなどの要素に動き(アニメーション)をつけられます。

厳密にいうと、JavaScriptを使えば下記のように、要素の表示状態を切り替えることができるのです。

  • ある要素にマウスカーソルが重なった場合だけ、特定の要素の動きを表示する。
  • ある要素からマウスカーソルが離れた場合だけ、特定の要素の動きを非表示とする。
  • ある要素をクリックしたら、特定の要(メニューや画像など)が表示される。

JavaScriptで要素の表示状態を切り替えてみよう!

JavaScriptによる要素の表示切り替え

例えば下記のコードを使用すれば、表示・非表示ボタンをクリックすることで、上図のように矢印を表示・非表示できます。

JavaScriptでWebサイト上にある要素の表示を切り替える方法を、下記のコードで実現できます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>JavaScriptの説明</title>
  </head>
  <body>
    <script>
     /**
      * メッセージの表示・非表示を切り替え
      * @param {string} mode 表示(disp)または非表示(hide)を指定する
      */
      function ChangeDisp(mode)
      {
        // 表示モードの場合は、ID:messageの要素を表示状態とする
        if (mode =="disp")
        {
          document.getElementById("message").style.display="block";
        }
        // 非表示モードの場合は、ID:messageの要素を非表示状態とする
        else
        {
          document.getElementById("message").style.display="none";
        }
      }
    </script>
    <form>
      <div id="message">Sample</div>
      <input type="button" value="メッセージ表示" onclick="ChangeDisp('disp')">
      <input type="button" value="メッセージ非表示" onclick="ChangeDisp('hide')">
    </form>
  </body>
</html>

画像スライダー

JavaScriptを使えば、画像スライダーを表示できます。

Webサイトを見ていると、画像が自動的に切り替わっていくスライドショーをご覧になったことがあるでしょう。そのような表示方法を「画像スライダー」といいます。

JavaScriptで画像スライダーを作ってみよう!

JavaScriptを使って、画像スライダーを作成する方法を説明します。

まずは画像を用意しましょう。任意の画像を3枚用意し、img01.jpg、img02.jpg、img03.jpgというファイル名で保存します。

画像スライダーのファイル構成

次に、img01.jpg~img03.jpgと同階層にsample.htmlというファイルを用意し、下記のコードをコピー&ペーストして保存してください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>JavaScriptの説明</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css">
  <style>
    .swiper-container {
      text-align: center;
    }
  </style>
</head>
<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script>
  <!-- Slider main container -->
  <div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
      <!-- Slides -->
      <div class="swiper-slide"><img src="img01.jpg" alt=""></div>
      <div class="swiper-slide"><img src="img02.jpg" alt=""></div>
      <div class="swiper-slide"><img src="img03.jpg" alt=""></div>
    </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>
    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
  <script>
    var mySwiper = new Swiper('.swiper-container', {
      effect: "slide",
      loop: true,
      autoplay: 5000,
      pagination: '.swiper-pagination',
      nextButton: '.swiper-button-next',
      prevButton: '.swiper-button-prev',
    })
  </script>
</body>
</html>

これで画像のスライダーは完成です。

sample.htmlをダブルクリック、または右クリック→「プログラムから開く」よりWebブラウザを選択して表示してみましょう。Webブラウザに以下のような画面が表示され、両サイドの矢印ボタンをクリックする、または一定時間待つことで画像が切り替われば成功です。

画像スライダー 表示結果

Swiperというライブラリを使用しています。

ライブラリとは、よく使うプログラムがまとまったファイルのことです。プログラミングではライブラリをよく使用するので、覚えておきましょう。

画像の拡大表示

JavaScriptを使えば、Webサイトの画像を簡単に拡大できます。

Webサイトを閲覧中に、小さくて内容がよく見えない画像が表示されていることがあります。そのような画像をクリックすると、画像が拡大表示されるのを見たことがあるのではないでしょうか。

このようなとき、画像要素はJavaScriptで拡大表示されています。

JavaScriptで画像を拡大表示しよう!

まず任意の画像を2枚用意し、img_large.jpg、img_small.jpgというファイル名で保存します。

画像拡大 ファイル構成

次に、画像ファイルと同階層にsample.htmlというファイルを用意し、下記のコードをコピー&ペーストして保存してください。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>JavaScriptの説明</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/css/lightbox.css">
  </head>
  <body>
      <a href="img_large.jpg" data-lightbox="abc" data-title="写真拡大">
          <img src="img_small.jpg" alt="サンプル写真">
      </a>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/js/lightbox.min.js"
      type="text/javascript"></script>
  </body>
</html>

これで画像拡大表示の準備は完了です。sample.htmlをWebブラウザで表示してみましょう。

画像をクリックして、画像がポップアップで表示されれば成功です。

画像拡大 表示結果

lightbox2というjQueryプラグインを使用しています。

なおjQueryとは、JavaScriptで書かれたプログラムのことです。jQueryを使えば、短いコードで簡単にHTMLやCSSを操作できて開発の効率が上がるため、頻繁に使われます。

jQueryについて、詳しくは以下の記事で解説しています。

jQueryとは?JavaScriptとの違いから使い方まで徹底解説【初心者向け】
更新日 : 2021年3月15日

Googleマップ上で移動する

Googleマップ上で場所を移動するという動きも、JavaScriptで実現できます。

Webサイトに所在地や住所などを表示するために、Googleマップがよく使われます。

Googleマップは、JavaScriptを活用したAjax(非同期通信)という技術を採用しています。このAjaxにより、まるで画面上を移動しているように見せることができるのです。

JavaScript入門者向けの学習ロードマップ

入門者向けの学習ロードマップ

続いて、JavaScriptを効率良く習得するための入門者向け学習ロードマップを紹介します。

<入門編・JavaScriptの学習手順>

  • 1.JavaScriptの開発環境を準備する
  • 2.JavaScriptの書き方を練習する
  • 3.学習サイト・本を活用する
  • 4.JavaScriptでオリジナルWebサイトを作成する

順番に見ていきましょう。

1.JavaScriptの開発環境を準備する

まずはJavaScriptの開発環境を準備しましょう。

JavaScriptの開発環境は、主に下記の3つです。

  •  Webサービス
  •  デベロッパーツール
  • HTMLファイル・JSファイル

ひとつずつ解説します。

Webサービス

Webサービスを使えば、JavaScriptの開発環境を構築する必要がありません

例えばpaiza.ioにアクセスすれば、すぐにJavaScriptのコードを書いて練習できます。

このようなサービスはたくさんありますので、お気に入りのWebサービスを探してください。

デベロッパーツール

Webブラウザのデベロッパーツールでも、JavaScriptでWebサイトを開発できます。

例として、Google Chrome上でJavaScriptでWebサイトを開発する方法を解説します。

Google Chromeにおけるデベロッパーツールの起動方法

まず、Google Chromeを起動します。

  • 1.Google Chromの画面右上のボタン(Google Chromeの設定)をクリック
  • 2.「その他のツール」をクリック
  • 3.「デベロッパーツール」で、Googleのデベロッパーツールを起動する

デベロッパーツールは「Ctrl + Shift + I」または「F12」でも起動できます。

デベロッパーツールとは、HTML、CSS、JavaScriptといったコードの確認、読み込み速度の検証、メモリ使用量の確認など、開発者向けの機能を搭載した便利なツールです。

ChromeにおけるJavaScriptの実行結果

続いて、JavaScriptの表示結果を下記の手順で確認してみましょう。

  • 1.デベロッパーツールの上部にある「Console」をクリックする
  • 2.画面下部に入力画面が表示されるので、JavaScriptを入力する

確認したいJavaScriptが1行の場合は、入力してEnterキーを押すとすぐに実行結果が表示されます。

複数行のJavaScriptを入力したい場合は、改行時に「Shift + L」を押しましょう。すべてのプログラムの入力が完了した時点で、Enterキーを押すと実行結果を確認できます。

HTMLファイル・JSファイル

実案件では、JavaScriptをHTMLファイル内に書き込んだり、外部にJSファイルを作成してHTMLファイルに読み込ませたりすることで、JavaScriptでWebサイトを開発できます。

HTMLファイル内に直接書き込む場合は、<script></script>タグでJavaScriptのコードを囲みます

HTMLファイルを実行すると、JavaScriptのコードが反映されます。

外部ファイルを利用する場合は、HTMLファイルとは別にJSファイルを作成して、JavaScriptを記述します。その後、HTMLファイルにJSファイルを読み込むという手順です。

JavaScriptをHTMLファイル内に書く方法と、JSファイルをHTMLファイルに読み込ませる方法については、こちらの記事で詳しく解説しています。

JavaScriptの書き方、基本ルールをコードつきで徹底解説!
更新日 : 2021年6月25日

2.JavaScriptの書き方を練習する

JavaScriptの書き方を練習する

JavaScriptの開発環境を構築したら、JavaScriptの書き方を練習しましょう。

サンプルコードとともに、JavaScriptの書き方を解説します。

文字列を出力する

まずは、デベロッパーツールのコンソール上に、、「Hello!World!」という文字列を出力してみましょう。

// コンソールに「Hello!World!」を表示
console.log('Hello!World!');

実行して「Hello!World!」と出力されれば成功です。

Hello!World! 実行結果

現在時刻を表示する

続いて、JavaScriptで「現在時刻」を表示してみましょう。

// Dateオブジェクト生成
var now = new Date();
// コンソールに現在時刻を表示
console.log(now); 

上記サンプルコードを実行すると、現在時刻がコンソールに出力されます。また、数秒間経過した後に改めて実行すると、コンソールに出力される値が1回目とは異なっていることを確認できます。

現在時刻表示の実行結果

条件分岐(if文)

「もし◯◯だったら▢▢、そうでなければ△△を行う」という条件分岐は、JavaScriptのほか、あらゆるプログラミング言語で使用される構文です。

JavaScriptの条件分岐(if文)は下記のように記述します。

// 変数ageに年齢を設定
var age = 25;
// 20歳以上であれば成年、20歳未満であれば未成年と判断する
if (age >= 20) {
    console.log("成年です。");
}else{
    console.log("未成年です。");
}

上記サンプルを実行すると、変数ageは20以上という条件を満たすため、コンソールに「成年です。」と出力されます。なお、変数ageの値を20未満にして実行すれば「未成年です。」と出力されます。

条件分岐の実行結果

繰り返し処理(for文)

条件分岐を学んだ後には、繰り返し処理を学習しましょう。

例えば、ある文字を100回表示するには100回書く必要があります。もし10万回だったら10万回書くことになりますが、効率的ではありません。

そんな問題を解決するのが、繰り返し処理です。

JavaScriptには、繰り返し処理を行うための構文がいくつか存在しますが、今回はfor文をご紹介します。

下記のサンプルコードは、変数iが10未満の間、繰り返し処理を行います。

let str = '';
// 変数iが10以下の場合は繰り返す
for (let i = 0; i < 10; i++) {
    str = str + '*';
    console.log(str);
}

上記サンプルコードを実行すると、変数iが0~9までの間「*」を1つ増加します。その結果を、繰り返しコンソールに出力します。

繰り返し処理の実行結果

クラスとメソッド

クラスとは、データの種類を定義するコマンドです。「class」コマンドの後にプロパティ(変数や定数)やメソッド(関数)を記述して、データの種類と動きを決めます。

JavaScriptにおける、クラス・メソッドの書き方は下記のとおりです。

// クラス Samuraiを定義する
class Samurai {
  // 引数を加算するメソッド add を定義する
  add(x, y) {
    return x + y;
  }
}
// クラスSamuraiのオブジェクトを生成する
var samurai_class = new Samurai();
// addメソッド呼び出し
samurai_class.add(3, 7);

上記サンプルを実行すると、addメソッドの引数として指定した「3」と「7」の合計である「10」がコンソールに出力されます。

クラスとメソッドの実行結果

JavaScriptのクラスやメソッド、そのほかサンプルについては、以下の記事で詳しく解説しています。

3.学習サイト・専門書を活用する

JavaScriptの基本的な書き方を学んだところで、さらにスキルを磨きましょう。

楽しくスキルアップするには、学習サイトや専門書の活用がおすすめです。

インターネットには、動画やスライドを使ってJavaScriptをゲーム感覚で学べる学習サイトが豊富にあります。また専門書を読むことで、JavaScriptに関する体系的な知識が身につきます。

JavaScriptの学習サイトや専門書については、この記事内で後ほど詳しくご紹介します。

4JavaScriptでオリジナルWebサイトを開発する

オリジナルWebサイトを開発する

学習の集大成として、JavaScriptを使ってオリジナルのWebサイト開発にチャレンジしましょう。

Webサイトを開発するためには、HTMLやCSSなどの基本的な知識が必要です。また、Webサイトの開発ではエラーがつきものです。

Webサイトの制作過程で、JavaScriptの知識だけでなく、エンジニアとしての問題解決力を養えます

就職や転職時には、ポートフォリオとして作成したオリジナルのWebサイトを活用できます。ポートフォリオ作成方法については、こちらの記事で詳しく解説しています。

未経験からフロントエンドエンジニアに転職!ポートフォリオの作成手順とコツを解説
更新日 : 2021年2月8日

JavaScript入門者向けの本

JavaScript入門者向けの本

続いて、JavaScript入門者におすすめの本を4冊ご紹介します。

30時間アカデミック JavaScript入門

『 30時間アカデミック JavaScript入門』は、大学や専門学校のテキストとして採用されている本です。Webアプリケーションの作成がゴールとして設定されています。

JavaScriptの基礎やHTML、CSSをはじめ、Webブラウザにユーザーのデータを保存できるWeb Storageや、JavaScriptの代表的なライブラリであるjQueryなどについて、幅広い知識を身につきます。

3ステップでしっかり学ぶ javascript入門

『3ステップでしっかり学ぶ javascript入門』は、予習→実践→復習という3ステップで構成されており、JavaScriptの基礎をしっかり学習できます。

全ページフルカラーでイラストや図が豊富なので、スムーズに読み進めることができるでしょう。

本当によくわかるJavaScriptの教科書 

『本当によくわかるJavaScriptの教科書 』も、JavaScript入門者におすすめしたい1冊です。プログラミングの知識がゼロでも、問題なくJavaScriptを学べます。

内容はJavaScriptの文法、jQueryやWeb APIなどについて、基礎から実践までを幅広くカバーしています。また、スライドショーや地図などのWebサイト上でよく見る機能についても、詳しく解説されています。

この本を読めば、デザイン性が高いWebサイトを作るスキルが身につきます。

確かな力が身につくJavaScript「超」入門 第2版

『確かな力が身につくJavaScript「超」入門 第2版』は、累計3万部を突破した人気が高いJavaScriptの入門書です。

特徴は、実際のWebサイト開発で使えるJavaScriptのサンプルコードが豊富に紹介されていることです。

解説がわかりやすく、初心者でもスムーズに理解できます。これからJavaScriptを学ぶ入門者に、おすすめの1冊です。

JavaScript入門者におすすめの本について、詳しくはこちらの記事で紹介しています。

挫折したくない人向け!JavaScript勉強本 14選
更新日 : 2021年1月26日

JavaScript入門者向け学習サイト

JavaScript入門者向け学習サイト

最近では、さまざまなプログラミング学習サイトが公開されています。そのなかでも、特にJavaScript入門者におすすめしたい学習サイトをご紹介します。

Progate

引用元:Progate

Progateは世界的な人気を誇るプログラミング学習サイトで、ユーザー登録者が210万人を超えています。

かわいい犬のキャラクター「にんじゃわんこ」が登場するスライドを見ながら、自分のペースで勉強できます。

実際にコードを書いて学べる点も、JavaScript入門者におすすめです。

ドットインストール

ドットインストールは、3分動画を見ながらプログラミングを学べる学習サイトです。

3分という短い時間で、要点を簡潔に説明しているのが特徴です。集中力を維持したまま、効率的に学べます。

スマートフォンでも視聴できるので、空き時間に有意義に学習できます。

paizaラーニング

paizaラーニングも、1本3分の動画と練習問題でプログラミングを学べるサイトです。動画で学んだコードを、コードエリアに書いて学習できます。

環境構築を準備する必要がなく、JavaScriptを習得できる手軽さが魅力です。

また、動画のナレーションをプロの声優さんが担当しているため、とても聞きやすいという点も人気の秘密です。

最短でJavaScriptを習得するならスクールを活用

JavaScriptに限らず、プログラミング言語の学習を始めるときには、下記のとおりさまざまな困難にぶつかるものです。

なかなかやり遂げられ無い、挫折してしまった
時間が足りない
わからないコードがあっても相談できず、一人で解決できない

独学ではモチベーションが維持できない方や、もっと効率的に短期間でJavaScriptを習得したい方は、SAMURAI ENGINEER(侍エンジニア)の無料カウンセリングでご相談ください。

弊社は、完全オーダーメイドのカリキュラムと専属講師によるマンツーマンレッスンを採用しています。

28,000名の指導実績があり、多くの未経験者を正社員やフリーランスのエンジニアとして輩出してきました。これは、経験豊富なアドバイザーが、受講生の希望や不安・悩みに寄り添い、最適な学習プランを提示してきた結果といえます。

完全オンラインで、ご自宅やコワーキングスペースなど、リラックスできる環境で受講していただけますので、お気軽にご相談ください。

無料カウンセリングはこちら

まとめ

JavaScriptは人気が高いプログラミング言語の1つであり、今後も高い需要が期待できます。習得すればエンジニアとして、またビジネスパーソンとしても、幅広く活躍できます。

JavaScriptに入門したいと決意した方は、無理のない学習法で着実にスキルを習得しましょう。

この記事のおさらい

押さえておきたい!JavaScriptの入門知識は?

JavaScriptを使えば動きのあるWebサイトや、スマートフォンのアプリ、ゲームを作れます。JavaScriptを使えば、画像スライダー、ポップアップウィンドウの表示、Googleマップ上の自由な操作などを実現できます。

JavaScript入門の学習ロードマップは?

JavaScript入門の学習ロードマップは、下記のとおりです。
 1.JavaScriptの開発環境を準備する
 2.JavaScriptの書き方を練習する
 3.学習サイト・本でJavaScriptの知識を深める
 4.JavaScriptでオリジナルWebサイトを作成する

JavaScript入門本のおすすめは?

JavaScript入門者には、下記の4冊がおすすめです。
・『30時間アカデミック JavaScript入門』
・『3ステップでしっかり学ぶ javascript入門』
・『本当によくわかるJavaScriptの教科書』
・『確かな力が身につくJavaScript「超」入門 第2版』