JavaScriptの書き方とは？初心者向けに基本から解説

JavaScriptの書き方

JavaScriptは、ウェブページを用いるオブジェクト指向のスクリプト言語です。ウェブデザインに必要なHTML（HyperText Markup Language）やCSS（Cascading Style Sheets）とともに使用します。

ここでは、JavaScriptの書き方を中心に解説していきます。

【参考】：MDN Web Docs: JavaScript

オブジェクト指向言語とは？概念とプログラミング言語をわかりやすく解説！

HTMLやCSSの概要

HTMLはウェブページで用いられるマークアップ言語であり、ウェブページの文書構造を示すための仕様です。CSSは、HTMLを視覚的・感覚的に修飾するための仕様で、ウェブデザインに用います。HTMLやCSSを用いることで、見栄えの良い静的なウェブコンテンツの表示に対応します。

JavaScriptを用いることでさらに動的コンテンツに対応し、演算結果によって表示を変更したり、動的情報を追加したりすることができます。そのため、HTMLとCSSに加えてJavaScriptを併用するのがウェブページ作成の方法の1つです。

HTML・CSSとは何か？使い方やできること、独学方法を解説！

JavaScriptの特徴

JavaScriptはブラウザの機能をそのまま用いるため、エディタとブラウザさえあればソースコードの開発から実行までカバーすることができます。Windowsであれば標準搭載されるメモ帳とEdgeだけで作業ができます。そのため、初心者が趣味でプログラミングの学習をするにはうってつけの言語と言えます。

JavaScriptの特徴とは？何ができるのか、メリット・デメリットも解説

JavaScriptでできること

JavaScriptは、プログラミング言語として演算処理などの汎用的な用途に利用できます。その結果をブラウザでポップアップ表示させたり、アニメーション表示させたりすることができます。HTMLとCSSと連携してリッチな動的ウェブコンテンツを作成することもできます。

JavaScriptでできること6選！向いている人や学習方法も解説

JavaScriptの書き方を学ぶ

JavaScriptの書き方を学ぶには、基礎的な使い方を理解しておく必要があります。JavaScriptはプログラミング言語ですので、言語固有の基本機能や構文と呼ばれるルールをマスターしましょう。ここでは、実際の書き方をサンプルで示しながら順に学んでいきます。

【参考】：MDN Web Docs: JavaScript とは【参考】：MDN Web Docs: JavaScript の最初の一歩

JavaScriptの使い方

JavaScriptを使うには、ウェブページの記述の仕方を最初に理解しておく必要があります。HTMLファイルに直接組み込む方法と、外部ファイルから読み込む方法の2種類です。詳しくは以下の使い方に従います。

・HTMLに直接記述する方法（内蔵 JavaScript） この方法では、HTML内の”<head></head>”、あるいは”<body></body>”のタグの中に直接JavaScriptのコードを記述します。JavaScriptの開始は”<script>”、終了は”</script>”です。

<script>
  // ここにJavaScriptコードを記述します
</script>

・外部ファイルに保存し、読み込む方法（外部 JavaScript） この方法は、共通の関数などをライブラリ化し、アプリで共有する場合などに用いる方法です。HTMLファイルでは、ファイルを呼び出す1行を記述するだけのシンプルなコードで、メンテナンス性が高まります。

指定するファイル名は、JSファイルと呼ばれる拡張子が”.js”のファイルです。JSファイルの作り方は、テキストファイルの作成方法と同じです。

<script src="ファイル名.js"></script>

HTML5より古いバージョンでは、<script type="text/javascript">のようにJavaScriptであることを明示する必要がありました。ドキュメントタイプが”<!DOCTYPE html>”のようにHTMLの最初に宣言されている場合は、HTML5として処理されるため、 type="text/javascript"の指定は不要です。

【参考】：MDN Web Docs: JavaScript とは【参考】：MDN Web Docs: HTML : スクリプト要素

HTML5とは？特徴や変更点・関連用語・対応ブラウザを解説！

JavaScriptの基本機能と構文（変数）

変数は、プログラムで使用する値を格納するための格納場所です。”let”で宣言し、データ型に従って値を代入します。

let myparam;
myparam = 5;

あるいは次のように、変数の宣言と代入を1行で実行することもできます。

let myparam = 5;

変数で扱う代表的なデータ型は、以下の通りです。

・文字列 文字テキストを扱います。シングルクォーテーションあるいはダブルクォーテーションの引用符で囲みます。

・数値 数値は、整数あるいは浮動小数点が利用できます。引用符で囲った場合は、文字列として扱われます。

・論理型 true（真）とfalse（偽）の二値で表される、論理値でBooleanと言われるデータ型を表します。

・配列 配列は、同一の参照領域に複数のデータを格納する構造で、使用するには角カッコ”[]”で配列を表します。

・オブジェクト コンピュータで識別できるもので、オブジェクト指向プログラミングで用いる関数名などを使用する場合に利用します。

【参考】：MDN Web Docs: JavaScript の基本【参考】：MDN Web Docs: JavaScript の最初の一歩【参考】：MDN Web Docs: JavaScript のデータ型とデータ構造

プログラミングで用いる変数とは？学んだその先のキャリアへの活用

JavaScriptの基本機能と構文（コメント）

コメントは、コードとして処理されない注釈の追加やデバックコードのコメントアウトなどに用います。単一行のコメント、あるいは複数行のコメントとして使用することができます。単一行のコメントと複数行のコメントは、用途に応じて使い分けが可能です。

単一行のコメント機能は以下の通りです。

// この行は、コメントとして扱われます。

複数行のコメント機能は以下の通りです。

/*
この行は、コメントとして扱われます。
複数行のコメントが可能です。
（続き）
*/

【参考】：MDN Web Docs: JavaScript の基本【参考】：MDN Web Docs: JavaScript の最初の一歩

JavaScriptの基本機能と構文（演算子）

演算子は、数学的に変数や値を処理するもので、四則演算や代入などを行います。同様に文字列を連結する場合も、演算子を利用して”文字列”+”文字列”のように使用することができます。次の例は、数学の演算と文字列の演算の例です。

消費税の計算を数学演算で行い、結果の文字列を演算子で連結しています。

let tax = 1.1;
let price = 19800;
let total;
total = price * tax;
console.log("合計は"+"%d"+"円です",total);

【参考】：MDN Web Docs: JavaScript の基本【参考】：MDN Web Docs: JavaScript の最初の一歩

JavaScriptの基本機能と構文（条件文）

条件文は、条件を満たす場合（true）に実行するコードと、条件を満たさない場合（false）に実行するコードを使い分けする機能です。次のように、条件に応じたコードを用意して用います。実際の使用時には、関数の引数や演算結果などを条件分岐に用いると良いでしょう。

let score = 70;
if (score >= 90) {
   console.log("スコアは90点以上です。"+"%d"+"点でした。",score);
} else {
   console.log("スコアは90点未満です。"+"%d"+"点でした。",score);
}

【参考】：MDN Web Docs: JavaScript の基本【参考】：MDN Web Docs: JavaScript の最初の一歩

JavaScriptの基本機能と構文（関数）

関数は、よく使う処理を定義する機能です。組み込みの関数に加えて、自分で作成することもできます。作り方は簡単で、次のように関数をfunctionで定義することで独自に追加することができます。この例は、先に示した消費税の計算サンプルコードを関数で表した例です。

let tax = 1.1;
let price = 19800;
let total;
function calc(num1, num2) {
  let result = num1 * num2;
  return result;
}
total = calc(price, tax);
console.log("合計は"+"%d"+"円です",total);

【参考】：MDN Web Docs: JavaScript の基本【参考】：MDN Web Docs: JavaScript の最初の一歩

プログラミングの関数とは？役に立たない？学び方と実務で役立つスキル