こちらは「JavaScriptが何かは知っているけど書いたことはない」「そもそもプログラムを書くのが初めて」といった人向けの入門記事です。
どうやってJavaScriptを書き始めるのか、準備するものはなんなのか、といった部分から見ていきます。

JavaScriptは今や勉強しておいて損することのない応用範囲の広い言語となっています。
多くの人から愛され世界中で大人気なJavaScriptの基本的な書き方を知ることで、その雰囲気を感じてみてください。

JavaScriptのスキルを身につけてWebエンジニアとして活躍したいなら、約15.5万の講座の中から自分に合ったものを探せるこちらのサービスがおすすめです。
習得したいスキルに合わせてプロのエンジニアが解説する動画で効率的な学習ができます!
フロントエンドエンジニアになりたい人の Webプログラミング入門

JavaScriptの記述方法3通り

JavaScriptの学習を始めようとしたときに最初に浮かぶ疑問は、「どこにプログラムを書けばいいの?」ということではないでしょうか?
プログラミングを始めて触る方にとっては特に、何を準備すればよいのか、どこに記述すればよいのかが意外とわからなかったりします。

実はJavaScriptを学ぶために準備は必要ありません。
正確に言うと、必要なものは「今あなたが見ているブラウザ」だけです。
このブラウザこそがJavaScriptの実行環境であり、用意したプログラムはブラウザ上で簡単に実行することができます。

通常は環境構築で苦労することが多いプログラミング言語の学習において、最も準備が簡単な言語と言えるでしょう。

ブラウザで記述する方法

JavaScriptはクライアントサイドのプログラミング言語です。
つまり、Webサイトを閲覧しているコンピュータ(ブラウザ上)で処理されているということになります。

早速、ブラウザのアドレスバー(URLを打ち込む部分)に以下のように入力してみましょう。

javascript:alert('Hello, world!')

どうでしょう、アラートが表示されましたか?これがJavaScriptです。

次に、ブラウザのデバロッパツール(開発者ツール)を活用してJavaScriptを記述してみましょう。
ブラウザを起動して適当なページを開いておきます。
Windowsでは Ctrl + Shift + I で、Macでは + Opt + I で開くことができまます(ブラウザによって異なるので開かない場合は調べてみてください)。

開くと以下のようなツールが開かれるので、下部の「Console」タブからJavaScriptを実行してみます。

実行内容と出力結果は以下の通りです。
> 以降の部分のみ入力して実際にどのように出力が得られるのかを確かめてみてください!

> console.log('Hello, World!');
Hello, World!

> var num = 100;
> console.log(num * 5);
500

このようにJavaScriptはブラウザ上で簡単に動作を確認することもできますが、実際にはHTMLファイルやJavaScriptファイルに記述します。

HTMLファイル内に記述する方法

JavaScriptはHTMLの中に記述することができます。
プログラムを記述する際は「メモ帳」アプリなどのテキストエディタを利用します。
おすすめのテキストエディタはVisual Studio Codeです。
プログラムを書くための補助機能が多く備わっていて、使いこなせると大変便利です。
Visual Studio Codeのダウンロードはこちら

以下のHTMLコードをメモ帳などのテキストエディタに記述し、index.htmlとして保存しましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    document.write('Hello, world!');
  </script>
</body>
</html>

HTML文書の中でscriptタグ内に記述した内容は、JavaScriptとして扱われます。
保存したファイルをブラウザで開くことで、画面にJavaScriptで出力された文字列が表示されます。

scriptタグは任意の場所に書くことができますが、その中でもbodyの閉じタグ直前が最も適しています。
WebページはHTMLファイルの上から順番に読み込みを行い、その内容を逐次表示してきます。
この性質上、JavaScriptを最初に記述するとページが読み込まれる前にそちらを読み込むので、ページが表示されるまでに時間がかかってしまいます。
ブラウザにHTMLコンテンツを先に読み込ませることでページが表示されるまでの時間が短縮され、ユーザのストレス軽減につながるのです

ただし、JavaScriptのコードを最初に読み込ませたい場合もあります。
そういった場合にはheadタグ内に書くこともあります。
この場合は、CSSの読み込みの後に読み込ませることが多いです(これもページの表示を高速化させるための工夫です)。

JavaScriptファイルに記述する方法

実用上はJavaScriptだけを記述するための専用のファイルを用意し、それをHTMLから読み込むといった使い方が最も多いです。
JavaScriptのプログラムファイルは拡張子が「.js」となります。

以下のJavaScriptコードをmain.jsとして保存します。

document.write('Hello, world!');

そして、このJavaScriptファイルを呼び出す記述をHTMLファイル内で行います。
scriptタグにsrc属性を付与し、その中に読み込ませたいJavaScriptファイルのあるパスを指定します。
パスが間違っているとJavaScriptがうまく動作しないので、注意してください。
以下の例ではHTMLファイルとJavaScriptファイルは同じ階層に配置しています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script src="main.js"></script>
</body>
</html>

そして先ほどと同様にしてブラウザでHTMLファイルを開けば、画面に結果が表示されます。
外部ファイルにコードを書く場合の読み込み位置も、HTMLドキュメントに直接記述する場合と同様です。

本気でWebエンジニアを目指すなら、現役で活躍する講師の現場で使える技術を学べるこちらの講座がおすすめです。
コミュニティマネージャーとの面談から理想のキャリアと現状に合わせた、自分専用のコースを組み立てることができます。
まずは無料のWeb説明会に参加してみましょう!
ゼロから人気のWebスキルを学ぶなら【Cucua】

ストリクトモード

ブラウザには、古いJavaScriptを実行するモードと新しいJavaScriptを実行するモードの2つがあります。
新しいJavaScriptを実行する設定をストリクトモードといいます。

ストリクトモードでは、記述ミスを防ぐためのエラー検出機能が厳しく設定されており、コードの質が高く保たれます
明示的にストリクトモードを使用することを宣言するには、以下のように書きます。

<script>
  'use strict';
</script>

ここまで何となく「新しい」という表現を使用していましたが、実際にどのようなものなのか簡単に見ていきます。
JavaScriptはECMAインターナショナルによって標準化されています。
ECMAの標準化規格は2015年に発表されたES2015(ES6)で大幅な仕様変更がされたと同時に様々な改良が施されました。
これ以降のJavaScriptを新しいJavaScriptと呼んでいます。

ES6では新しい構文や機能が追加され簡潔な記述ができるようになりました。
例えば、letとconstによる変数宣言やアロー関数、テンプレート文字列などが追加されています。

現場を意識した本格的な学習カリキュラムで、本物のスキルを身につけたいならこちら!
困ったときにいつでも相談できるバディ制度でわからないこともすぐに解決できます。
プログラミングスクールといえば【RUNTEQ】

JavaScriptの基本的な書き方

JavaScriptを学ぶ上では、オブジェクトという考え方について知っておくと理解がスムーズに進みます。
オブジェクトとは、カテゴリごとに変数(プロパティ)や関数(メソッド)をまとめたものです。
また、オブジェクト名とプロパティ名やメソッド名をドット( . )でつなぐことでそのオブジェクトの変数の値や関数の機能を参照することができます。

始めてプログラミングを学ぶ方などは、今はあまり理解できなくても学習を進めていく中で少しずつ身についていくはずです!

画面へのテキストの出力

最初に、画面上に任意の文字列を表示するコードを見てみます。

document.write('Hello, world!');

このコードのdocumentとはdocumentオブジェクトと呼ばれ、ブラウザ上に表示されている部分全体を表しています。
documentオブジェクトでもwriteメソッドを使用することで、ブラウザの画面上に任意の文字列や計算結果などを書き込むことができます。

またHTMLの要素をJavaScriptで参照して値を変更することで、画面上のコンテンツを書き換えてみます。

<h2 id="heading">ページタイトル</h2>
let title = document.getElementById('heading');
title.textContent = 'Hello, world!';

もしうまく表示されない場合は、ブラウザのデバロッパツールのコンソールを確認してみましょう。
何かエラーが表示されているかもしれません。

エスケープシーケンス

改行やクォーテーションといった、プログラム中で意味をもつ記号を画面に表示したい場合は、少し注意が必要です。
コンピュータからはその文字がただの記号なのかプログラムの一部として処理しなければいけないコードなのかが明確でないからです。
例えば、シングルクォーテーションやダブルクォーテーションは、「中に含むものを文字列をして扱う」という意味があります。

特殊な記号をただの文字として扱いたい場合は、その記号の前にバックスラッシュを付けます。
このような文字をエスケープシーケンスといい、本来の特別な意味を持った記号ではなくただの文字として処理されます。

以下はよく使うエスケープシーケンスです。

記号対応する文字
\’シングルクォーテーション
\”ダブルクォーテーション
\n改行
\f改ページ
\\\円マーク(バックスラッシュ) ※環境によって表示が異なります。
\bバックスペース
\t水平タブ
\v垂直タブ
\r復帰(同じ行の先頭に戻る)
\0NULL文字

コメント

プログラム中にメモ書きを入れたい場合や、一部のコードを一時的に無効化したい場合、コードをコメント化します。
コメント部分はプログラムの実行時に無視されるので、コンピュータにとっては意味を持ちません。

また、プログラムの一部をコメントにして一時的に無効化することをコメントアウトといい、デバッグ(プログラムの不具合を直すこと)の際などに活用します。

コメントの書き方は、1行のみのコメントを記述する場合と複数行にわたるコメントを記述する場合で2種類あります。
それぞれ以下のように書くことができます。

// コメント

/*
  複数行の
  コメント
*/

1行のコメントの場合は、コメントにしたい行の先頭にスラッシュを2つ重ねて記述します。
行の途中からコメントを書くこともでき、その場合は // 以降がコメントとして扱われます。

複数行にわたってコメントを残したい場合は /* ~ */ で囲みます。

ダイアログの表示

alertは、画面上に警告ウィンドウ(ダイアログボックスあるいはポップアップウィンドウ)を表示することができます。
これはユーザが「OK」をクリックすることで閉じるボックスで、注意喚起などによく使用されています。
ユーザの操作によって結果を変化させることはできませんが、その分シンプルな処理になります。

alert('警告!注意してください');

confirmalertによく似ていますが、「OK」だけではなく「キャンセル」を表示することができます。
ユーザの選択によって結果が変えることができるため、よく確認のために使用されています。

confirm('本当によろしいですか?');

promptは、ポップアップウィンドウの中でユーザに任意の値を入力させることができます。
ユーザの情報を入力させたり、パスワードの入力などに用いられます。

カンマで区切って2つ目に入力されている文字列は、入力フィールドの初期値です。
未指定の場合は空白になりますので、任意で渡せるオプション引数となっています。

prompt('名前を入力してください', 'ここに入力');

コンソール出力

デバロッパツールのコンソールへの出力を行うこともできます。
こちらはユーザにはあまり見せたくないようなエラー表示や、プログラムの動作チェックなどによく用います。

console.log('Hello, world!');

四則演算

プログラムと言えばやはり計算です。
普通の数学と同じような記法で簡単に四則演算を行うことができます。

計算結果をコンソールに出力するようなプログラムを作りたい場合は以下のように記述します。
文字列ではないので、シングルクォーテーションやダブルクォーテーションで囲んではいけないことに注意です。

console.log(100 + 20 * 5 / (2 * 4));

// 式をクォーテーションで囲った場合にどのような動作をするかも確認しておきましょう
console.log('100 + 20 * 5 / (2 * 4)');

まとめ

JavaScript、あるいはプログラミングの雰囲気は何となくつかめましたか?
初学者の方に意識してほしいプログラミングの学び方は以下の通りです。

まず、参考となるプログラムを見ながら入力(ソースコード)に対してどのような出力(結果)が得られるかを学びます。
これによりプログラムの基礎的な部分を学びます。

次に、ほしい出力を得るためにはどのような入力や処理をすればいいのかを考えてプログラムを実装できるように練習します。
これにより実際のビジネスタスクを解決するための力をつけることができます。

ひとりではなかなかプログラミングの学習が続かない、未経験だから不安が多い、という方はプログラミングスクールを利用してみるのも有効です。
本物のエンジニアに学ぶことで、時間がない方でも最短でスキルを身につけることができます。
現役エンジニアのパーソナルメンターからマンツーマンで学べる

お悩みの方は、まずは無料キャリアカウンセリングにお申込みください。

関連記事

この記事のタグ