【JavaScript】JavaScriptの基礎を学ぶ【DIVE INTO CODE】

更新日:

「DIVE INTO CODE」学習記録 3日目

こんにちは。

3日目。JavaScript入門編。データ型や条件分岐、繰り返し、ハッシュ、配列。

学習内容

【JavaScript入門】

  • データ型
  • 演算子
  • 条件分岐 if文
  • 条件分岐 switch文
  • 繰り返し while文
  • 繰り返し for文
  • 配列とは
  • push、pop、unshift、shiftメソッド
  • ハッシュ(連想配列)とは
  • スコープとは
  • 関数とは
  • 関数の呼び出し
  • 関数の「引数」について
  • 関数の「戻り値」について

 

以下、備忘録です。

 

データ型

内容
数値型 値が数値であることを表す。数値のみを記入することで数値型であることを表す。
文字列型 文字列であることを表す。クオーテーションで囲む。
論理値型 trueかfalseか。別名真偽値。
null型 空であること。「あるはずのものがない」「間違っている」を表す。
undefined型 「何も存在しない」を表す。
Symbol型 ユニーク。唯一無二。重複を防ぐ目的。

 

演算子

種類 内容
比較演算子 左右の比較を表す。(===、!==、<、>=など)
代入演算子 右辺の内容を左辺に代入する。(=、+=、%=など)
論理演算子 or( || )、and( && )を表す。論理値で返してくる。
条件演算子 (条件式)?(trueのときの処理):(falseのときの処理)
カンマ演算子 let a = 1, b = 2, c= 3のように、カンマを用いて複数の式を扱える。
typeof演算子 指定された演算子が何の型であるかを判定し、文字列で返してくる。

 

条件分岐 if文

・条件によって記述された内容を分岐させる処理のこと。

・if (条件1){処理内容A} else if (条件2){処理内容B} else {処理内容C}

・上から順に処理され、条件にあった段階(条件に対しtrue)でその階の処理内容が実行され、条件分岐を終える。どれにも当てはまらない場合最後のelseの処理内容を実行し、条件分岐を終える。

条件分岐 switch文

・switch(式){case (値1)(処理内容1)break; case(値2)(処理内容2)break; default (処理内容3)}

・式の値についてそれぞれのケースと照らし、trueの段階でその階層の処理内容を実行しbreakで条件分岐を終了する。どれにも当てはまらない場合、最後のdefaultの処理内容を実行する。

繰り返し while文

・決められた内容を何度も繰り返すことができる。breakで抜け出す。

・(例)let i = 0; while( i < 100 ){ console.log( i );  i = i + 1 }

・i<100までiの値を出し続ける。

繰り返し for文

・for( 初期値(letで表す) ; 条件式 ; 増減式 ){ ( 繰り返す処理内容 ) }

・前半で定義した条件のもとブロック内の処理内容を繰り返してくれる。

・” , ”ではなく” ; ”で前半部を区切るので注意。

配列とは

・配列名 = ["値1","値2","値3"]とすることで複数の値を保持する。それぞれインデックス番号が付与されており、[0]、[1]、[2]・・・と左から順に0から始まる番号となる。またそれぞれの値のことを「要素」という。

・配列から要素を取り出す場合は、

配列名[インデックス番号]

で取得できる。

(例)console.log(animai[3]);「animal配列の左から4番目」

push、pop、unshift、shiftメソッド

メソッド 内容
push 配列の最後尾に要素を追加する。
pop 配列の最後尾の要素を削除する。
unshift 配列の先頭に要素を追加する。
shift 配列の先頭の要素を削除する。

・配列の中身そのものを変更できるメソッド4つ。

ハッシュ(連想配列)とは

・配列と同様、複数の値を保持できる。
・ハッシュ名 = {キー1: 値1, キー2: 値2, キー3: 値3}とすることで、配列と違い値ごとに好きな名前をつけられる。「キー」が名前になる。

・ハッシュ名[キー]で取り出せる。

console.log(ハッシュ名["キー1"]["キー3"])
console.log(ハッシュ名.キー1.キー3)

でまとめて取り出せる。

スコープとは

・変数(定数、引数)の有効な範囲のこと。

種類 内容
グローバルスコープ ブロックや関数など何の内部にも入っていない状態で定義された変数。どこでも使用可能な変数。いつでもどこでも値を書き換えが容易な変数のため保持管理の面では不安定。実際にプログラムを組むときには極力減らすべき。
ブロックスコープ ブロック内でのみ有効なスコープ。
関数スコープ 関数内でのみ有効な範囲のスコープ。

・スコープは内部のものが優先して読み込まれる。

・スコープの範囲は、基本的に狭ければ狭いほど良い。

関数とは

・複数ある処理を1つにまとめたもの。

・複数の処理をまとめることにより、同処理を関数を起こすだけで可能にする。同じ処理を書かなくて済む点で便利。

・function 関数名( ) { 処理内容 }で関数を定義する。

・処理内容の中に変数やif文、for文を入れることで関数が作れる。

・定義しただけでは使用できず、「関数名( )」の形で呼び出しを行う。

関数の「引数」

・定義した関数を使用するにあたっての情報を与えるもの。

・function 関数名(仮引数)。

・注意点4つ。
①引数の値が仮引数名に代入されるが、この仮引数名は特に決まりはない。

②仮引数の名前はどのような値を受け取るのかわかりやすくする。

③受け取った仮引数は関数の中で変数のように扱うことができる。処理でその引数名を、変数のように呼び出している。

④引数値、引数名どちらかの記述が抜けているとundefinedやエラーが出力される。

関数の「戻り値」return

・関数内で処理された結果を値として返すこと。処理結果の表示ではなく、値として返すことで次の関数につなげることもできる。

・関数内に「return ;」をかくことで戻り値を返せる。

・戻り値を返すとともに、return処理が行われた段階で「その関数を終了させる意味」を持つ。よって繰り返しのfor文やwhile文を関数内に作成する場合は注意が必要。

 

感想

今回は【JavaScript入門】と【JavaScriptシリーズ課題】。

がっつりJavaScriptやりました。

 

HTML・CSSのときよりもプログラム作ってる感がちょっとありました。

 

変数や演算子、配列、ハッシュなどを用いてif文やfor文を作り、

if文やfor文を用いて関数を作る。

 

そして、関数を組み合わせてプログラムが作り出される、

といった流れです。

 

一つ一つはそんなに難しくはないんですが、組み合わせて正常にプログラムを機能させるとなったとき、組み合わせる作業がしんどいです。

 

コンピュータは融通がきかないです。単純作業がめちゃめちゃ得意でも、使う側がポンコツだと全くうまく起動してくれないですね。

 

DICのカリキュラムはテキストを読んでから課題に取り組むんですが、

実際にプログラムを作って見ないとJavaScriptの仕組みはまるでわかりませんでした。

参考書を読んだだけではまず理解ができません。

 

「プログラミングは手を動かせ」

と言われていますが、その意味を改めて体感しました。

 

各テーマごとに課題が設けられているDICのカリキュラムはまじで勉強になります。

何回も何回も関数を作ること、アウトプットをする回数が重要だと思いました。

 

 

ただ、正直これがブラウザ上の実際の動きをどうやって作っているのか、まだイメージできてないですけど。

 

まあ追い追い理解していきます。

 

以上、ありがとうございました。

-DIVE INTO CODE
-, ,

Copyright© s u p ? , 2019 All Rights Reserved.