Javascriptを使ったプログラミング

JavaScriptは、ウェブサイトのプログラミングに使用されるプログラミング言語です。CSSやHTMLと並んで、ウェブ開発者によく使われています。JavaScriptは学びやすい言語です。この記事ではJavaScriptの基本を紹介します。

第1回

JavaScriptを始める

1. 何を使ってコーディングするかを決めるJavaScriptは、ワールド・ワイド・ウェブ上のすべてのウェブサイトで使われています。すでにコンピューターにインストールされているので、何もインストールする必要はありません。しかし、どのアプリやサイトでコーディングするかを決める必要があります。

   • JavaScript、Python、Javaなど、多くのプログラミング言語をコーディングできる子供向けサイトがある。ただし、サブスクリプションを購入する必要があるので、無料のオプションではない。
   • は全年齢向けの無料オプションだ。ウェブサイトにアカウントを作成するだけで、コーディングを始めることができる！このウェブサイトでは、JavaScriptのコーディング方法のチュートリアルも提供している。
   • ブラウザでコードを実行することもできます。ブラウザの右端にあるメニューボタンをクリックするだけです。ブラウザの右端にあるメニューボタンをクリックしてください。そして、More toolsまでスクロールしてください。Developer Tools」、「Web Developer」または「Develop」をクリックしてください。最後に、コンソールをクリックしてください。そこで入力を始めることができます。
   • オフラインでコーディングしたい場合は、テキストエディタを使うことができる。WindowsにはNotePad、MacOSにはTextEdit、Chrome OSにはText（Chromebookアプリ）、LinuxにはNotepadqqがある。などのソフトウェアをダウンロードすることもできる。
   • ブラウザに含まれているJavaScriptのバージョンは非常に強力で、実際のプロのJavaScript開発にも転用できますが、プロの開発者はTypeScriptや最新のECMAScriptのような言語のスーパーセットでプログラミングすることが多いことに注意してください。
2. JavaScript のチュートリアルを探す。JavaScript を学ぶ際に利用できるリソースはたくさんあります。JavaScript に関する本を読んだり、ウェブで資料を探すことができます。JavaScript を教えるウェブサイトや YouTube チャンネルはたくさんあります。

   • これらは無料です。これらは無料でもあります。JavaScriptを含め、多くのプログラミング言語（ブロックコーディング、Python、Java、JavaScriptなど）があります。
   • JavaScriptを教えるYouTubeチャンネルはたくさんあります。
   • JavaScript for Kids - A Playful Introduction to Programming やJavaScriptのようなJavaScriptを教える本もあります：決定版ガイド：世界で最も使われているプログラミング言語をマスターしよう。

パート2

JavaScriptの基本機能を使う

1. コードにコメントを書きましょう。コメントは何もしないコードの一部です。コードを実行しても、他のコードと干渉することはありません。コメントを使って、自分自身へのメモを書いたり、ヘッダーを作ったりすることができます。

   • 1行のコメントを入力するときは//を使います。
   • 複数行のコメントの場合は、必要な単語を/*と*/の間に入れます。
2. JavaScriptで変数を宣言する。変数はデータを格納するために使用されます。コンピュータは変数の値をメモリ内のアドレスに格納します。JavaScriptでは、var、let、constを使って変数を宣言します。

   • 例えば、var x = 1;、let x = 1;、const x = 1;は同じです。
   • 古いブラウザでコードを実行したい場合は、varを使うのがベストです。varは、JavaScriptが最初に発明された1995年に追加されました。変数の値を変更したくない場合は、constを使います。
   • 変数の名前には特別なルールがあります。
     • 名前は文字で始めなければならない（記号や数字は不可）。
     • 名前は大文字と小文字を区別する（yとYは両方が大文字でも両方が小文字でもないため、別の変数となる）。
     • 名前自体には記号や数字を含めることができます。
     • キャメルケース（Camel Case）を使用することもできます。これは、名前の最初の部分を小文字にし、名前の2番目の部分を大文字で始めるという変数名の付け方です。(例：carName、lastName、fruitType、videoGameType）。
     • また、スネークケース（Snake Case）を使用することもできます。これは、変数名の一部をアンダースコアで区切る命名方法です。(例：car_name, last_name, fruit_type, video_game_type)
     • パスカルの大文字小文字も変数名の命名法の1つです。変数名の各部分は最初の文字が大文字になります。(例：CarName, LastName, FruitType, VideoGameType)
     • var、let、const、boolean、true、false、importのようなJavaScriptのデフォルトのキーワードを変数名にすることはできません。予約語の完全なリストは .
3. 異なるデータ型を使う。JavaScriptには8つの異なるデータ型があります。基本的にテキストである文字列、数値、ブーリアン、オブジェクト、シンボル、undefined、null、BigIntです。

   • 基本的なデータ型は、文字列、数値、ブーリアン、未定義、NULLです。
   • 文字列は一連の文字です。文字列は一重引用符または二重引用符で囲んで書きます。
   • numberは253-1{displaystyle 2^{53}-1}より小さい数である。
   • ブール値は真か偽の値を持つバイナリ変数です。
   • BigInt は 253-1{displaystyle 2^{53}-1} より大きい数値を表すために使用します。
   • 未定義は、宣言されていない変数（変数を作成するが、var、let、const.を使用して宣言しないことを意味する）、または値が割り当てられていない変数を表すために使用されます。
   • Null は、意図的に値がない場合に使用します。
   • JavaScriptの変数の型がわからない場合は、typeof演算子を使って調べることができます。
4. JavaScriptで基本的な演算を行う。JavaScript では、加算、減算、乗算、除算の基本演算子を使用します。

   • + は加算。
   • - は引き算です。
   • * は掛け算です。
   • / は除算。
   • は割り算の余り。(モジュラスとも呼ばれる)
   • ** は指数。
   • ++ はインクリメント。
   • -- はデクリメント。
5. 関数を使う。関数は特定のタスクを実行するコードのブロックである。関数は簡単に作ることができる。

   • 関数を作るには、 function name(parameter1, parameter2, parameter3) {} と入力します。関数の内部をすべてインデントしてください。
   • 関数のパラメータは、関数の内部に記載されている名前です。
   • 関数の引数とは、関数に渡され、関数が受け取る実際の値のことです。
   • 関数を呼び出すには、（関数名）（パラメータ1、パラメータ2、パラメータ3）と入力します；
   • グローバル変数とローカル変数の違いを知る。グローバル変数は関数の外部で宣言されます。ローカル変数は関数の内部で宣言されます。グローバル変数はJavaScriptプログラムのどこでも（関数の外でも）呼び出せますが、ローカル変数は関数の中でしか呼び出せません。
6. オブジェクトを作成します。オブジェクトは変数とは対照的に、多くの値を含むことができます。オブジェクトにはプロパティとメソッドがあります。プロパティはオブジェクトの値で、メソッドには関数の定義（プロパティ）が含まれます。

   • オブジェクトを作成するには、const (オブジェクトの名前) = {name:value} と入力します。
   • 改行やスペースを入れても、コンピューターはオブジェクトを理解することができます。
   • 人々はしばしばconstを使ってオブジェクトを作成します。
   • オブジェクトのプロパティにアクセスするには、(objectName).(propertyName) または (objectName)["propertyName"] と入力します。
7. JavaScriptでは配列を使います。配列はオブジェクトと同様に、複数の値を格納することができます。違いは、オブジェクトの値が1つのものを表すのに対し、配列は食料品リストのように互いに異なる個々の値を格納することです。

   • 配列を作成するには、const array_name = [item1, item2, ...] と入力します；
   • 配列の値を変更するには、cars[(値のインデックス)] = (新しい値); とタイプする。リストの最初の値のインデックスは0なので、1, 2, 3, 4...ではなく、0, 1, 2, 3...のような順番になることに注意しよう。
   • 変数は1つの型だけでなく、どんな型でも持つことができる。例えば、文字列、数値、オブジェクトを配列に入れることができる。配列自体も配列の中に入れることができる。
8. つのものを比較する。つのものを比較するには、特別な記号を使う必要があります。

   • == は等号です。最初のイコール（==）が実際に2つの変数を比較するのに対し、2番目のイコール（=）は変数に値を代入するので、==とは異なります。
   • === は等値・同型記号です。これは2つの変数とその値、データ型を比較します。他の2つのイコールはデータ型を比較しません。
   • は等号ではありません。2つの変数が互いに等しくないかどうかを比較します。
   • は、値やデータ型が等しくないことを示す記号です。2つの変数が互いに等しくないか、データ型が異なるかを比較します。
   • > は大なり記号です。2 つの変数を比較して、最初の変数が 2 番目の変数より大きいかどうかを調べます。
   • < は小なり記号である。<= は2つの変数を比較して、それらが互いに等しいか等しいかを調べます。
9. 論理演算子を使う。論理演算子は、if文のようなコードで使われます。変数や値の論理的な比較に使用します。

   • &&は、andという単語を使って2つの文をつなげるために使われます。もし誰かがif文を書いて、if (x>10) && (x<20) {return x}と書いたとすると、&&は2つの文をつなげて、"もしxが10より大きく、かつxが20より小さければ、変数xを返す "と言うことになります。
   • |｜は、orという単語を使って2つの文をつなぐのに使われる。もし誰かがif文を書いて、if (x>10) }と書いたとしたら、｜｜は2つの文をつなげて、"もしxが10より大きかったら、あるいはxが20より小さかったら、変数xを返す "と言う。
   • !"は、"not "を使って2つの文をつなげるときに使う。もし誰かがif文を書いて、if (x!=20) {return x}と書いたとしたら、!は2つの文をつなげて、"もしxが20に等しくなければ、変数xを返す "と言うだろう。
10. if文を使う。if文は、その文が真であればコードを実行する。

    • if文は、if (条件) {(条件が真の場合に実行されるコード)}とタイプして書きます。
    • else ifブロックを使って、if文が偽の場合の処理を指定することができます。else if {(条件が偽の場合に実行されるコードのブロック)}のようにif-else文のelse if部分をタイプする。else ifブロックは複数書くことができる。
    • elseブロックを使って、if文とelse if文が偽の場合の処理を指定することができます。else {(条件が偽の場合に実行されるコードのブロック)}のように、if-else文のelse部分をタイプする。else部分をif部分の下に書く。
    • そして、関数の中に入るものはすべてタブを押して入力し、インデントします。
11. JavaScriptを使ったコーディングでは、簡単なプロジェクトを作成します。JavaScriptコーディングの知識を試すために、いくつかのプロジェクトを作成してみましょう。

    • .
    • .
    • マッドリブとしても知られています。
    • .

パート3

JavaScriptの中級機能を使う

1. クラスについて学びましょう。クラスはオブジェクトを作成するために使用できます。クラスのパラメータは、クラス内に存在する変数の名前です。

   • 書式は class ClassName { constructor() { ...}}
   • オブジェクトを作成するには、キーワード class を使用します。書式は (var, let, const) objectName = new className(オブジェクトのパラメータ) です；
   • クラスには必ずコンストラクタ();というメソッドを追加してください。
2. JavaScriptで何かをプリントアウトするJavaScriptにはprint()文はありません。出力を表示するには、以下のコードのいずれかを使用します。

   • HTML要素にアクセスするには、document.getElementById(id).innerHTMLを使用します。
   • document.write(); - テスト用。
   • window.alert(); - メッセージ付きのアラート・ボックスを表示します。
   • console.log(); - コンソールでデバッグを実行します。
3. forループを使う。forループは命令を繰り返します。何度も命令を書き出す代わりにループを使うだけなので、非常に便利です。

   • for (initialization; condition; finalExpression) {(code)}と入力して記述します。
   • forループの中に入るものはすべてtabを押して入力し、インデントする。
   • initializationは、ループ内の変数を初期化または設定するためのものです。最もよく使われる変数はiである。
   • 条件は、ループを何回実行するか、ループをいつ終了させるかを決めます（例えば、数値を出力する場合はiが10より大きくなったときにループを終了させます）。特定の条件を書かないと、コードは永遠にループすることになる。コンピュータは永遠に動き続けることはできないので、クラッシュしてしまいます。 条件を書きたくない場合は、キーワードbreakを使ってループを終了させてください。
   • 最後の式は省略可能です。これは変数をインクリメントします（例：i++、i = i + 10、またはi--）。
4. while ループを使う。whileループは、条件が真である限りタスクを実行する。forループに似ている。

   • while (condition) {(実行するコード)}と入力してwhileループを書く。
   • そして、whileループの中に入るものはすべてタブを押して入力し、インデントする。
   • 条件で使う変数は必ず増やしてください。あなたのコードは永遠に実行されるので、変数を増やさないとコンピューターがクラッシュします。
   • do-whileループを使う。これはwhileループの変形です。コードを一度実行し、条件が真か偽かをチェックする。現在真なら、whileループのようにコードを実行する。コードが偽の場合は、実行を停止する。
   • do-whileループの構文は次のようになる： do {(実行するコード)} while (条件)；

パート4

JavaScriptで高度な機能を使う

1. 配列メソッドを使う。JavaScriptでは配列を使っていろいろなことができます。

   • .toString()メソッドは配列を文字列に変換します。値はカンマで区切られます。
   • .join() メソッドは、配列の値を結合します。各要素を括弧で区切る記号を入力します。
   • .pop() メソッドは、配列の最後の要素を削除します。
   • .push() メソッドは、配列の末尾に要素を追加します。
   • .shift() は、配列の最初の要素を削除し、他のすべての要素を別のインデックスにシフトします。
   • length を使用すると、配列に新しい要素を簡単に追加できます。
   • .concat() メソッドは、配列を連結します。これを連結といいます。
   • .includes()は、配列内に特定の要素があれば真を返し、特定の要素がなければ偽を返します。
2. math オブジェクトを使用します。math オブジェクトは静的で、プロパティやメソッドは math オブジェクトを作成しなくても使用できます。定数を調べたり、その他の数学関数を実行したりするには、math オブジェクトを使用します。

   • Math.round(x);、Math.ceil(x);、Math.floor(x);、Math.trunc(x);で数値を丸めます。Math.ceil(x);は最も近い整数に切り上げ、Math.floor(x);は最も近い整数に切り捨て、Math.trunc(x);は数値の整数部分を返す（小数点はない）。
   • Math.power(x,y)：xの値をyのべき乗で返す。
   • Math.sqrt(x);：数値の平方根を返します。
   • Math.cbrt(x);：数値の立方根を返します。
   • Math.abs(x);：数値の絶対値（ゼロからの距離、常に正）を返す。
   • Math.max()関数は、数値のリストから最大/最大の数値を求めます。
   • Math.min()；数値のリストから最小の数値を求める。
   • Math.sin(x);：角度xの正弦を返す。
   • Math.cos(x)関数は、角度xの余弦を返します。
   • Math.tan(x);：角度xのタンジェントを返します。
   • Math.random();：0から1の間の乱数を返します。
   • Math.log(x);：xの自然対数を返す。
3. スコープとは何かをもっと理解しよう。スコープとは変数のアクセス可能性のことである。変数がどこにアクセスできるかを教えてくれる。

   • letとconstというキーワードは、ブロック・スコープを持つ変数を作ります。これは、変数がブロック内でしかアクセスできない場合です（通常は{}で囲みます）。
   • varキーワードで作成された変数は、コンピュータ・プログラムのどこにでもアクセスできる。これをグローバル・スコープと呼ぶ。
4. JSONを使う。JavaScriptにはJSONというものがあります。これはJavaScript Object Notationの略です。これは、読めないコンピューターデータを人間が読める情報に変換するのに役立ちます。軽量なテキスト形式です。JSONは言語に依存しないので、どのプログラミング言語でも使うことができる。

   • JSONは{name:value}と入力して記述する。JSONはプログラミング言語のサブセットであるため、JavaScriptと似たフォーマットを持っている。データはカンマで区切られる。
   • 値には文字列、数値、ブーリアン、オブジェクト、配列を指定できる。

この記事は、CC BY-NC-SAの下で公開されている「 How to Program Using Javascript 」を改変して作成しました。特に断りのない限り、CC BY-NC-SAの下で利用可能です。