JavaScriptの基本の書き方12選｜注意点やおすすめ学習サイトとは？

JavaScriptとは

JavaScriptは、ブラウザで動くプログラミング言語です。HTML言語と組み合わせて、ウェブサイトのページ内の画像を拡大表示する、入力フォームのエラーをチェックする、表示している内容を更新するといった、「動的」なサイトを作れます。

JavaScriptとJavaの違い

JavaScriptは「ウェブサイトに動きをつける」という目的で作られ、ブラウザ上で動きます。Javaは「OSなどの実行環境に依存せずに実行できる」を目指したプログラミング言語です。

JavaScriptとJavaは全く異なるプログラミング言語で、JavaScriptができた当初は「LiveScript」という呼び方をされていましたが、当時人気のあったJavaにあやかってJavaScriptと名付けられたそうです。

JavaScript普及の背景

JavaScriptが発表された当時は、プログラミング言語としての評価はあまり高くなく、普及率は高くありませんでした。

しかし、GoogleがJavaScriptを使ったサーバーとの非同期通信である「ajax」を使ったGoogle Mapを発表し、JavaScriptが見直されることになりました。

そして現在では、prototype.jsやjQueryなどの様々なライブラリーが発表されています。

JavaScriptの基本の書き方12選

JavaScriptでプログラムを組むときの基本構文はC言語に似ています。

変数の定義方法、数値の扱い、関数、条件文、ループ処理などは、C言語の基本的な操作を知っていれば難しくはないでしょう。

文字列操作やデータ構造はC言語とは異なる操作方法になります。また、ブラウザで表示するという性質上、ファイルの出力は独自の方法になります。

JavaScriptの基本の書き方1：文を表示させる

JavaScriptで文を表示する方法としては「document.write」、「innerHTML」があります。

document.writeは、そのdocument.writeを記述した箇所に文を表示します。innerHTMLはページ内のタグに付与したidを指定し、そのidの内容を更新します。

これらはどちらも表示させる文にタグを含められます。

JavaScriptの基本の書き方2：ブロックをつくる

ブロックには「複数の文を1つの文とみなす役割」があり、制御フロー文（if、for、whileなど）で使います。

制御フロー文は、その文に対して実行する文を1つしか書けず、複数の文を実行したいときはブロックという括りにして、そのブロックを1つの文とみなして実行させます。

また、関数定義でもブロックを使います。関数は特定の動作を実現するためのものですから、必然的に複数の文を使うことになるためです。

JavaScriptの基本の書き方3：文字列の操作

JavaScriptでの文字列の操作には文字列のクラスのメソッドとして、連結、検索、置換、文字列の取り出しがあります。

連結は文字列に別の文字列をつなげます。置換は文字列内の指定文字列を別の文字列に置き換えます。文字列の取り出しは「何文字目から何文字を取り出すか」を指定します。検索は「別に指定した文字列が何文字目にあるか」を得ます。

連結は基本的に数値の足し算と同じ「+」を使うことが多いようです。

JavaScriptの基本の書き方4：出力する

初期のJavaScriptには、ファイルの出力の機能はありませんでした。

現在ではファイル出力のAPI（Application Programming Interface）を使ってファイルを出力できます。

APIを使ったファイル出力では、BLOB（Binary Large OBject）と呼ばれるデータ形式を使い、どのようなファイル形式か（文字列か、画像かなど）を指定します。

JavaScriptの基本の書き方5：変数を使う

変数とは「数値や文字列などのデータを入れておく箱」のようなもので、プログラミングでは計算結果などをこの変数に入れて数値や文字列などを保持します。

JavaScriptでの変数の宣言は「var 変数名 = 値;」、「var 変数名 = “文字列”;」となります。JavaScriptでは基本的に変数は宣言しなくても使えます。しかし、初期値を明確にするために、宣言するほうがよいでしょう。

JavaScriptの基本の書き方6：数値と演算

JavaScriptの数値計算方法は算術演算、代入演算、単項演算の3つがあります。

算術演算とは、四則計算、剰余、べき乗です。四則計算は一般的な計算と同じ+、-、*、/で、剰余は「%」を、べき乗は「**」を使います。

代入演算はx = x + 10;をx += 10;と書けます。これは四則計算と剰余で使えます。

単項演算は「++」と「–」があり、それぞれx = x + 1;をx++;、x = x – 1;をx–;と書けます。

JavaScriptの基本の書き方7：真偽値を表す

真偽値とは、真または偽のいずれかの値を取り、真は「true」、偽は「false」と表します。

真偽値は基本的に「条件に一致するか否か」の場面で使います。プログラム内で、値などの条件の真偽を保持する「フラグ」として使うことが多いようです。

JavaScriptの基本の書き方8：データ構造でまとめる

JavaScriptでは複数のデータを「塊」として扱う方法が2種類あり、それぞれ「配列」と「オブジェクト」と呼ばれています。

配列へのアクセスは0から始まる順序を指定し、配列名[0]、配列名[1]のように記述します。オブジェクトに格納したデータはオブジェクト名[‘キー名’]のように記述します。配列との違いは、キー名は配列のように数値に限定されず、文字列も使えます。

JavaScriptの基本の書き方9：条件文を使う

JavaScriptでの条件文は「if()」を使います。

ifに続いて条件を記述し、この条件に一致するとき（真のとき）に実行する文と、条件に一致しないとき(偽のとき)に実行する文を記述し、「if(条件){条件に一致するときの実行文}else{条件に一致しないときの実行文}」となります。

条件に一致しないときに実行する文がないときは、この個所は記述しません。

JavaScriptの基本の書き方10：ループ処理をする

JavaScriptでのループ処理は3種類あり、for文、while文、do while文と呼ばれています。

for文は基本的にループ回数が決まっているときに使います。while文は条件が一致している間ループします。while文はループ回数が0回、つまり一度もループしないこともあります。

do while文も条件が一致している間ループします。while文との違いはループ回数が1回以上になることです。

JavaScriptの基本の書き方11：関数を使う

関数とは、「特定の働きをするために処理をまとめたもの」です。関数を使うことを「関数を呼び出す」といった表現をします。

関数を作っておくと、複数の場所で同じ処理をしたいときにその処理をする関数を呼び出せばよく、何度も同じ記述をしなくてもよくなります。

JavaScriptの基本の書き方12：コメントを使う

コメントとは「プログラムの中で実行されない箇所」です。基本的にはコードの説明に使われます。また「コメントアウト」と呼ばれる、文を一時的に実行させないときにも使います。

コメントの書き方は、複数行に渡るときと、文の最後に書くときの2種類があります。複数行に渡るときは「/*」で始まり「*/」で終わります。/*と*/の間にコメントを記述します。文の最後に書くときは、「//」に続けてコメントを記述します。

JavaScriptを使う際の注意点

JavaScriptでプログラムを組む時にはいくつかの注意点があります。

まず、変数名や関数名を重複して定義してもエラーになりません。変数名を処理の途中で再定義するとそれより前の値が消えます。関数名を再定義すると後で定義したものが実行されます。

また、JavaScriptは基本的にHTMLファイルとは別のファイルに記述しますが、複数のファイルに記述するときは呼び出しの順番を考えなければなりません。

JavaScriptを学べるおすすめ学習サイト5つ

JavaScriptは「ブラウザがあれば動作を確かめられる」ということから、プログラミングの初心者でも学習しやすい言語の一つと言えるでしょう。

JavaScriptを学習するサイトは無料コースと有料コースがありますが、無料コースは基本的に「お試し版」で、本格的に学習するのであれば有料コースを利用することになるでしょう。また、法人コースも用意してあり、社員の研修用としても利用されているようです。

JavaScript学習サイト1：Progate

progateは、「プログラミングで人生の可能性を広げよう」をキャッチフレーズにしている学習サイトです。

レッスンは実際に動くプログラムを作る実践的なもので、使えるスキルが早く身につくでしょう。また、ブラウザでコードの記述と動作を確かめられるため、簡単な準備で始められます。

専用のスマートフォン用のアプリもあり、どこででも気軽に学習できる利点もあります。

JavaScript学習サイト2：ドットインストール

ドットインストールは短時間の動画で学習を進めていきます。JavaScriptは24のレッスンで構成されていて、基本的な使い方から様々なオブジェクトやイベントを使ったプログラム学習になっています。

有料会員になるとレッスン動画の再生速度を調節してじっくり学習したり、ソースコードの比較や検索もできるようです。

JavaScript学習サイト3：Udemy

Udemyはベネッセが運営している学習サイトです。開発言語以外にビジネススキルやデザインなどの学習もできます。

Udemyの特徴は講師を選べることと、学習の期限がないことです。それぞれの業界の専門家が講師になっているため、自分の学習方法に合った講師から学べて、また、学習の期限がないため、自分のペースで学習できます。

JavaScript学習サイト4：Schoo

Schooの特徴は、ウェブデザイン、語学、OAスキル、グラフィックなど多彩なカテゴリを「生放送」で学習する点です。

カテゴリ、講師、テキストのテーマから学習したい放送を視聴できます。有料コースでは生放送を録画したものを視聴でき、倍速再生で「必要なところだけ」を再生できます。

JavaScript学習サイト5：CODEPREP

CODEPREPは株式会社ギブリーが運営している、「ブック形式」の学習サイトです。

多くの学習サイトは動画などを使用していますが、CODEPREPでは本を模した画面で学習を進めます。

プログラム学習では10分程度の短い時間で進められる内容で、穴埋め形式や自由にコードを編集する形式のものがあります。編集したコードをダウンロードし、学習者の環境で動かしてみることもできます。

JavaScriptの基本を学んでスキルアップしよう

プログラミングの基本がわかっていれば、JavaScriptはさほど難しいものではありません。JavaScript独自の機能なども習得できるでしょう。

JavaScriptはサーバーとの通信ができ、サードパーティーのライブラリーなども充実しているため、JavaScriptを習得すればブラウザベースのプログラムを自在に作れるでしょう。