【初心者向け】JavaScriptの基礎を初心者でも分かりやすくご紹介

Javascriptは、多くのWebサービスで使用されている技術で、HTMLやCSSと並び欠かすことのできないものとなります。Javascriptを習得することで、Webサービスへの機能の追加ができます。

この記事では、プログラミングの初学者やWeb制作などにチャレンジしたい方向けに、Javascriptの概要や基本構文、活用方法などご紹介したいと思います。

JavaScriptとは

Javascriptは、Webページに動的な機能を追加することができるプログラミング言語の一つです。

主にクライアントサイドで実行されることが多く、HTMLやCSSとともにWeb開発の三大要素の一つとして扱われます。Javascriptは、1995年にNetscape Communications Corporationによって開発されましたプログラミング言語になります。

当初は、Webページにインタラクティブな要素を追加するために使用されていましたが、現在では、様々なプラットフォームで使用されています。

基礎文法

変数、演算子、条件分岐、ループなど、Javascriptの基礎的な文法について説明します。

変数

変数は、値を保存するための入れ物のようなものです。変数には、文字列や数値、真偽値などの様々なデータ型を格納することができます。変数を宣言するには、letやconstを使います。

例えば、以下のように変数を宣言して値を代入することができます。

let message = "Hello, World!";
const pi = 3.14;
let isCorrect = true;

letは変数で値の書き換え可能ですが、constは定数のため一度代入した値は書き換えられません。

演算子

Javascriptには、四則演算や比較演算などの様々な演算子があります。

例えば、以下のように演算子を使って計算することができます。

let x = 10;
let y = 3;
let z = x + y; // 加算[13]
let a = x * y; // 乗算[30]
let b = x > y; // 比較（trueが代入される）

条件分岐

条件分岐は、ある条件が満たされた場合にだけ処理を実行するために使用されます。Javascriptには、if文やswitch文があります。

例えば、以下のようにif文を使って条件分岐をすることができます。

let age = 20;

if (age >= 20) {
  console.log("成人です"); //「成人です」がコンソールに出力される
} else {
  console.log("未成年です");
}

if()内に真偽値を判定する条件式を書きます。「真」の時に{}内の処理が実行されます。「偽」の時else以降の{}内の処理が実行されます。

switch文では、対象として設定した値が、いずれかの条件文の値と一致するかどうかを調べ処理を分けることができます。

switch(num){
    case 20:
        console.log('20歳です')
        break;
    default :
        console.log('20歳ではありません')
}

ループ

ループは、同じ処理を繰り返し実行するために使用されます。Javascriptには、for文があります。

例えば、以下のようにfor文を使ってループ処理をすることができます。

for (let i = 0; i < 10; i++) {
  console.log(i); //[0,1,2,3,4,5,6,7,8,9]をコンソールに出力
}

繰り返しの条件は、for(開始する変数 ; 繰り返しの終了条件 ; 変数の変化量)で指定します。

※i++はインクリメントで、iを1ずつ増やすことを意味します。

関数の定義と呼び出し方

関数の定義、引数、戻り値、スコープなど、Javascriptでの関数の基礎的な使い方について説明します。

Javascriptでは、関数を定義することで、同じ処理を何度も繰り返すことができます。関数を使うことで、コードの再利用性が高くなり、効率的なコーディングが可能になります。

関数の定義方法は以下のようになります。

function 関数名(引数1, 引数2, ...) {
  処理
  return 戻り値;
}

関数名：functionの直後に、処理を定義します
引数：関数内で使用する値を引数として、受け取ります。複数の引数を指定することができます
戻り値：関数内で処理を実行した後、returnの直後に、指定した値を関数に返却することができます

例えば、次のような関数を定義してみましょう。

function add(a, b) {
  return a + b;
}

let result = add(3, 5);
console.log(result); // 8をコンソールに出力

この例では、add関数を定義し、引数として2つの数値を受け取り、それらを足し合わせた結果を返します。

別の箇所で、add関数を呼び出して、引数に3と5を渡しています。add関数は、3と5を足し合わせた結果である8を返します。そして、その結果を変数resultに代入し、console.log()を使って結果を出力しています。

配列とオブジェクトの操作

Javascriptでは、配列やオブジェクトを使ってデータを管理することができます。配列は、複数の値を格納することができるデータ型です。オブジェクトは、プロパティと値をペアで格納することができるデータ型です。

配列

配列の定義方法は以下のようになります。

const 配列名 = [要素1, 要素2, ...];
var fruits = ["りんご", "バナナ", "みかん"];

JavaScriptには、配列やオブジェクトを扱うための便利なメソッドが用意されています。

配列メソッドには、forEach、map、filterなどがあります。

push ~配列に値を追加する~

定義された配列にpushメソッドを使用することで、配列の最後尾に、値を追加することができます。

fruits.push("イチゴ");
console.log(fruits); // ["りんご", "バナナ", "みかん", "イチゴ"]

この例では、配列のpush()メソッドを使って、新しい要素である「イチゴ」を配列に追加しています。そして、console.log()を使って配列を出力しています。

forEach ~配列内の繰り返し~

Javascriptのループ処理で、For文をご紹介しましたが、配列ではforEach文を使用することで、配列内の値を一つずつ取り出し、繰り返し処理を実行することができます。

// forEachメソッド
const fruits = ['apple', 'banana', 'orange'];
fruits.forEach(function(item, index) {
  console.log(`${index}: ${item}`); //[1:apple 2:banana 3:orange]が出力
});

この例では、forEach()内のfunction関数処理に、配列内のitem（配列の要素）とindex（配列の番号）が、一つずつ渡され、繰り返し処理が実行されます。

文字列内でJavascriptの変数や定数を使用する場合は、文字列全体を“（バッククォート）で囲み、${変数名・定数名}を使用します。

map ~配列の繰り返し②~

mapメソッドでは、forEachメソッドと同様に、配列の要素を取り出して繰り返し処理をします。
forEachとの大きな違いは、mapメソッドでは、新しい配列を作成して返却してくれるところです。

// mapメソッド
const numbers = [1, 2, 3];
const doubledNumbers = numbers.map(function(num) {
  return num * 2;
});
console.log(doubledNumbers); // [2, 4, 6]

この例では、mapメソッド内で繰り返し処理を実行し、numbersの配列の要素を2倍にした値をdoublednumbersの新しい配列に格納しています。

filter ~配列の要素を抽出~

filterメソッドでは、配列の値を指定した条件が真になる時、値を返却して新しい配列を作成します。

// filterメソッド
const scores = [80, 90, 70, 60];
const passedScores = scores.filter(function(score) {
  return score >= 80;
});
console.log(passedScores); // [80, 90]

この例では、filterメソッド内で、scores配列の要素が80以上の数字のみ返却して、新しくpassedscores配列に格納しています。

オブジェクト

オブジェクトは、配列と同じく複数の値を定義できるデータ型ですが、大きな違いは、プロパティと値をペアで格納することができるという違いです。

// オブジェクト
const person = {
  name: 'John',
  age: 30,
  job: 'Web Developer'
};
console.log(person.name); // 'John'
person.name = 'Mike';
console.log(person.name); // 'Mike'

DOM操作（HTMLの操作）

Javascriptは、HTML文書の中身や構造にアクセスするために、DOM（Document Object Model）を使います。DOMは、HTML文書のツリー構造にアクセスするためのAPIです。

Javascriptを使って、DOMを操作することで、HTML文書の要素や属性を取得したり、変更したり、削除したりすることができます。

例えば、以下のように、DOMを使ってHTMLの要素を取得し、その内容を変更することができます。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>DOM Example</title>
  </head>
  <body>
    <p id="my-paragraph">Hello, World!</p>
    <button onclick="changeText()">Click me!</button>
    <script>
      function changeText() {
        const paragraph = document.getElementById("my-paragraph");
        paragraph.innerHTML = "Goodbye, World!";
      }
    </script>
  </body>
</html>

上記の例では、HTMLのp要素のid属性が”my-paragraph”である要素を取得し、その要素の内容をinnerHTMLプロパティを使って”Goodbye, World!”に変更することができます。

document.getElementById()では、括弧内に指定したIDを持つHTMLのDOMを取得します。

また、DOMを使って、HTML要素の属性を取得・設定することもできます。

以下の例では、input要素のvalue属性を取得して、アラートダイアログに表示しています。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>DOM Example</title>
  </head>
  <body>
    <input type="text" id="my-input" value="Hello, World!">
    <button onclick="showInputValue()">Click me!</button>
    <script>
      function showInputValue() {
        const input = document.getElementById("my-input");
        const value = input.value;
        alert(value);
      }
    </script>
  </body>
</html>

以上のように、DOMを使ってHTML文書を操作することで、イベントの発火と組み合わせたり、動的なWebページを作成することができます。

Ajax通信（非同期通信）

Ajaxは、Asynchronous JavaScript and XMLの略語であり、非同期的にサーバーと通信するための技術です。Ajaxを使うことで、ユーザーがページをリロードすることなく、動的なコンテンツを表示することができます。

Ajax通信を行うためには、XMLHttpRequestオブジェクトまたはfetch APIを使用します。これらのオブジェクトを使うことで、ブラウザはサーバーからデータを取得し、ページをリロードすることなくコンテンツを更新することができます。

XMLHttpRequest

XMLHttpRequestオブジェクトを使ったAjax通信の方法は以下のとおりです。

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/data');
xhr.onload = function() {
  if (xhr.status === 200) {
    console.log(xhr.responseText);
  } else {
    console.log('エラーが発生しました。');
  }
};
xhr.send();

上記のコードでは、XMLHttpRequestオブジェクトを生成し、open()メソッドを使用して、HTTPリクエストの種類と送信先のURLを指定します。次に、onloadプロパティにコールバック関数を割り当て、レスポンスを処理します。最後に、send()メソッドを使用して、リクエストを送信します。

fetch API

fetch APIを使ったAjax通信の方法は以下のとおりです。

fetch('https://example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

上記のコードでは、fetch()関数を使用して、HTTPリクエストを送信し、then()メソッドでレスポンスを処理します。レスポンスをJSON形式に変換するには、responseオブジェクトのjson()メソッドを使用します。最後に、catch()メソッドを使用して、エラーを処理します。

以上が、XMLHttpRequestオブジェクトとfetch APIを使用したAjax通信の方法です。Ajax通信を行う場合には、これらのオブジェクトを使って、非同期的にデータを取得してコンテンツを更新することができます。

ライブラリやフレームワーク

Javascriptのライブラリやフレームワークは、より効率的な開発や機能の拡張に役立ちます。ここでは、代表的なライブラリやフレームワークの特徴や使い方、メリット・デメリットについて解説します。

jQuery

まずは、jQueryについてです。jQueryは、HTMLドキュメント内の要素を簡単に操作できるようにするライブラリです。セレクタやイベントハンドラ、アニメーションなどの機能があり、簡潔で直感的なコードで記述できます。また、ブラウザ間の互換性も考慮されているため、ブラウザの種類にかかわらず動作することができます。

React

次に、Reactについてです。Reactは、Facebookが開発したUIライブラリで、ビューのコンポーネント化による再利用性や、データの自動同期による高いパフォーマンスが特徴です。仮想DOMによるレンダリング方法が採用されており、変更があった部分だけを更新するため、パフォーマンスが向上します。また、Reactは、単一の責務を持つ小さなコンポーネントを作成しやすいため、プロジェクトの規模が大きくなっても保守性が高いというメリットがあります。

Angular

Angularについても紹介しておきます。Angularは、Googleが開発したフロントエンドフレームワークで、MVCパターンに基づいたアプリケーション開発が可能です。HTMLテンプレートによるビューの構築や、データバインディングによるデータの自動同期、依存性注入によるコンポーネントのテスト容易性などが特徴です。しかし、学習コストが高く、初心者には敷居が高いと言われています。

これらのライブラリやフレームワークは、プロジェクトの規模や目的、開発者のスキルセットなどによって選択する必要があります。また、どのライブラリやフレームワークを選んでも、常に最新の技術トレンドを追いかけることが重要です。

初心者向けJavascript無料学習サービス（英語サイト）

JavascriptはWeb開発やアプリ開発に欠かせない言語であり、学ぶことで多くの可能性が広がります。しかし、初めてJavascriptを学ぶ人にとっては、どこから始めたらいいかわからない場合があります。

そこで、無料でJavascriptを学べるサービスを紹介します。

Co decademy

Codecademyは、Javascriptを含む多くのプログラミング言語を学べるオンライン学習サービスです。Javascriptを学ぶためのコースが用意されており、基本から応用まで幅広く学べます。また、実際にコードを書いて動かすことができるインタラクティブな学習環境が用意されているため、手軽に学ぶことができます。

W3Schools

W3Schoolsは、Web開発に必要な技術を学べるサイトで、Javascriptの基本から応用まで学ぶことができます。実際にコードを書いて動かすことができるエディターが用意されており、学習した知識をすぐに試せます。

MDN Web Docs

MDN Web Docsは、Mozillaが提供するWeb開発に必要な技術を学ぶことができるサイトです。Javascriptの基本から応用まで幅広く学ぶことができます。また、実際のコード例を豊富に用意しており、コードの理解を深めることができます。

これらのサービスはすべて無料で利用できます。初心者にとっては手軽に学ぶことができるため、是非活用してみてください。