JavaScriptを始める前の準備、基本的な書き方やルールを解説！【JavaScript入門】サンプルコードや画像付きで解説

JavaScriptを学びたいんだけど、始める前の準備や基本的な書き方のルールが分からない…

今回はこんな疑問にお答えします。

こんにちは。
現役プログラマーのnktatです！

今回は「JavaScriptを始める前の準備や書き方のルール、JavaScriptを学ぶ前の準備」について解説していきます。

ここで紹介している基礎的な知識を身につけてから、次のステップである基本文法に移りましょう。

それでは解説していきます。

JavaScriptを始める前の準備について

JavaScriptをプログラミングする前に準備するものが２つあります。

今回紹介するソフトウェアはどちらも無料で準備できますので、JavaScriptを始める前に用意しましょう。

ブラウザを準備する

プログラミングしたJavaScriptの動きを確認するためにブラウザを準備します。

ブラウザには「Google Chrome」や「Internet Explorer」、「Microsoft Edge」、「Firefox」、「Safari」などがありますが、ここではGoogle社が開発した「Google Chrome」を使って確認していきます。

ブラウザがない場合は下記「Google Chrome」公式サイトから「Google Chrome」を用意してください。

「Google Chrome」公式サイトはこちら

テキストエディタを準備する

テキストエディタとは「文字情報の入力・編集・保存をするためのソフトウェア」のことです。

JavaScriptのコードを記述するために用意します。

パソコンには初めからメモ帳というテキストエディタが用意されていますが、コードを記述していく上では便利なツールとは言えません。

ここではコードを記述するための「視認性」と「利便性」の両方を兼ね備えたMicrosoft社が開発した「Visual Studio Code」を使っていきます。

実際に私も仕事では「Visual Studio Code」を使用しています。

自分の使いやすいテキストエディタを使うのが一番いいのですが、そのようなテキストエディタがない場合は下記「Visual Studio Code」公式サイトから「Visual Studio Code」を用意してください。

「Visual Studio Code」公式サイトはこちら

「ブラウザ」と「テキストエディタ」を用意できたら、次にJavaScriptの書き方の基本ルールを説明します。

JavaScriptの書き方の基本ルール

JavaScriptには、日本語や英語と同様に「文法」や「ルール」があります。

記述したコードはコンピュータが読み込むので、たった一つのタイプミスや書き間違えでも実行されなくなってしまいます。

ここでしっかりと基本ルールを覚えておきましょう。

基本ルール

JavaScriptを記述する際には、いくつかの基本ルールがあります。

プログラムでエラーが発生する場合は、これらのルールが守れているか確認しましょう。

小文字と大文字含めて文字が一文字違うだけでエラーとなってしまうので、コードを記述する際には注意してください。

JavaScriptのコメントの仕方

コメントはJavaScriptでプログラムの説明を残すために使います。

「どういった処理をおこなっているのか？」、「何に使われている変数なのか？」などをプログラムの中にコメントしておくと便利です。

昔書いたコードを見返す時に内容がすぐに分かりますし、複数人で開発する時に初めてコードを見た人でも内容が把握しやすくなります。

コメントの行数によって記述する内容が変わるので、それぞれ説明します。

一行コメント

一行のコメントを残したいときは、「//」を先頭に置きます。

サンプルコード

// 一行コメントではスラッシュ２つを先頭に入力

複数行コメント

複数行のコメントを残したいときは、「/*」「*/」で囲みます。

サンプルコード

/*
複数行コメント
の場合は、スラッシュとアスタリスクを組み合わせてコメントを囲みます。
*/

準備：コンソールでのJavaScript実行確認

JavaScriptのコードを書いた後は、コードにエラーがないか実際に実行して確認する必要があります。

ここでは、Google Chromeの「デベロッパーツール」という機能の中の「コンソール」にJavaScriptのコードを書いて、実行結果を確認してみましょう。

まずはコンソールの開き方を説明します。

１．Google Chromeを開く

２．デベロッパーツールを開く

３．コンソールを表示

これでコンソールでJavaScriptを実行して確認する準備が整いました。

これから紹介するサンプルコードを「コード記述場所」に入力して、「Enter」キーを押すことでJavaScriptを実行できます。

デベロッパーツールが不要になったら、右上の「×」をクリックして非表示にしましょう。

実践：コンソールでのJavaScript実行確認

それでは早速JavaScriptを使って動かしてみましょう。

簡単なコードで動作確認できる、「指定した値を出力する」命令のコードで動かしてみます。

「指定した値を出力する」命令には以下の２パターンがあります。

ダイアログボックス

ダイアログボックスとは、小さなウィンドウで警告やメッセージを表示する機能のことです。

ダイアログボックスにはいくつかの種類があります。

入力ダイアログボックス

ユーザーが入力した値を用いて、以降の処理を行うことができるダイアログボックスです。

サンプルコード

prompt("パスワードを入力してください。")

実行結果

表示されるダイアログボックスには入力欄が表示されます。
「OK」ボタンをクリックすると、入力欄に入力された値を返します。
ユーザーが入力した値を用いて、以降の処理を行うことができるダイアログボックスです。

警告ダイアログボックス

警告文を確認させる場面で使用します。

サンプルコード

alert("パスワードが間違えています。再度確認してください。")

実行結果

「OK」ボタンのあるダイアログボックスが表示されます。

確認ダイアログボックス

何か質問したり、回答によって分岐させたい場合に使用します。

サンプルコード

confirm("パスワードを登録してもいいですか？")

実行結果

表示されるダイアログボックスには「OK」と「キャンセル」のボタンが表示されます。
どちらかのボタンをクリックする必要があり、ボタンをクリックした時に値が返ってきます。

「OK」ボタンをクリックした場合は、「true」の値を返します。
「キャンセル」ボタンをクリックした場合は、「false」が返ってきます。
この返ってくる値から条件を判断して、処理を変えたりすることができます。

コンソール

コンソールは、ブラウザの開発ツールがサポートするコンソールウィンドウにデバッグログなどを書き出すのに使用されます。

サンプルコード

console.log('Hello World!');

実行結果

「ダイアログボックス」と「コンソール」の命令を実行して確認できましたか？
コンソールを使えば簡単にJavaScriptを実行してコードを確認できますね。

JavaScriptを書く方法について

ここまではブラウザのコンソールを使用してJavaScriptのコードを実行しました。

簡単なコードならコンソールにコードを書いて実行すればいいのですが、本格的にJavaScriptを使っていくのであれば、別の方法で進める必要があります。

別の方法とは、ファイルにJavaScriptのコードを書く方法です。

ファイルへのJavaScriptの書き方は２種類あります。

それぞれの書き方について説明します。

HTMLファイルに直接記述する（直接定義）

JavaScriptの書き方１つ目は、HTMLファイルにJavaScriptを直接書く方法（直接定義）です。

HTMLファイル（「.html」の拡張子のファイル）の<script>タグ内にJavaScriptのコードを記述すると、ブラウザはJavaScriptのプログラムとして認識します。

記述イメージ

メリット

デメリット

JavaScriptファイルをHTMLファイルに読み込む（外部定義）

JavaScriptの書き方２つ目は、JavaScriptファイルを外部から読み込む方法（外部定義）です。

HTMLファイルとは別に、JavaScriptファイル（「.js」の拡張子のファイル）を作成し、その中にJavaScriptのコードを記述します。

HTMLファイルの<script>タグ内でJavaScriptファイルを読み込ませ、ブラウザにJavaScriptのプログラムを認識させます。

記述イメージ

メリット

デメリット

JavaScriptファイルを外部から読み込ませる方法がJavaScriptの主流の書き方になっています。

一度書けば全ページに流用できるので手間がかからず、HTMLファイルと別ファイルで更新できるため管理しやすく、保守性に優れています。

他の人から見ても構造が理解しやすく、修正や管理が行いやすいため、複数人で開発する際などに適した方法です。

JavaScriptを学ぶ準備

それでは、JavaScriptファイルを外部から読み込ませる方法でJavaScriptを書くために、ファイルを準備したいと思います。

まずはファイルを保存するためのフォルダを準備しましょう。

フォルダを準備する

好きな場所で構わないので、２つフォルダを準備します。
ファイルを１つのフォルダにまとめておくことで、管理がしやすくなります。
ここではデスクトップに「practice」という名称のフォルダと、そのフォルダ内に「js」フォルダを用意します。

フォルダが準備できたらファイルを作成します。
作成するファイルは以下の２種類です。

JavaScriptファイルを作成する

テキストエディタを開き、先ほど作成した「js」フォルダにファイル名「index.js」のJavaScriptファイルを作成します。

ファイルの中身には以下の内容を記述してみましょう。

confirm("正常に表示されましたか？");

HTMLファイルを準備する

テキストエディタを開き、先ほど作成した「practice」フォルダにファイル名「index.html」のHTMLファイルを作成します。

HTMLファイル内のHTMLからJavaScriptファイルである「index.js」を読み込ませてみましょう。

「index.html」ファイル内のコードは以下の通りにします。

<!DOCTYPE html>
<html lang = "ja">
    <head>
        <meta charset = "UTF-8">
        <title>JavaScript練習</title>
    </head>
    <body>
        <script src="js/index.js"></script>
    </body>
</html>

最後に、「index.html」をブラウザで表示してみましょう。

上記画像のように表示されればOKです。
上手く表示されない場合は、フォルダやファイルの場所、コードを再度確認してみましょう。

読みやすいコードの書き方のコツ

これまでの作業でJavaScriptを学ぶ準備ができました。

次の記事ではJavaScriptの基本文法を紹介していきますが、最後に読みやすいコードを書く際に抑えておくべきポイントを３つだけ紹介したいと思います。

読みやすいコードを書くことで、書いている自分が見返す時に分かりやすくなるだけでなく、第三者がコードを見る際も理解しやすくなります。

コメントを使用する

// ○○のために処理Aを行う
処理A

// 処理Bで△△を求める
処理B

JavaScriptのコードに慣れてくれば、処理を見れば大体何をしているのか分かりますが、コメントを入れることで他の人にも理解しやすいプログラムになります。

今後は複雑なコードが増えるので、コメントを使用して「このコードは何をしているのか？」を分かりやすく説明することを心がけましょう。

スペース、タブを活用する

JavaScript内では、スペースやタブはコードとして認識されません。

プログラムのコードを詰めて書くと見づらいので、スペースやタブを使って、見やすさや読みやすさを向上させましょう。

実際のコードを見比べてみます。

■見づらいコード

var a ="おはようございます。";
var b= a+ "いい朝ですね。";
alert(b);

「＝」の前後にスペースが入っていたり、入っていなかったりで不揃いなのでとても見づらいですね。

■見やすいコード

var a = "おはようございます。";
var b = a + "いい朝ですね。";
alert(b);

「＝」の前後にスペースを付けて整えるだけで、読みやすくなります。

スペースやタブをうまく使って、適切な余白を取り、コードを見やすくしましょう。

インデントを揃える

インデントとは字下げのことです。
インデントを付けることで、処理のまとまりが分かりやすくなり、コードは読みやすくなります。

実際のコードを見比べてみましょう。

■見づらいコード

function hello(){
var a = "おはようございます。";
var b = a + "いい朝ですね。";
alert(b);
}
hello();

インデントが付いていないので、処理のまとまりが分かりづらく、勘違いを招く原因にもなります。

■見やすいコード

function hello(){
    var a = "おはようございます。";
    var b = a + "いい朝ですね。";
    alert(b);
}
hello();

「alert(b)」が「function hello()」の中で記述されているコードだというのが、パッと見てすぐに分かるようになりました。

まとめ

今回は「JavaScriptを始める前の準備や書き方のルール、JavaScriptを学ぶ前の準備」について解説しました。
これまでの情報のおさらいです。

ここまでお疲れ様でした。

これまでの作業でやっとJavaScriptを始める準備ができましたね。

始める前だというのに、書き方のルールを覚えたり、JavaScriptを動かす準備が大変だったと思います。

これから基本的な文法を学んでいくと複雑なコードが増えていきますが、ここで学んだ基本のルールは守って進めていきましょう！

あなたは独学でJavaScriptを学んでいて、嫌になったことはありませんか？

独学で進める場合、分からない部分があれば、
自分で調べる⇒解決方法を見つけて解説を読む⇒解説の中で分からない部分を調べる⇒調べた結果で分からない部分をまた調べる…
という調査ループに陥ってしまい、嫌気が差して挫折することがよくあります。

「プログラミングを学ぶ」と一言でいってもコードを記述するだけではありません。
コード記述前は環境構築を行い、コード記述後はテストが必要です。
エラーが発生したら、エラーの原因を調査して自分で解決しなければいけません。

環境構築やエラー発生時の調査方法など、プログラミングを学び始めたときに躓いてしまうポイントは多岐に渡って潜んでいます。

独学で進める場合、これらの問題に対してインターネットや書籍から自分で調べて自分で解決していくしかありません。

独学でプログラミングを学んだことがある人ならば一度は経験していると思いますが、自分で調べて自分で解決することは非常に難しく、とても根気がいる作業です。

そのため、独学によるプログラム学習は挫折率が高く、ほとんどの学習者が一度は躓きや挫折を経験しています。

仮に根気強く頑張って一通りのプログラミングを学んだとしても、独学ではチーム作業を学ぶことができません。

プログラミングはシステムを開発するために行うことがほとんどですが、システム開発はチーム作業が主です。

チーム作業を学べないというのは大きなデメリットになります。

これらのことを踏まえて考えると、独学でJavaScriptを学ぶことは本当に効率的でしょうか？

JavaScriptを学ぶ理由は「エンジニアになりたい」・「転職したい」・「副業したい」など人それぞれだと思います。

前向きな目標を達成するために自主的に学んだのに、挫折して諦めてしまうのは非常に勿体ないですよね。

人生は一度きりです。
やりたいことをやったほうがいいに決まっています。

では、挫折せずに効率よくJavaScriptを学ぶにはどうしたらいいのでしょうか？

結論から言うと、挫折せずに効率よくJavaScriptを学ぶ方法は「Code Village」を受講することです。

「Code Village」は必要な教材・教育・サポートが揃っており、受講生の学習継続率も９３％と非常に高いスクールです。
挫折せずに効率よくJavaScriptを学ぶには「Code Village」を受講することをオススメします。

「Code Village」の口コミを一部紹介します。

ここでは一部のみの紹介となりましたが、以下の記事で総勢３２人の受講生のリアルな口コミを紹介しています。

更には、なぜ「Code Village」で受講すべきなのか？、「Code Village」を利用するまでの３ステップなども記事にまとめていますのでぜひチェックしてみてください。