日曜エンジニア日報

JavaScriptプログラミングの基礎

これはJavaScriptプログラミング学習の記録です。

プログラミングの基礎、土台となる考え方を身に着ける目的で始めたものです。

実際にコードを試して、気づいたこと・納得した内容を記録していきます。

ブラウザ上でプログラムを実行できるCODEPENを使って記録していきます。

 

数値の計算

まずは、数値の計算をしてみます。

足し算、引き算、掛け算、割り算、なんでもござれの結果です。

See the Pen
数値の計算
by MacLove (@maclove1)
on CodePen.

 

 

文字列の表現

文字を表示してみます。

See the Pen
文字列の表現
by MacLove (@maclove1)
on CodePen.

コンピュータの世界では、数値と文字を区別して考えます。

document.writeln(100);

document.writeln("100");

 

この違いは、計算できるかどうかです。

document.writeln(100 + 100); // 計算できる

document.writeln("100" + "100"); // 文字をつなげる

 

数を文字として表示する場合は、”(ダブルクォーテーション)か’(シングルクォーテーション)で囲みます。

 

 

変数

変数とは「文字や数値などを一時的に保存しておくもの」です。

See the Pen
変数
by MacLove (@maclove1)
on CodePen.

 

プログラムの=(イコール)と算数の=(イコール)は意味が異なります。

算数で「a=b」とあれば、「aはbと同じ」という意味になります。

しかしプログラムで「a=b」と書くと、「bをaに入れる」という意味になります。

bの中に数値の3が入っていれば、「a=b」で「aに3が入る」という意味になります。

  • プログラミングの=(イコール)と算数の=(イコール)は違う。
  • プログラムは基本的に、上から下の順に実行される。
  • 文字と数値は別物。

 

変数に入ったデータはいつまで記憶しているのか?

JavaScriptの変数は、ページがリロードされるまでデータを記憶しています。

 

なぜvarを使わない方がいいのか?

varはグローバル(どこからでも)参照できるので、プログラムの規模が大きくなると予期せぬ代入が発生し危険だからです。

 

型付け

JavaScript は弱い型付けあるいは動的型付けの言語です。JavaScript では、変数が直接的に特定のデータ型に関連付けられているわけではなく、どの変数にもあらゆる型の値を代入 (および再代入) することができます。

 

 

値の型

プログラミングで扱う値(データ)には型があります。

数値と数値を足せば、足し算の結果が出力されます。

文字と文字を足せば、文字の連結ができます。

数値の1と文字の”1″を+で繋げても足し算のような計算はできません。

このように、プログラミングではデータ一つずつに「型」があります。これを意識することが重要です。

 

JavaScriptで使われるおもな型は以下です。

  1. 文字列
  2. 数値
  3. 配列
  4. オブジェクト
  5. 真偽値
  6. Null
  7. Undefined

 

See the Pen
値の型
by MacLove (@maclove1)
on CodePen.

配列

複数のデータをまとめたものです。

オブジェクト

キーと値のセットで表すデータです。

真偽値

trueとfalseどちらかを表すデータです。

Null

 

Undefined

何も代入されていない変数に設定されるデータです。

 

 

 

 

コメント

プログラムのファイル内には、プログラムの動きとは関係の無いメモのようなものを書くことができます。これをコメントと言います。

以下のサンプルのように「どのような処理をしているのか」をメモ書きのように書いておきます。

// 足し算した結果を変数xに入れる
x = 3 + 1;

 

コメントを書くメリットは、他の人が見た時にわかりやすいという事と、1年後にコードを見てもすぐに理解できる。という事です。

作ったプログラムを改良するために、1年後に見直すということは往々にしてあります。こんな時にコメントがあると、プログラムの内容をすぐに理解できます。

 

 

関数

関数とは、プログラムのまとまりです。プログラムのまとまりには自分で名前をつけて、後で実行させることができます。

「同じような処理をまとめる」という考え方です。

プログラムを料理の手順に例えると以下のようなことです。

function 目玉焼きを作る() {
    油をひく;
    たまごを入れる;
    盛り付ける;
}

目玉焼きを作る();

フライパンを洗う;

目玉焼きを作る();

 

目玉焼きを作るために、3つの作業があります。この一連の作業をまとめて「目玉焼きを作る」という関数を作ります。

作った関数をいつでも呼び出して実行することができるので便利です。

 

 

条件分岐

 

 

例外処理

 

 

正規表現

 

 

演算子