公開日：2023-07-01
JavaScriptの書き方とは
JavaScriptの基本的な使い方から書き方や構文まで詳しく解説
このページでは、JavaScriptの基本的な書き方について説明します。JavaScriptはブラウザさえあれば実行でき、難しい部分を内部で処理してくれたりと、初めてのプログラム入門にもオススメです。
そしてJavaScriptを覚えれば他の言語でも同じ部分は沢山あるので、Web制作以外をする際にも非常に役に立ちます。何より、少し上達するとWebページが動くのを確認しながら学べるので、楽しくモチベーションを維持してプログラミングを学べると思います。例を交えながら基本的な書き方から構文までご紹介します。
目次
JavaScriptとは？
JavaScript（ジャバスクリプト）とは、主にブラウザ上で実行されるプログラミング言語で、「アニメーション」「クリックやスクロールなどの検知」「計算処理」「サーバーとのデータのやり取り」など、幅広い用途で使用可能です。
近年では「Vue.js」や「react.js」などのフレームワークも登場し、スマートフォンアプリの作成やデスクトップアプリの作成も可能になりました。プログラミング入門者から上級者まで幅広い層に使用されている大人気言語です。
JavaScriptの使い方・動かし方
JavaScriptの動かし方は非常にシンプルで、メモ帳やエディタというテキスト編集ソフトを使い、HTMLの中に命令を書いてブラウザで表示させればすぐに実行されます。非常にハードルが低いため、すぐに学習を始めることが出来ます。
JavaScriptはソフトのインストールは必要か？
JavaScriptを学習するには2つのアプリケーションのインストールが必要です。
1つ目は、プログラムを記述する「テキストエディタ」というアプリケーションと、もう1つは「ブラウザ」というWebサイトを閲覧するアプリケーションです。
JavaScriptは基本的にはブラウザで動くスクリプト言語なので、テキストエディタで命令を記述→ブラウザで実行して確認、という流れになります。
JavaScriptの開発環境としてエディタをインストールする
JavaScriptの開発に「エディタ」は欠かせないです。WindowsやMacに元々入っている既存のテキスト編集ソフトでも開発することは可能ですが、「エディタ」はコードが書きやすく画面が表示されていたり文章に色がついてくれたりと、開発を助けてくれる機能が様々搭載されていて、効率が上がります。
エディタとは
エディタとは、テキストを編集するソフトウェアのことです。WindowsやMacに元々インストールされているソフトウェアでも書けなくはないですが、主にメモ帳のような使い方を想定されて作られているので、JavaScriptの開発には不向きです。プログラミングの勉強や開発に適した専用のエディタをインストールしましょう。
インストールすべきおすすめエディタは？
インストールすべきおすすめエディタは、最近では「Visual Studio Code」というエディタが人気です。Microsoftが開発したエディタで、豊富な拡張機能があり、自分好みにカスタマイズができます。
また、ギットハブ（GitHub)社が開発・公開している「Atom」というエディタや、「Sublime Text」というエディタも根強い人気があります。
HTML上で読み込む
JavaScriptはHTML上で読み込んで使用します。後ほど詳しく説明しますが、そのままHTMLファイルのscriptタグ内に記述して読み込む方法と、外部ファイルとして読み込む方法があります。
HTMLファイルのscriptタグ内に記述して読み込む方法
<script>
// ここに記述
</script>
外部ファイルとして読み込む方法
<script src="JavaScriptファイルまでのパス"></script>
ブラウザの開発者ツールを使う
JavaScriptのプログラミングでは、ブラウザの「開発者ツール」を多用します。「デベロッパーツール」「検証ツール」などとも呼ばれ、現状のHTMLに適用されているCSSの値などを確認することや、その場で仮に編集して検証することが可能です。
JavaScriptでは、ブレークポイントの設定という、プログラムの実行中に任意の行で処理を止める機能をよく使用します。「意図した動作をしているか」「現状の変数の値の確認」などに使います。
JavaScriptのテストツールを使う
Java Scriptでプログラムのテストを行うとき、「単体テスト」と「結合テスト」という２種類があります。
「単体テスト」とは関数など、小さい単位を対象にして、その中身の構造や変数の受け渡しが狙い通りに動いているか確認するテストです。
「結合テスト」とはそれぞれの単体機能を組み合わせて一気にテストすることです。
単体テストのツールでは、QUnit、Jasmine、Mocha、Jestなどがあり、中でも「Jest」は「React」産のアプリケーションのテストも行うことができ、近年人気が高いです。
JavaScriptの書き方
JavaScriptの書き方は、基本的には２通りの方法があります。1つはHTMLファイル上に <script>というタグを書いて、その中に命令を書いて実行する方法です。
もう1つは、script.jsなどの名前をつけたJavaScript独自のファイルを作り、それをHTMLから読みこんで実行する方法です。
HTML上で実行する場合の書き方
HTML上で実行する書き方は、最も手軽にJavaScriptを実行する書き方と言えるでしょう。
扱うファイルがHTMLファイル1つで済みますので、JavaScriptの扱いに慣れるまではこちらの実行方法で学ぶことをオススメします。
HTML上で読み込む
JavaScriptをHTML上で実行する場合は、<script></script>内に直接命令を書きます。
以前は<head>タグ内に書くのが主流でしたが、近年では</body>タグ直前に書くのが主流になっています。
例：HTML内に直接JavaScriptを記述（ダイアログで「ハロー快晴ですね」と表示させる）
<script>
alert("ハロー快晴ですね！");
</script>
外部ファイルとして取り込む
JavaScriptを外部ファイルとして読み込む場合は、まず拡張子「.js」のファイルを作り、その中に命令を書きます。次にHTML内に<script src=".jsファイルまでのパス"></script>と記述します。
こちらも</body>タグ直前に書くのが主流です。最後に</script>を付けるのを忘れがちなので注意してください。
例：HTMLと同じ階層にある「js」というフォルダの中に用意した「main.js」というファイルを読み込む
<script src="js/main.js"></script>
JavaScriptの基本的な書き方・記法
ここからはJavaScriptの基本的な書き方について説明していきます。何事も基礎が大事なのでゆっくり学んでいきましょう。ただ、最初から全部理解できなくても、後々に「ああ、そういうことだったのか！」と理解したという人も大勢いますので、すぐに理解できなくても心配しないで大丈夫です。
出力
まずはJavaScriptで数値を表示させてみましょう！多くの人が初めてのプログラミングになるかもしれません。たった一行で出力できるので、まずはプログラミング独特の世界観を味わってみてください。
コンソールに出力
JavaScriptの値を簡易的に表示させる方法は2種類あります。
1つはブラウザの検証ツールのコンソール欄に表示する方法です。
例：コンソール欄に「10」と表示
console.log(10);
ダイアログに出力
もう1つの表示方法は、ダイアログに出力する方法です。
例：ブラウザを開いた際に「10」とダイアログで表示
alert(10);
コメントアウト
コメントアウトとは、JavaScriptのソースコードを一時的に無効にする機能です。
開発の途中でまた使用する可能性がある場合や、プログラムの説明を書くときなどに使います。
-
一行コメントアウトの例 頭に // を記述
// alert("ハロー"); -
複数行コメントアウトの例 /* */ で囲む
/* ここにも文章やコードを書いてもOKです。表示されません。 alert("ハロー"); */ -
プログラムの説明の使用例
//「ハロー」と表示されるダイアログを表示する内容です。 alert("ハロー");
数値
JavaScriptでは数値が使用可能です。普通の算数のように計算でき、見積もりシステムなどに使用されています。整数も少数も同じ変数の中に格納できます。足し算、引き算、掛け算、割り算、余りの計算など、単純な四則演算が可能です。
例：数値による計算式
console.log(10 + 10); //出力結果：20
console.log(15 - 13); //出力結果：2
console.log(5 * 2); //出力結果：10
console.log(8 / 2); //出力結果：4
console.log(9 % 2); //出力結果：1 ※余りの計算
文字列
JavaScriptではテキストをシングルコーテーションやダブルコーテーションで囲むと、「文字列」として認識します。JavaScriptのプログラム内ではテキストは「文字列」として扱います。
記号は「""」で囲むダブルコーテーションでも、「''」で囲むシングルコーテーションでもどちらでも構いません。
例：シングルコーテーションとダブルコーテーションを使った文字列の記述
'ハロー' "ハロー"
また、+記号を用いることで文字列の連結も可能です。
"ハロー" + "お茶でもいかがですか？";
と記述すると"ハローお茶でもいかがですか？"という文字列になります。
Boolean・真偽値
Boolean・真偽値という考え方について説明していきます。JavaScript意外にもほぼ全てのプログラミング言語、C言語、C++、Java…などでも使われる大切な概念です。これをマスターすると表現の幅が一気に広がります。
例えば、「もしキャラクターが3歩進んだらジャンプする」のような指示が作れます。しっかりマスターしましょう。
比較演算
比較演算とは主に「 < 」「 == 」 などの記号を用いて、真偽値を求めるものです。
例えば、変数NUMの値を10として (NUM < 6)という比較演算のコードを書いた時の結果は、10は6より小さいので、答えは「false」になります。
NUMが10だとして(NUM == 10)という比較演算のコードを書いた時の結果は、NUMは10と等しいので結果は「true」になります。
このような比較演算を使用する時は、主に後から説明する「if文」と一緒に使用します。
例：変数NUMが6よりも大きいので、結果はfalse
var NUM = 10;
(NUM < 6)
例：変数NUMが10なので、結果はtrue
var NUM = 10;
(NUM == 10)
変数
プログラミング言語で最も重要な概念の1つが「変数」です。変数とはデータを一時的に保存する場所のことです。例えるなら変数はコップのようなもので、同じコップの中に「ミネラルウォーター」や「コーラ」など、中身を入れ変えて使用することができます。
そしてプログラムで「コップの中身を飲む」という命令を書いた時に、その中身によって「ミネラルウォーターを飲む」や「コーラを飲む」のように命令が変わっていきます。
JavaScriptの変数では「var」という宣言を使い、数値や文字列や関数など何でも代入（登録）することができます。文字列は先述したようにシングルコーテーション又はダブルコーテーションを使い、「var 変数名 = "文字列" 」というように記述します。
例1：drinkという変数にミネラルウォーターという文字列を代入
var drink = "ミネラルウォーター";
例2：numという変数に10という数字を代入
var num = 10;
また近年発表されたES6というJSの新バージョンから「let」と「const」が追加されました。
「let」はvarのように使用可能で、何度も値が変更される場合に使用されます。「const」は一度値を入れたら再度値を入れられない「定数」という概念です。
条件分岐
条件分岐とは、「もし～だったら〜を実行する」ということを指します。例えば、「もし天気がよかったらドライブに行こう」というような考え方です。
条件分岐にはif文やSwitch文という機能を使い分けます。一般的に、if文は分岐する条件が少ない時、Switch文は分岐する条件が多い場合に使用します。「Boolean・真偽値」の項目で説明した真偽値を使用します。
if文
条件が少ない場合はif文を使用することが多いです。
例：変数「weather」の値によってコンソールに出力する文字を変更
var weather = "clear";
if(weather == "clear"){
console.log("ドライブに行こう！");
} else {
console.log("お家で過ごそう");
}
□解説「weather」という変数の値が「clear」という文字だったらドライブに行こう！とコンソールに出力する。それ以外はお家で過ごそうと出力する。この場合は変数が「clear」なので、コンソールには「ドライブに行こう！」と表示されます。
Switch文
条件が多い場合はSwitch文を使用することが多いです。
例：変数 「menu」の値によってコンソールに出力する文字を変更
var menu = '朝';
switch( menu ) {
case '朝':
console.log('食パン');
break;
case '昼':
console.log('お弁当');
break;
case '夜':
console.log('ハンバーグ');
break;
case '深夜':
console.log('カップラーメン');
break;
}
□解説「menu」という変数によってコンソールに出力される食事内容が変わります。この場合、変数が「朝」なので、コンソールには「食パン」と表示されます。
繰り返し処理
繰り返し処理とは、同じような処理を繰り返したい時に使う文法です。
例えば、「扉をノックした」と5回表示させたい時に
console.log("扉をノックした");
console.log("扉をノックした");
console.log("扉をノックした");
console.log("扉をノックした");
console.log("扉をノックした");
と5回書くのは記述量も多く、見にくく、あまり良いソースコードとは言えません。このような場合はwhile文や、for文という繰り返し処理用の命令を使用します。
while文
While文は、「ある条件が成立している間、ある処理を繰り返す」というように使います。使用する場面を間違えると、無限にループしていまいプログラムが強制終了してしまう可能性もありますので気をつけて使用しましょう。次に紹介するfor文とシーンに合わせて使い分けをします。
基本文法は、
while (条件式) {
// ここに処理を書く
}
となります。
例：配列「fruitss」の中身を全て表示する
var fruitss = ["リンゴ", "バナナ", "ミカン"];
var i = 0;
while(i < fruitss.length){
console.log(flutss[i]);
i++;
}
結果：リンゴ、バナナ、ミカンと表示される
「i++」を記述し忘れると無限ループとなり、ずっと「リンゴ」「リンゴ」…と表示されてしまいますので、注意してください
for文
for文は繰り返し処理が必要な際にマストな文法で、while文よりもよく使われています。
基本文法は、
for (初期値;条件式;増減値) {
// ここに処理を書く
}
となります。
例：for文で「扉をノックした」とコンソールに10回表示させる（10回以上は表示しない）
for(var i = 0; i < 10; i++) {
console.log("扉をノックした");
}
※変数で使用した「i」とは、プログラミング文化における慣習的な変数名です。
関数
関数とは命令をひとまとまりにしたものです。例えば、ハローと表示する関数は以下のようになります。
// 定義
function sayHello(){
console.log("ハロー");
}
// 実行
sayHello();
このように記述します。
sayHelloの部分の関数名は自分でつけた任意のもので構いません。
アロー関数
アロー関数とは、2015年に標準として策定された新しいJavaScript(ES6)でより短く記述できる、通常のfunction式の代替構文です。関数の名前が省略された「無名関数」を利用する時などに便利です。
アロー関数を使用する時は、「 ⇒ 」という記号を用いて記述します。
例1：1秒後にコンソールに「ハロー」と表示する（従来の書き方）
setTimeout(function () {
console.log('ハロー');
}, 1000);
例2：1秒後にコンソールに「ハロー」と表示する（アロー関数を使用した書き方）
setTimeout(() ⇒ {
console.log('ハロー');
}, 1000);
※setTimeoutとは、数秒後に処理を実行するという時に使う命令です。
引数
引数とは、関数に受け渡すデータのことです。
基本文法は、
function 関数名(name) {
//この中に記述する処理で引数「name」が使える
}
となります。
例1：引数「name」を使って自己紹介
// 定義
function greeting(name) {
console.log("ハロー私の名前は" + name + "です");
}
// 実行
greeting("デジハリ男");
// 結果
ハロー私の名前はデジハリ男です
例2：2つの引数「name」「age」を使って自己紹介
// 引数はいくつも渡すことができます。
function greeting(name, age) {
//この中に記述する処理で引数「name」「age」が使える
}
function greeting(name,age) {
console.log("ハロー私の名前は" + name + "年齢は" + age +"です");
}
greeting("デジハリ男", 30);
// 結果
ハロー私の名前はデジハリ男年齢は30です
戻り値・返り値
戻り値・返り値とは、関数内で値を処理して、主に変数としてデータを返却することです。その際にはreturn文を使用します。
例：100円のバナナに消費税10%をかけた値段を計算する関数
// バナナの値段
var banana = 100;
// 税込価格のバナナの値段を計算する関数
function calcPrice(banana){
var bananaPrice = banana * 1.10;
return bananaPrice;
}
// 関数の結果を変数「totalPrice」にしまう
var totalPrice = calcPrice(banana);
// 結果 110円
console.log(totalPrice + "円");
JavaScriptのバージョンがES5からES6に
JavaScriptには、2015年に標準として策定された新しいバージョン（ES6）が登場しました。
現状ではまだ全てのブラウザでは対応されていない状態で、一部のエンジニアの中で使用されている状況です。
現状でES6のコードを使用するには、ES6のコードをES5のコードに変換ツールを使用してトランスパイル（変換）する工程が必要です。「トランスパイラ」というコード変換ツールで代表的な物は「Babel」などが有名です。
ES5からES6の変更点は？
今までのES5との変更点は、変数の定義に「let」と「const」が使えるようになったこと、「アロー関数」の登場で、より簡潔に関数の文が書けるようになったことなどがあります。
そして何より「class構文」の登場で、他言語のようにオブジェクト指向によるプログラミングがしやすくなったことです。（オブジェクト指向とは、JavaやC++などで使用されているメジャーなプログラミング作法です。）
まとめ
以上、JavaScriptの文法について書いてきましたが、基本の概念はC言語やJavaなど他の言語と同じです。
1つのプログラミング言語を習得すると、他の言語も勉強するのが容易になります。
JavaScriptは、C言語などにある変数の種類を表す「型」という概念に厳しくなく、初心者が入りやすい言語であります。ブラウザとテキストエディタさえあればすぐに学習が始められるのも大きな魅力です！
現状のJavaScript界隈は、jQueryの存在や、ES6の登場などで、どこから手を付ければいいか戸惑うところは多いと思いますが、基礎から順序よく自分のペースで勉強していくのが良いと思います。
何よりモチベーションのキープが大事なので、「こんなサイトの動きがつけたい！」や「こんなアプリが作りたい！」など目標を持って勉強してみてください。できることがたくさんあり、多くの可能性を秘めたこれからもきっと進化が止まらない大人気言語です！
さぁ皆さん、勉強を始めましょう！
その他の関連記事
- Webデザイナーになるには
- Webデザイナーの年収は
- Webデザイナーの将来性は？ キャリアや仕事内容は今後どうなる？
- Webデザイナーに関連性の高い資格
- Webデザイナーの仕事内容の変遷
- 未経験でもWebデザイナーになれる？
- 在宅/リモートワークでもできるWebデザイナーの仕事内容や必要スキルとは？
- JavaScriptでできることとは？Webデザイナーになるために必要な勉強のコツをご紹介
- JavaScriptの書き方とは
- 未経験でも独学でWebデザイナーに？効率的な勉強方法やスクールとの比較
- Webデザインの勉強方法を紹介！未経験者でも独学で学べる？
- 未経験の大学生でもWebデザイナーになる方法と勉強方法
- ウェブデザイン技能検定とは？試験概要や難易度・合格率、受験方法を解説
- Webデザイン（ウェブデザイン）とは？参考になるWebデザインギャラリー集
- 【社会人向け】おすすめWebデザインスクール・オンライン講座の紹介と選び方を解説！
- Webデザイナー・Webデザイン専攻 夜間の授業の特徴
- デジタルハリウッドSTUDIOにて 全国の校舎で課題の評価を競い合う全国課題表彰を実施
- 未経験からWeb業界への就職・転職を叶える"超実践"カリキュラムって？
- 未経験から育児もお仕事も両立する「主婦・ママクラス キャリアデザインプログラム」
- エンジニアとプログラマーの違いは？仕事内容や目指す方法を解説
- Webデザインスクールおすすめ40選！【2023年最新】選び方や比較ポイントを紹介！
- Webデザイナー専攻超実践型就職・転職プラン X フォントワークス
- 社会人でもイラストが上達する？コツや描けるようになるメリット、学ぶ方法などを解説
- ポートフォリオの役割とは？具体的な作り方やポイント・注意点などを徹底解説！