

JavaScriptを学びたいんだけど、始める前の準備や基本的な書き方のルールが分からない…
今回はこんな疑問にお答えします。
こんにちは。
現役プログラマーのnktatです!
今回は「JavaScriptを始める前の準備や書き方のルール、JavaScriptを学ぶ前の準備」について解説していきます。
ここで紹介している基礎的な知識を身につけてから、次のステップである基本文法に移りましょう。
そもそもJavaScriptって何?と思われている方はこちらの記事にまとめていますので、まずはこちらの記事を参考にしてみてくださいね!今回はこんな疑問にお答えします。 本記事の内容 JavaScriptを始める前の準備について JavaScriptの書き方の基本ルール JavaScriptのコメントの仕方 コンソールでのJavaScript実行確認 J …
それでは解説していきます。
JavaScriptを始める前の準備について

JavaScriptをプログラミングする前に準備するものが2つあります。
- ブラウザを準備する
- テキストエディタを準備する
今回紹介するソフトウェアはどちらも無料で準備できますので、JavaScriptを始める前に用意しましょう。
ブラウザを準備する
プログラミングしたJavaScriptの動きを確認するためにブラウザを準備します。
ブラウザには「Google Chrome」や「Internet Explorer」、「Microsoft Edge」、「Firefox」、「Safari」などがありますが、ここではGoogle社が開発した「Google Chrome」を使って確認していきます。
ブラウザがない場合は下記「Google Chrome」公式サイトから「Google Chrome」を用意してください。
テキストエディタを準備する
テキストエディタとは「文字情報の入力・編集・保存をするためのソフトウェア」のことです。
JavaScriptのコードを記述するために用意します。
パソコンには初めからメモ帳というテキストエディタが用意されていますが、コードを記述していく上では便利なツールとは言えません。
ここではコードを記述するための「視認性」と「利便性」の両方を兼ね備えたMicrosoft社が開発した「Visual Studio Code」を使っていきます。
実際に私も仕事では「Visual Studio Code」を使用しています。
自分の使いやすいテキストエディタを使うのが一番いいのですが、そのようなテキストエディタがない場合は下記「Visual Studio Code」公式サイトから「Visual Studio Code」を用意してください。
「ブラウザ」と「テキストエディタ」を用意できたら、次にJavaScriptの書き方の基本ルールを説明します。
JavaScriptの書き方の基本ルール

JavaScriptには、日本語や英語と同様に「文法」や「ルール」があります。
記述したコードはコンピュータが読み込むので、たった一つのタイプミスや書き間違えでも実行されなくなってしまいます。
ここでしっかりと基本ルールを覚えておきましょう。
基本ルール
JavaScriptを記述する際には、いくつかの基本ルールがあります。
- 原則、半角英数を使用して記述する
- アルファベットの小文字と大文字は区別して認識される
- 一文の終わりには、「;(セミコロン)」をつける
- 文字列(日本語英語問わず)として扱う場合には、「’(シングルクォート)」または「”(ダブルクォート)」で囲む
プログラムでエラーが発生する場合は、これらのルールが守れているか確認しましょう。
小文字と大文字含めて文字が一文字違うだけでエラーとなってしまうので、コードを記述する際には注意してください。
JavaScriptのコメントの仕方

コメントはJavaScriptでプログラムの説明を残すために使います。
「どういった処理をおこなっているのか?」、「何に使われている変数なのか?」などをプログラムの中にコメントしておくと便利です。
昔書いたコードを見返す時に内容がすぐに分かりますし、複数人で開発する時に初めてコードを見た人でも内容が把握しやすくなります。
コメントの行数によって記述する内容が変わるので、それぞれ説明します。
一行コメント
一行のコメントを残したいときは、「//」を先頭に置きます。
サンプルコード
// 一行コメントではスラッシュ2つを先頭に入力
複数行コメント
複数行のコメントを残したいときは、「/*」「*/」で囲みます。
サンプルコード
/*
複数行コメント
の場合は、スラッシュとアスタリスクを組み合わせてコメントを囲みます。
*/
準備:コンソールでのJavaScript実行確認

JavaScriptのコードを書いた後は、コードにエラーがないか実際に実行して確認する必要があります。
ここでは、Google Chromeの「デベロッパーツール」という機能の中の「コンソール」にJavaScriptのコードを書いて、実行結果を確認してみましょう。
JavaScriptを実行できたり、HTMLやCSSもブラウザ上で疑似的に追加・編集ができる大変便利なツールです。
まずはコンソールの開き方を説明します。
1.Google Chromeを開く

2.デベロッパーツールを開く

3.コンソールを表示

これでコンソールでJavaScriptを実行して確認する準備が整いました。
これから紹介するサンプルコードを「コード記述場所」に入力して、「Enter」キーを押すことでJavaScriptを実行できます。
デベロッパーツールが不要になったら、右上の「×」をクリックして非表示にしましょう。
実践:コンソールでのJavaScript実行確認

それでは早速JavaScriptを使って動かしてみましょう。
簡単なコードで動作確認できる、「指定した値を出力する」命令のコードで動かしてみます。
「指定した値を出力する」命令には以下の2パターンがあります。
- ダイアログボックス
- コンソール
ダイアログボックス
ダイアログボックスとは、小さなウィンドウで警告やメッセージを表示する機能のことです。
ダイアログボックスにはいくつかの種類があります。
項目 | コード |
---|---|
入力 | prompt() |
確認 | confirm() |
警告 | alert() |
入力ダイアログボックス
ユーザーが入力した値を用いて、以降の処理を行うことができるダイアログボックスです。
prompt(値);
サンプルコード
prompt("パスワードを入力してください。")
実行結果

表示されるダイアログボックスには入力欄が表示されます。
「OK」ボタンをクリックすると、入力欄に入力された値を返します。
ユーザーが入力した値を用いて、以降の処理を行うことができるダイアログボックスです。
警告ダイアログボックス
警告文を確認させる場面で使用します。
alert(値);
サンプルコード
alert("パスワードが間違えています。再度確認してください。")
実行結果

「OK」ボタンのあるダイアログボックスが表示されます。
確認ダイアログボックス
何か質問したり、回答によって分岐させたい場合に使用します。
confirm(値);
サンプルコード
confirm("パスワードを登録してもいいですか?")
実行結果

表示されるダイアログボックスには「OK」と「キャンセル」のボタンが表示されます。
どちらかのボタンをクリックする必要があり、ボタンをクリックした時に値が返ってきます。
「OK」ボタンをクリックした場合は、「true」の値を返します。
「キャンセル」ボタンをクリックした場合は、「false」が返ってきます。
この返ってくる値から条件を判断して、処理を変えたりすることができます。
コンソール
コンソールは、ブラウザの開発ツールがサポートするコンソールウィンドウにデバッグログなどを書き出すのに使用されます。
console.log(値);
サンプルコード
console.log('Hello World!');
実行結果

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

ここまではブラウザのコンソールを使用してJavaScriptのコードを実行しました。
簡単なコードならコンソールにコードを書いて実行すればいいのですが、本格的にJavaScriptを使っていくのであれば、別の方法で進める必要があります。
別の方法とは、ファイルにJavaScriptのコードを書く方法です。
ファイルへのJavaScriptの書き方は2種類あります。
- HTMLファイルに直接記述する(直接定義)
- JavaScriptファイルをHTMLファイルに読み込む(外部定義)
それぞれの書き方について説明します。
HTMLファイルに直接記述する(直接定義)
JavaScriptの書き方1つ目は、HTMLファイルにJavaScriptを直接書く方法(直接定義)です。
HTMLファイル(「.html」の拡張子のファイル)の<script>タグ内にJavaScriptのコードを記述すると、ブラウザはJavaScriptのプログラムとして認識します。
記述イメージ

メリット
- 読み込みが早い
- 複数ファイル見る必要がない
デメリット
- 再利用しずらい
- HTMLとJavaScriptのコードが混在してしまうため、保守性が悪い
JavaScriptファイルをHTMLファイルに読み込む(外部定義)
JavaScriptの書き方2つ目は、JavaScriptファイルを外部から読み込む方法(外部定義)です。
HTMLファイルとは別に、JavaScriptファイル(「.js」の拡張子のファイル)を作成し、その中にJavaScriptのコードを記述します。
HTMLファイルの<script>タグ内でJavaScriptファイルを読み込ませ、ブラウザにJavaScriptのプログラムを認識させます。
記述イメージ

メリット
- 再利用できる
- HTMLとJavaScriptのコードを分けて管理できる
デメリット
- ファイルのサイズによっては、読み込みが遅くなってしまう
- 複数ファイル見ながら作業する必要がある
JavaScriptファイルを外部から読み込ませる方法がJavaScriptの主流の書き方になっています。
一度書けば全ページに流用できるので手間がかからず、HTMLファイルと別ファイルで更新できるため管理しやすく、保守性に優れています。
他の人から見ても構造が理解しやすく、修正や管理が行いやすいため、複数人で開発する際などに適した方法です。
JavaScriptを学ぶ準備

それでは、JavaScriptファイルを外部から読み込ませる方法でJavaScriptを書くために、ファイルを準備したいと思います。
まずはファイルを保存するためのフォルダを準備しましょう。
フォルダを準備する
好きな場所で構わないので、2つフォルダを準備します。
ファイルを1つのフォルダにまとめておくことで、管理がしやすくなります。
ここではデスクトップに「practice」という名称のフォルダと、そのフォルダ内に「js」フォルダを用意します。

フォルダが準備できたらファイルを作成します。
作成するファイルは以下の2種類です。
- JavaScriptファイル
- HTMLファイル
JavaScriptファイルを作成する
テキストエディタを開き、先ほど作成した「js」フォルダにファイル名「index.js」のJavaScriptファイルを作成します。
ファイルの中身には以下の内容を記述してみましょう。
confirm("正常に表示されましたか?");

HTMLファイルを準備する
テキストエディタを開き、先ほど作成した「practice」フォルダにファイル名「index.html」のHTMLファイルを作成します。
HTMLファイル内のHTMLからJavaScriptファイルである「index.js」を読み込ませてみましょう。
<body>
<script src=”JavaScriptファイルのファイルパス”></script>
</body>
「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の基本文法を紹介していきますが、最後に読みやすいコードを書く際に抑えておくべきポイントを3つだけ紹介したいと思います。
読みやすいコードを書くことで、書いている自分が見返す時に分かりやすくなるだけでなく、第三者がコードを見る際も理解しやすくなります。
- コメントを使用する
- スペース、タブを活用する
- インデントを揃える
コメントを使用する
// ○○のために処理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のコメントの仕方
- 一行コメントの場合は「//」を先頭に置く
- 複数行コメントの場合は「/*」「*/」で囲む
- 簡単なコードならGoogle Chromeにある「デベロッパーツール」機能の中の「コンソール」でJavaScriptは実行できる
- 「指定した値を出力する」命令は2種類ある
- 1種類目:ダイアログボックス
- 入力ダイアログボックス
- 警告ダイアログボックス
- 確認ダイアログボックス
- 2種類目:コンソール
- 本格的にJavaScriptを使うなら、ファイルにJavaScriptのコードを書いて開発する
- ファイルにJavaScriptを書く方法2種類
- HTMLファイルに直接記述する(直接定義)
- JavaScriptファイルをHTMLファイルに読み込む(外部定義)
- JavaScriptの書き方の主流は「JavaScriptファイルをHTMLファイルに読み込む(外部定義)」
- 「JavaScriptファイルをHTMLファイルに読み込む(外部定義)」でJavaScriptを学ぶ前の準備3つ
- フォルダを準備する
- JavaScriptファイルを作成する
- HTMLファイルを準備する
- 読みやすいコードの書き方のコツ
- コメントを使用する
- スペース、タブを活用する
- インデントを揃える
ここまでお疲れ様でした。
これまでの作業でやっとJavaScriptを始める準備ができましたね。
始める前だというのに、書き方のルールを覚えたり、JavaScriptを動かす準備が大変だったと思います。
これから基本的な文法を学んでいくと複雑なコードが増えていきますが、ここで学んだ基本のルールは守って進めていきましょう!
あなたは独学でJavaScriptを学んでいて、嫌になったことはありませんか?
独学で進める場合、分からない部分があれば、
自分で調べる⇒解決方法を見つけて解説を読む⇒解説の中で分からない部分を調べる⇒調べた結果で分からない部分をまた調べる…
という調査ループに陥ってしまい、嫌気が差して挫折することがよくあります。
「プログラミングを学ぶ」と一言でいってもコードを記述するだけではありません。
コード記述前は環境構築を行い、コード記述後はテストが必要です。
エラーが発生したら、エラーの原因を調査して自分で解決しなければいけません。
環境構築やエラー発生時の調査方法など、プログラミングを学び始めたときに躓いてしまうポイントは多岐に渡って潜んでいます。
独学で進める場合、これらの問題に対してインターネットや書籍から自分で調べて自分で解決していくしかありません。
独学でプログラミングを学んだことがある人ならば一度は経験していると思いますが、自分で調べて自分で解決することは非常に難しく、とても根気がいる作業です。
そのため、独学によるプログラム学習は挫折率が高く、ほとんどの学習者が一度は躓きや挫折を経験しています。
仮に根気強く頑張って一通りのプログラミングを学んだとしても、独学ではチーム作業を学ぶことができません。
プログラミングはシステムを開発するために行うことがほとんどですが、システム開発はチーム作業が主です。
チーム作業を学べないというのは大きなデメリットになります。
これらのことを踏まえて考えると、独学でJavaScriptを学ぶことは本当に効率的でしょうか?
JavaScriptを学ぶ理由は「エンジニアになりたい」・「転職したい」・「副業したい」など人それぞれだと思います。
前向きな目標を達成するために自主的に学んだのに、挫折して諦めてしまうのは非常に勿体ないですよね。
人生は一度きりです。
やりたいことをやったほうがいいに決まっています。
では、挫折せずに効率よくJavaScriptを学ぶにはどうしたらいいのでしょうか?
結論から言うと、挫折せずに効率よくJavaScriptを学ぶ方法は「Code Village」を受講することです。
「Code Village」は必要な教材・教育・サポートが揃っており、受講生の学習継続率も93%と非常に高いスクールです。
挫折せずに効率よくJavaScriptを学ぶには「Code Village」を受講することをオススメします。
「Code Village」の口コミを一部紹介します。
- 20代男性 職種:公務員 5.0
-
自走力が身に付くスクールです。基本的にはスクールのオンライン教材を見て学習し、実際に手を動かしながら理解を深めていくというやり方で行います。なのでHTML/CSS、JavaScriptにも少し触れておくことをお勧めします。自分のタイミングで好きな時に好きなだけ学習できます。強制されることはありません。私は6か月在籍していましたが教材の種類が豊富だったおかげで自分の学びたいことを好きなだけ学習することができました。まだ学習できていない教材もありますが卒業後も教材をみられるようなので卒業した今でもそこで学習しています。このスクールにはスタディールームというオンラインルームがあり、質問や疑問があればそこで講師の方に質問したり、エラーを見せてどの部分に問題があるのか聞くことができます。(聞きすぎてしまうと自走力がつかないと思うのでどうしても自分自身では解決できないときにのみ利用したほうが良いと思います。)講師の方はわかりやすく丁寧にどこに問題があるのか教えてくれます。また定期的に学習の進捗状況を共有したりするメンターと呼ばれる方が1人ついてくれるのですがその方にスクールのお勧めの教材などを聞くことができるので効率的に学習することができます。とにかく自由度が高いスクールで自分で考えて学習したい。効率的に学習したい。好きな時に学習したい。という方にすごくマッチしたスクールだと感じました。
引用元: コエテコキャンパス
- 20代男性 職種:公務員 5.0
-
入校する前はもうちょっと基礎を固めてから入った方がいいんじゃないかと躊躇していましたが悩んでいても仕方がないと思い入校しました。 入ってみるとやはり難しかったものの、 講師の方が一から丁寧に教えて下さり、一人でやっている時よりも得るものも多く覚えるスピードも早かったです。 また、もくもく会で受講生と話しているとみなさん目標に向かって頑張っていて、とても刺激になり、より頑張ろうと思えました。 決して安くない金額ですが入ってよかったなと思っています。 もし迷っている方がいらっしゃったら仮入校制度もあるので気軽に入ってみるのもいいと思います!
引用元: コエテコキャンパス
- 20代女性 職種:パート 5.0
-
こちらのスクールを受講してよかったと感じています。フロントエンドエンジニアとして今現在使用されている言語を中心に学ぶことができ、バックエンドに関する最低限の知識なども教材の中に盛り込まれていた点が良かったです。また、教材内容と期間に対する価格が他者さんに比べていい点も、スクールの決め手となりました。
引用元: コエテコキャンパス
ここでは一部のみの紹介となりましたが、以下の記事で総勢32人の受講生のリアルな口コミを紹介しています。
更には、なぜ「Code Village」で受講すべきなのか?、「Code Village」を利用するまでの3ステップなども記事にまとめていますのでぜひチェックしてみてください。
今なら全コース1週間無料体験実施中!!「Code Village」についての詳細はこちらをチェック!!JavaScriptの学習方法について困っていませんか? こんにちは。現役プログラマーのnktatです! JavaScriptはWeb系のフロント開発において世界標準といえるポジションであり、JavaScriptを利用し …