JavaScriptを学ぼう！

13687 ワード
初心者 基礎 JavaScript JavaScript テキストリンク

JavaScriptを学ぼう！

【目次】

  • JavaScriptとは？
  • JavaScriptで計算しよう
  • JavaScriptで論理を扱う
  • ループで繰り返し処理
  • 配列を利用しよう
  • 関数を作ろう
  • オブジェクトを活用しよう

①JavaScriptとは？

JavaScriptとは、webページの情報に変更を加えられるプログラミング言語です。JSと略されて呼ばれています。（以下、基本JSと書きます）　

例えば、以下のようにJSをHTMLの<body>タグ内に記述すると、
“1+2”の計算式の説明と計算結果をHTMLに表示することが出来ます。


<script> //・・・(1)
  document.write('１足す２は')//・・・(2)
  document.write(1+2)//・・・(3)
  document.write('です')//・・・(4)
</script>

  1. <script>とは、HTML内でJSを書く際に必要なタグです。
    他のHTMLのタグと同様、最後には( / )（バックスラッシュ）を使って</script>と記述します。

  2. document.write( )とは、webページ上に情報を書き出す際に用いる関数です。
    ( )の中に書き出したい内容を記述しますが、注意点が1つあります。
    文字列を書く場合は( ' )（シングルクォテーション）で文章を囲む必要があります。（数字を書く場合は必要ありません）
    文字列とは、要するに文章のことだと思っていただいてかまいません。
    今回は、「１足す２は」と出力されます。

  3. JSでは、( )の中に計算式を入力した場合、( )内の計算が実行されます。
    （計算に使う記号については、「2.JavaScrptで計算しよう」で解説します）
    ここでは、(1+2)の計算を処理し、計算結果を出力します。

  4. 「です」という文字列を出力します。

上記のコードをHTMLのbodyタグ内に記述することで
webページ上には以下のように出力されます。

また、HTMLファイルが格納されているフォルダ内にJSのファイルを作成し、HTMLファイルに呼び出すことが出来ます。こうすることで、HTMLファイルには文章の構造、JSファイル内には処理と、それぞれの内容を読みやすくなります。
下記は、HTMLに「test.js」という名前のJSのファイルを呼び出す方法です。
（※JSのファイルを作成する場合は、末尾に「.js」をつけます）

<script src="test.js"></script>

ファイルを呼び出す場合は、<script src = " " >となります。
( " " )（ダブルクォテーション）内に呼び出したいファイルのファイル名を記述します。

②JavaScriptで計算しよう

JSでは、様々な計算を処理することができます。
ですので、下記のような数学の問題を解かせることが出来ます。

円の半径を r 、円の面積を Ar とする。
r = 3.88の時の Ar を求めよ。

②では、JSで計算するのに必要な3つの道具について紹介します。
3つの道具とは以下の3つです。

  • 値
  • 算術演算子（数学記号）
  • 変数

それぞれ見ていきましょう。


値

値とは、プログラムにおいて処理の対象となる単一のデータのことです。
値には以下の3種類があります。

〇数値

10, -45, 2.55などの数字

〇文字列

「こんにちは。」などの文章。( ' )で囲む必要がある。
文字列に記号を記述する場合は、記号の前に( / )を入れなければ、記号として認識されてしまうため注意。

〇真偽値

true / false : 「真」と「偽」を表す。
日本語の「はい」「いいえ」の選択や、「オン」「オフ」の設定の値として使える。

算術演算子（数学記号）

算術演算子とは、( + )や( - )など計算に必要な記号のことです。
JSでは以下の演算子を用いて計算を行います。
計算 　 演算子
足し算 +
引き算 -
掛け算（×） *
割り算（÷） /
割り算のあまり %

変数

変数とは、値を入れておく箱のようなものです。固有の名前をつけられます。変数を設定することを「宣言」といいます。宣言の仕方は以下の通りです。

var [変数名] = [値]

変数名は好きに決めてもらってかまいませんが、
英語で書くほうが好ましいです。
例えば、年齢を宣言する場合は　

var age = 22

となり、好きな食べ物を宣言する場合は

var favoriteFood = 'そうめん'

となります。


③JavaScriptで論理を扱う

論理とは、言葉のあいまいさを無くす道具です。あいまいな論理をプログラムは処理できないので、プログラムを書く上ではあいまいさを無くす必要があります。
下の文章を見てください。

「そうめんをご注文の方は、ねぎまたは大根おろしがつけられます。」

この場合、そうめんを注文したら、ねぎと大根おろしの両方をつけることはできるのでしょうか？はたまた、両方はつけられないのでしょうか？つけられないというのなら、なぜそう言い切れるのでしょうか？一緒に食べたほうがおいしいですよね？

日常生活であれば質問すれば解決する問題ですが、プログラムとなると、開発者に逐一質問するわけにもいきません。
そのため、比較演算子を用いてものごとの真偽( true / false )をはっきりさせる必要があります。

比較演算子とは、値と値を比較して真偽値にできる演算子のことです。比較演算子の使い方は以下のようになります。

表現 入力例 結果
１は２以下 1 <= 2 true
１は２以上 1 >= 2 false
１は２より小さい 1 < 2 true
１は２より大きい 1 > 2 false
１は２と等しい 1 === 2 false
１は２と異なる 1 ! == 2 true

比較演算子には、以下のように変数も用いることができます。

var x = 1
var y = 2

x > y false
x ! == y true

また、場合分けをしたい時は if文を使います。

if文とは、「もし～だったら」と条件を指定し、その条件の真偽で処理を実行するかどうか、また処理をするかしないかを決める仕組みです。
if文の書き方は以下のようになります。


if ( a ) {
  //論理式aの値が真の場合実行する処理
} else if ( b ) {
  //論理式bの値が真の場合実行する処理
} else {
  //論理式の値が偽の場合実行する処理
}

else, else if ( )はなくても問題ありません。複数の条件で場合分けをしたい場合などに使用してください。
　
上記のように、if文では( )内に論理式を代入します。
最後に、論理式を利用する場合に役に立つ演算子を紹介します。

表現 名称 演算子 表現
Aではない 否定 ! ! A
AまたはB 論理和 | | A | | B
AかつB 論理積 && A && B

④ループで繰り返し処理

ループとは、プログラムにおいて繰り返しを行う処理のことです。
for文というものを使います。

　例えば、100回繰り返すfor文の書き方は以下のようになります。

for ( var i = 0; i < 100`; i++ ){
　//実行する処理
}

赤文字が初期化式、青文字が条件式、緑文字が変化式といいます。

初期化式

ループ開始時1番初めに行う。
ここでは、変数 i を宣言し、0を代入。

条件式

繰り返しを行うかどうかの条件を決める。
ここでは、変数 i が100未満の場合繰り返しを行う。

変化式

次のループに入る前にする処理。
ここでは、変数 i を1増やす。
※　i ++とは、i = i + 1 を省略したもの。

for文では、下記の順番で処理を行います。
  1. 初期化式の計算
  2. 条件式の計算。ループするかしないかの決定
  3. { }内のプログラムの処理（上記の例の「実行する処理」
  4. 変化式の計算 ・ ・ ・

以後、2~4を繰り返し、条件式の条件に適さなくなった時( ex. 条件式が i < 5 の時に、 i = 5となった場合など)ループをやめる。

　
1から100000までの数字を書き出す場合、以下のようなfor文にすることで実行することが出来ます。


for (var i = 0; i <= 100000; i++){
    document.write(i + ' ')
}

⑤配列を利用しよう

プログラミングには、コレクションという値などの要素を集めたものがあります。JSにおける基本的なコレクションに配列があります。

配列では、複数の並んだ要素に対し、「添字」という整数の番号を使い中身を取り出すことが出来ます。
配列は以下のように記述します。

var materialsOfSomen = ['そうめん', 'めんつゆ', '水', 'ねぎ']

consoleで materialsOfSomen[ ]の[ ]内に整数を入力することで配列内の要素（ここではそうめんの材料）が取り出せますが、注意点としては、配列において始まりの数字は[0]になります。

よって、consoleで

materialsOfSomen[1]

と入力すると、

" めんつゆ "

という結果がでてきます。

この他にも、consoleでは下記のようなことが可能です。

・配列に含まれている要素を調べる
console.log( materialsOfSomen )

・配列に要素がいくつあるかを調べる
console.log( materialsOfSomen.length )

・配列に要素を追加する
materialsOfSomen.push( 'ごま’ )

⑥関数を作ろう

関数とは、ひとかたまりの処理に名前をつけて再利用できるようにしたものです。関数を作るにはfunctionを利用します。
関数の書き方は以下の通りです。


function A() {
  //実行する処理
}

Aには関数の名前を入れます。実行する処理は複数あっても大丈夫です。

関数を使ってそうめんのレシピを作ると、以下のようになります。


function howToMakeSomen() {
    そうめんをゆでる;
    ねぎを切る;
    器にめんつゆをいれる;
    めんつゆを水で薄める;
    そうめんを氷で冷やす;
    器にねぎを入れる;
    冷えたそうめんを器に入れる;
}

関数を作ることで、手順を実行する処理を１つ１つ入力しなくても、実行したい処理のセットをいつでも再利用することができます。
（いつでもそうめんが食べられますね！）

また、関数の( )内には、引数という処理に利用する値を代入することができます。
ですので、半径rの円の面積Arを求める関数を、以下のように作成することが出来ます。


function Ar (r){
    return r*r*3.14
}

これにより、consoleで

console.log( Ar( 3) )

と入力すると、半径3の円の面積導くことが出来ます。

⑦オブジェクトを活用しよう

オブジェクトとは、JSにおける値の１つで、プロパティという、名前と値のセットを複数持つことが出来ます。
例えば、今年会社に入社したこうた君の自己紹介をオブジェクトで宣言すると、以下のようになります。


var Kota = {
  name : "Kota",
  age : 22,
  favoriteFood : "Somen"
}

このようにオブジェクトを宣言しておくと、後々こうた君の好きな食べ物が知りたくなった時に、

Kota.favoriteFood

と入力すると、こうた君の好きな食べ物を呼び出すことが出来ます。