この記事では、JavaScriptの初学者・入門者に対して、初めの一歩となる基本を詳説しています。
内容は👇の目次に沿っていますので、初めてJavaScriptに触れられる方は順番通りに、既に学習をスタートしている方は気になる箇所から読み進めてください。
なお、本記事はHTML/CSSはある程度理解されている方を対象としています。
HTML/CSSのコードは解説しておりませんので、予めご了承ください。
目次
Hello World
言語を問わず、プログラミング学習の第一歩といえばこれです。
「Hello World」とは
「Hello World」とは「Hello World」という文字列を表示させるだけの、世界一簡単なプログラムです。
文字列をどこに表示させるかは、言語によって異なります。
- C言語やJavaの場合
- コンソール
- PHPやJavaScriptの場合
- ウェブページ
「Hello World」を作る
まずはエディタを開き、次のプログラムをコーディングしてみましょう。
※ 本ブログでは、エディタに VS Code を使用しています。
alert( "Hello World" );続いて、このJavaScriptをHTMLで読み込みます。
<!doctype html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<script src="script.js"></script>
</body>
</html>2つのファイルが完成したら、HTMLファイルを開き、ブラウザに表示させてみましょう。
👆のように、アラートがポップアップすれば成功です。
この時点で、何をどう操作すれば良いのか分からなず、「Hello World」が完成できないという場合は、プログラミング学習の前にPCそのものについての理解が必要かもしれません。
焦らず、PCの基本からの学習をお勧めしますので、こちらの記事を確認してみてください。
別の「Hello World」と開発者ツール
次に、「Hello World」を開発者ツールのコンソールに表示させます。
JavaScriptの基礎的な文法を学習する間は、しばらくコンソールを使用しますので、開発者ツールの開き方が分からない方は、こちらの記事で確認してください。
「Hello World」コンソール版
先ほど作成した hello.js を以下の通り書き換えてください。
console.log( "Hello" );「alert」だった箇所を「console.log」に、出力する文字列を「Hello」のみに変更しました。
ファイルを保存した後、HTMLをブラウザで開き、開発者ツールの「コンソール」タブにて結果を確認してください。
以下のように「Hello」がコンソールに表示されていれば成功です。
> Helloコードの解説
今回作成したJavaScriptのプログラムコードは1行です。
console.log( "Hello" );まず「console.log」とは、JavaScriptに備わっている機能で、コンソールにログを出力するための命令です。
（※ 厳密に（専門的に）言えば、「console」オブジェクトから「log」メソッドを呼び出しているという表現になりますが、現時点ではそこまで理解する必要はありません。）
機能を使う（呼び出す）ためには、丸カッコを記述します。
丸カッコの中には、その機能で使うための情報（今回の場合は “Hello” ）を渡してあげます。
プログラムをハックする ①
作成したコンソール版の「Hello World」をハックしてみましょう。
console.log( "Hello" );👇
console.log( Hello );どこが変わったか分かりますか？
文字列「Hello」を囲んでいた記号「”」（ダブルクォーテーション）を取り除いています。
編集が完了したら、ファイルを保存してからブラウザのコンソールで表示を確認してみてください。
> Uncaught ReferenceError: Hello is not defined「Uncaught ReferenceError」というのは、「捕捉不能の参照エラー」と和訳できます。
これからJavaScriptを学習していく中で頻繁に見かけることになるエラーなので、しっかり意味を覚えておきましょう。
「:」（コロン）に続いてエラーの原因が記述されています。
「Helloは定義されていません」と和訳できます。
JavaScriptの学習を始めたばかりですと、このエラーメッセージから原因に辿り着くのは困難です。
このメッセージの意味を正しく理解するためには、「変数」について知っている必要があるからです。
ただ、今の時点で、発生した現象からも仮説を立てることは可能です。
「文字列は、ダブルクォーテーションで囲まなければエラーになる」のではないか、という仮説が導き出せますね。
このようにして、エラーや不具合からエラーメッセージを確認し、自分なりの仮説を立てて検証する。
これがプログラミングの醍醐味です。
エラーに限らず、
「仮説を立てる 👉 検証する」
という工程のループはプログラマー／SEとして必須な思考、行動パターンです。
どんなに優れたプログラマーでも、エラーやバグを発生させます。
大切なのは、「エラーを出さない」ことよりも、「エラー原因を早期に特定し、迅速に修正できる」ことです。
よって、たくさんのエラーに遭遇することは何よりも勉強になり、「エラーはスキルアップするための宝」と言えます。
プログラムをハックする ②
ハック①で、「文字列はダブルクォーテーション（あるいはシングルクォーテーション／バッククォーテーション）で囲まなければならない」ことが分かりました。
それを頭に入れた上で、再び別のハックに挑戦してみましょう。
console.log( "Hello" );👇
console.log( 100 );さて、今回はブラウザで表示・動作を確認する前に、このプログラムの結果がどうなるか考え、ぜひ予測してみてください。
いかがですか？
結果として想定できるパターンは、以下のようなものではないでしょうか。
- 正常に動作し、コンソールには「100」が表示される。
- ハック①と同様に、「100 is not defined」のエラーになる。
- エラーメッセージは異なるが、何らかのエラーになる。
他にも、「こうなるのではないか？！」という案が出た方は素晴らしいです。たとえ、その案が間違っていたとしても、です。
間違えることは恥でもなければ問題でもありません。たくさんの案が出るだけで、エラー特定のチャンスは拡げられますし、間違った数だけ学びを得られます。
さて、それでは結果をお見せしましょう。
正解は…
> 100このように、正常に動作し、コンソールには「100」が表示されました。
この結果から、数値の場合は「オーテーションで囲まなくても良い」という新たな知識を得ました。
さあ、次が最終ハックです。
プログラムをハックする ③
最後に試してみるのは、2パターンの書き換えです。
ハック ③-1
作成したコンソール版の「Hello World」を以下のように書き換えてみましょう。
console.log( 10 + 10 );こちらも、ブラウザで表示を確認する前に、結果を予測してみてください。
ハック ③-2
作成したコンソール版の「Hello World」を以下のように書き換えてみましょう。
console.log( "10" + "10" );こちらも、ブラウザで表示を確認する前に、結果を予測してみてください。
JavaScriptのコメント
JavaScriptに限らず、多くのプログラミング言語には、ソースコード内に「コメント」を記述できます。
言語ごとに書き方が異なるので注意が必要です。
※ JavaとJavaScriptはコメントの書き方が同じなので、ここで覚えておけば、Java学習の際にも役立ちます。
「コメント」とは、人間が読むための注釈メモのようなもので、プログラムとしては無視され、処理対象になりません。
「コメント」には、次のような使用方法、メリットがあります。
- プログラムの可読性を高める
- 処理内容を補足でき、分かりやすくする
- ソースコードを変更した場合、変更前のコードを残しておくことができる
- デバッグの際に一時的に処理を実行しないようにする（「コメントアウト」と言います。）
コメントの書き方 2種類
- 1行コメント
- 2つのスラッシュ「//」で開始する
- 複数行コメント
- スラッシュ+アスタリスク「/*」と、アスタリスク+スラッシュ「*/」とで囲む
// これは1行コメントです。
console.log( "この上にコメントが書かれています。" );
/* ここから
複数行コメントを
書いていきます。
コメントを終わります。*/最後に
「ハック③」は、あえて実行結果を提示していません。
プログラミングの世界では自分で思考することが思う以上に重要です。
間違っても良いので、自分で予測を立てて実行し、結果を自分の目で確認してみてください。
- ハック③-1と③-2をプログラミングして、実行結果を予測👉確認してみましょう。
- ハック③-1と③-2の結果から学んだことをリストアップしてみましょう。
それでは、最後までお読みいただき、ありがとうございます。
本記事についての質問、誤りの指摘、ご意見ご感想などありましたら、ぜひコメント頂ければ幸いです。
コメント