Gatsby.jsを利用した爆速Webサイト制作 Lesson 2： JavaScript超入門その１
こんにちは、Teshi(@atsuhio)です。フィリピンに住みつつ、欧米の子供向けプログラミングスクールCodeGrit Jrを開発中です。オンライン英会話サービスも運営しています。
このレッスンは、以下のリンクにある初心者向けプログラミング学習コースの一部として作成しています。
前回のレッスンでは、このコースで学んでいくGatsby.jsについての詳しい紹介を行いました。レッスンでも述べましたがGatsbyを使ったWebサイト作成には以下のような知識が必要です。
1. HTML/CSSの基礎知識
2. JavaScriptの基礎知識
3. React.jsの基礎知識
4. GraphQLに関する基礎知識
今回のレッスンからは２番目のJavaScriptについて超入門的な解説をおこなっていきます。
JavaScript(ECMAScript)とは？
JavaScriptの歴史はブラウザと共にあります。世界初のWebブラウザ「ネットスケープ」のために開発が行われ、以来ブラウザで利用される主要な言語となっています。
実はJavaScriptの正式名称はECMAScriptといいます。ではなぜJavaScriptと呼ばれているかというと、これはネットスケープの開発チームがマーケティングのためにJava言語の人気にあやかろうとしたためだそうです。よく初心者初心者の方はJavaScriptをJavaと略してしまいがちなのですがJavaは全然違う言語なので気をつけましょう。略すときはJSといいます。
JavaScriptのバージョンとトランスパイル
さてこのECMAScriptですがバージョンアップが進み現在ブラウザ上で標準に動くのはECMAScript5(通称ES5)となっています。しかし、実際にはプログラマはさらに先のバージョンであるECMAScript6や7をすでに使っています。
でも、ブラウザ標準ではないのでそのままES6や7のコードをブラウザ上で動かそうとしてもブラウザによっては上手くいきません。そのため、ES6や7のコードをES5のコードに変換するということが通常行われます。
この変換のことをトランスパイルといいます。GatsbyにおいてはES7の一部の機能やES6のコードは自動でES5への変換してくれます。そのためこのコースではES6を基準にしてJavaScriptのチュートリアルを書いていきます。(ただし、一部ES5の書き方が必要な場合がありますのでその場合は別途解説を行います。)
JavaScriptのコードを書いてみよう
JavaScriptの説明だけを読んでいてもイメージもわかないしつまらないと思うので、早速コードを書いて見ましょう。
JavaScriptはブラウザで動くということもあってオンライン上で簡単にコードを試せるサイトがたくさんあります。今回はその中でも代表的のものの一つjsFiddleを使ってみましょう。
まずは以下のリンクからjsFiddleのTOPページを開きます。するとすぐにコードを打ち込める画面が出てきます。
画面左下にJavaScriptを打ち込める場所があるので次のように書いて見ましょう。
window.document.write('<h1>初めてのJavaScript</h1>');書けたら、画面の左上にある"Run"という部分をクリックします。
すると上の画像のように画面に初めてのJavaScriptと表示されるはずです。
簡単にコードの解説をしていきます。
window.document.write('<h1>初めてのJavaScript</h1>');こちらのコード、windowという部分は、白い画面の部分のことを指しています。documentというのはwindowの中のHTMLドキュメントを指しています。
次にwrite('<h1>初めてのJavaScript</h1>')の部分ですが、こちらはWindowの中のHTMLドキュメントに対して、<h1>初めてのJavaScript</h1>を書き加えて(write)くださいという命令になっています。
この命令のことをプログラミングの世界では「ファンクションの呼び出し」と言ったりします。ファンクションについてはレッスン3で詳しく見ていきますが、簡単にいうと何らかの動作を一つにまとめているものです。ここではHTMLドキュメントに書き込むという動作をしていて、そのファンクションにwriteという名前がつけられています。
JavaScriptで簡単な計算をしてみよう
さて、プログラミングでは良くなんらかの計算をすることがあります。中学生レベルの数学レベルの知識があればよく難しく考えなくていいのですが、学校で習ったのとは違う記号を使ったりするのでそれだけ見ていきましょう。
足し算: + (例: 1 + 5 => 6)
引き算: - (例: 6 - 1 => 5)
掛け算: * (例: 3 * 4 => 12)
割り算: / (例: 12 / 3 => 4)
割った余りを知りたい場合: % (例: 12 % 7 => 5)
ご覧のように掛け算は×ではなく*、割り算は÷ではなく/を使うので注意しましょう。
これも先ほどと同様に画面に実際に出して見ましょう。しかし、その前に一点注意することがあります。
データ型
JavaScriptに限らずプログラミング言語にはデータ型というものが定義されています。JavaScriptでは全部で８個のデータ型が存在しています。
String型(文字列型)
先ほど入力した、'<h1>初めてのJavaScript</h1>'を見てみましょう。このとき文章の最初と最後に'という記号があることに気が付くかと思います。このように文字を扱うとき'あるいは"で文字を囲ってあげる必要があります。
この文字の集まりのことを専門用語でString型(文字列型)と呼びます。ストリングとは英語でそのまま文字列のことを指します。
Number型(数値型)
数字を扱う場合は'はつけなくて大丈夫です。数字の場合はNumber型（数値型)と呼びます。こちらも英語でそのまま数値という意味になります。
計算結果を表示してみよう
ここまで理解できたところでコードを書いて見ましょう。先ほど開いていた画面のままで大丈夫です。最初のコードの下に追加で以下を書いてみましょう。
window.document.write('<p>3 × 4 = ');
window.document.write(3 * 4);
window.document.write('</p>')すると実行の結果白い部分に以下が表示されるはずです。
3 × 4 = 12ここで、あれっと思う方もいるのではないでしょうか？プログラムの方は３行に分かれているのに、実行結果は１行です。これはなぜかというと、HTMLにおいては改行は明示的に<br/>のような改行タグがないと行われないからです。
もう一つの注意点があります。上記のプログラムの
window.document.write(3 * 4);の部分ですが、ここでは数値型をそのまま表示しようとしています。しかし、JavaScriptが実行時に数値型を自動的に文字列型に変換してくれています。そのために何のエラーも出ずに結果が表示されています。
明示的にこれを行いたい場合には次にようにすることができます。
window.document.write((3 * 4).toString());改めて実行して見ましょう。同じ結果が確認できるはずです。
もう少し詳しく見ましょう。
(3 * 4).toString()この部分を訳すと、3 * 4の実行結果に対してtoString()というファンクションを呼び出すよう命令しています。toStringは名前からも分かる通り「数値に変換する」動作を扱います。
また数学と同じで、ファンクションを呼び出したい対象を()で一つにまとめたりできます。(3 * 4)の部分がそうでこの部分の結果に対してtoString()を適用しています。
次にこの計算を変数というものを使って実行してみましょう。
変数と変数宣言
変数とは何か簡単にいうと、「あるデータ型の値を格納している場所でありその名前」と言えます。実際に変数に文字列型を格納してみましょう。
var a = "初めての変数"詳しくみていきましょう。
変数宣言:
一番最初に出てくる'var'というのは変数の種類を表しており、後ほど説明していきますが他に'let'と、'const'という種類があります。
このvar aの部分はプログラミングでは「aという変数を宣言する」といいます。
変数への値の格納:
もう一つ重要な概念を紹介します。数学では'a = b'はaとbは同じという意味ですが、プログラミングではちょっと違い、aにbを格納するという意味を持ちます。
この式の場合は変数aに対して"初めての変数"という文字列を格納しています。
例えばこんなこともできてしまいます。
var a = 4;
var b = 3;
a = a + b;これはaという変数にaとbを足した結果を再代入しています。aが4、bが3なのでaには新たに7という数値が代入されています。
気をつけていただきたいのは一度宣言をした変数を再度使う場合は、宣言キーワードは必要ないということです。
例えば以下のようにする必要はありません。
誤った例:
var a = 4;
var b = 3;
var a = a + b;letとconst
さて、上記でvarというキーワードを使って変数宣言をしましたが、varというのはES5まで使われていた宣言方法でES6からはletとconstを使うようになっています。
ここではletとconstの違いについて簡単に説明します。この2つの違いは簡単で宣言を行ったあとに格納している値を変更できるかどうかだけで決めます。
let - 宣言後、変数の値を変更できる。
const - 宣言後、変数の値を変更できない。
constは英語のConstant(不変な)という単語から来ています。constは不変と覚えればletはその逆なので覚えやすいかと思います。
letを利用した例:
例えば以下のコードはエラーにはなりません。
let a = 2;
a = '新しい値';このコードでは次のことをしています。
1行目 - 数値型の値2をaという変数を宣言して格納。
2行目 - aに新しい文字列型の値'新しい値'を格納。
このようにletで宣言した変数には異なるデータ型の値を入れることもできます。発展的な内容のため、詳しくは解説しませんが、これは便利な反面問題になりやすいためより厳密なプログラムを書くために多くの企業がTypeScriptを利用します。
constを利用した例:
逆にconstを使って同じことをしようとするとエラーが出ます。
const a = 2;
a = '新しい値';
=> Uncaught TypeError: Assignment to constant variable.上記のように、constで宣言した変数には新しい値は格納できません。
変数を使ってプログラムをアップデートしよう
では、最後にこの変数宣言と変数を使ってプログラムをアップデートしましょう。
まずは少しだけ自分で考えてやってみてください。以下のようなプログラムを再現しましょう。
1. letを利用して変数aを宣言して、その中に8を格納する。
2. constを利用してbという変数を宣言して、その中に3を入れる。
3. aに対して、'a + b'を再代入する。
4. letを利用してresultという変数を宣言してaをbで割った時の余りを格納する。
5. toString()ファンクションを利用してresultにresultを文字列に変換したものを再代入する。
4. 最後に画面に「結果は'resultの中身'です。」と表示する。
ここまでの知識でできますのでもし分からないという方はもう一度今回のレッスンの内容を読み直して理解を深めましょう。
できたでしょうか？できたら解答例を見て答え合わせしてみましょう。
解答例:
let a = 8;
const b = 3;
a = a + b;
let result = a % b;
result = result.toString();
window.document.write('<p>結果は');
window.document.write(result);
window.document.write('です。</p>');以下の画像のように「結果は２です。」と表示されればOKです。
まとめ
今回のレッスンでは以下のようなことを学びました。どれも重要な概念なのでしっかり理解しましょう。
1. JavaScriptには複数バージョンがありES6が主に使われる。
2. 四則演算は+-*/という記号を使って行う。
3. 変数宣言にはletとconstというキーワードを使う 。
4. それぞれの値は数値や文字列などのデータ型を持つ。
次回のレッスン３では、今回のレッスンでも少し触れたファンクションについて、自分で作る方法や使い方を学んでいきます。
レッスン３は以下のリンクからご覧いただけます。