JavaScriptを触ってみた Part.1 基本的な処理コード系

はじめに

ちゃんとがっつり開発のエンジニア歴2ヶ月目が学んだことをまとめる備忘録。
訳あって、1回データサイエンスから仕事では少し離れて、開発の見聞を広めていくことにしました！
また心機一転、頑張ります！

↓ちなみに、前回までの記事はこちら。

• 第14弾
• 第15弾
• 第16弾

懐かしい記事がたくさんだ！w

使用環境

今回は、Webアプリケーションの開発になれる目的も含め、以下の環境で触ってみた。

• テキストエディター→Sublime Text 3
  • 実際にコードを書く場所として使用。
  • 文法が正しく記入されていれば、自動でカラーリングをしてくれるため、何を書いたかの確認がよりしやすくなる。
• Webブラウザ→Google Chrome
  • Webアプリケーションの動作確認を行うために使用。
  • .htmlファイルをこのアプリケーションで開き、以下の項目を確認
    • ページビュー→実際に画面にどのように表示されているか
    • Console→コードが正しく書けているか（求めている処理を正しく行なっているか）、行なっていない場合はどこでエラーなどが発生しているかを特定するために、段階的に処理結果をはじめとする状況を確認

変数／変数定義の仕方

変数定義

• JavaScriptは基本的に変数の宣言はその変数に格納されるデータの型に関わらず、この書き方で宣言する

var 変数名 ; 

• 変数への数値の代入はJavaと同じで変数を左辺において右辺に代入する値をおき、『=』演算子でつなぐ。

変数名 = 変数に代入する値 ; 

• 数値演算子についても、Javaと同じものを使用すればよい（詳細は演算子のところで記載）。

変数について

• 文字列は、シングルクオーテーションで文字列を囲んで右辺におく（Javaではダブルクオーテーション）
  • 別にダブルクオーテーションで囲んでも問題は発生しない
  • が、.htmlファイルでは、文字列値を代入する際にダブルクオーテーションを使用
    • .htmlファイル内に<すくりぷと> すくりぷと> で囲んでJavaScriptを使用してコーディングを行う際に、識別がしづらくなるため、開発のチームによってシングルクオーテーションを推奨していたりする
    • コーディングルールについては、開発のチームによってそれぞれ統一して決められている（統一することで、エラーの発生箇所を特定したり、バグ発生のリスクを下げたり、そもそもとしてコードをチームの全員が読みやすいようにすることが目的）ため、そのルールに従う
• 文字列の結合を行いたい場合は、Java同様、『+』を使用して結合することができる

  • 文字列と数値の結合も可能。ただし、求めている結果と違うものが返ってくる可能性もあるため注意。

    var a = 5 + 6 ; 
    console.log(a) ; 
    
    var b = '5' + '6' ; 
    console.log(b) ; 
    
    var c = '5' + 6 ; 
    console.log(c) ; 
    

    • a は数値同士を足すということになるため、
      5 + 6 = 11
      として処理を行うため、出力結果は 11 になる。
    • b は文字列同士を結合する処理を行うため、出力結果は 56 になる。
    • c は文字列『5』に数値の 6 を結合するという処理を行うため、出力結果は 56 になる。

スコープ

Java同様、JavaScriptにもスコープという概念は存在する。

スコープとは

• スコープ・・・変数の有効範囲。どこから参照することができて、どこから参照することができないのか。

グローバル変数とローカル変数

Java同様、スコープによって変数は分類することができる。

• グローバル変数・・・プログラム内全体から呼び出し、使用することができる変数（関数の外で宣言しているため）。
• ローカル変数・・・関数の中で宣言、その関数の中でしか使うことができない変数。

変数使用時のルール（適宜更新）

• グローバル変数は、なるべく使わないようにする
  • どこからでも参照できてしまう分、使い勝手が悪くなってしまう
  • グローバル変数を使用するのではなく、即時関数で代用できないかまず検討するとよい（即時関数については関数で詳細を記載）

関数

• 関数・・・複数の処理をまとめて再利用できる形にするための概念（Javaでいうメソッドに近い）。

• 基本的な書き方は以下の通り。

  function 作成したい関数名 (引数) {
      実行させたい命令 ; 
      return 戻り値 ; 　←コンソールなどで段階的にそこまでの処理が正しく行われているか確認したいときは必ず書くようにする
  }
  

• 関数には名前を設定する必要がない→無名関数という

即時関数

• 即時関数・・・関数名を設定することなく、即時的にそこでだけ使用するために書く関数。

• 書き方は以下の通り。

  (function 作成したい関数名 (引数) { 
      実行させたい命令 ; 
      return 戻り値 ; 　←コンソールなどで段階的にそこまでの処理が正しく行われているか確認したいときは必ず書くようにする
      })();
  

  • 関数全体を ()で囲んで、スコープに閉じるようにする。

• 即時関数を使用するメリット

  • 関数名の重複を考えることなく、関数を書くことができる
    ＝エラー発生などの可能性を減らすことができる

制御文

制御文とは

• 制御文・・・『〇〇（条件）ならば処理Aを行い、そうでなければ処理Bを行う』などの条件に合わせた処理設定を行う文（＝Javaなどの条件分岐や繰り返し処理と同じ）。
• 代表的な制御文の例は以下のふたつ。
  • if文
  • for文

制御文の書き方

基本的な書き方は、Javaとほぼ変わらない。

if文

if (実行するための条件式) { 
    実行したい命令 ; 
    } else if (実行するための条件式) { 
    実行したい命令 ; 
    } else { 
    実行したい命令 ; 
} 

• 『else if』は条件を複数回重ねて設定したい場合にのみ記載する。
• 条件式がtrueのときに命令が実行され、falseのときに次の条件式がtrueか判定していき、最終的に条件を満たすところでそこで定義した命令が実行される。

for文

for (初期化（実行開始時の状態） ; 実行するための条件式 ; 完了したときの更新命令) { 
    実行したい命令 ; 
}

• 実行するための条件式がtrueの間、繰り返しで実行される。
• 『完了したときの更新命令』は、命令した実行が完了した時に、条件式で使用している変数を更新する命令を記載する。

演算子

制御文では特に、演算子を使用することが多い他め、各演算子についてここでまとめておく。

四則演算子

基本はJavaと同じ。

• 『+』：たす（加）
• 『-』：ひく（減）
• 『*』：かける（乗）
• 『/』：わる（除）
• 『%』：割り算のあまり（余）

比較演算子

等式をのぞき、基本はJavaと同じ

• 『>=』：左辺は右辺以上
• 『>』：左辺は右辺よりも大きい
• 『<=』：左辺は右辺以下
• 『<』：左辺は右辺よりも小さい

等式は、JavaScriptにおいては基本は以下のふたつを使用する。

• 『===』：左辺と右辺は等しい（データ型が同じ場合に使用）
• 『!==』：左辺と右辺は等しくない

Javaで使用する以下の演算子は、JavaScriptの場合は少し異なる使い方をするため、注意。

• 『==』
  • Javaでは、『左辺と右辺は等しい』という意味で使用。
  • JavaScriptでも、基本的な意味は『左辺と右辺は等しい』。ただしJavaScriptでは、この記号を使用した場合は左辺と右辺それぞれのデータの型に関係なく同じ値か確認する。

JavaScriptにおける論理演算子

基本はJavaと同じ。

• 『&&』：左辺かつ右辺
• 『||』：左辺または右辺

配列とオブジェクト

配列

JavaScriptでは、グループ化した値を格納するために配列を使用できる。

• 配列の書き方

  配列名 = ['要素', '要素', '要素', ・・・]
  

• 配列内の各要素の数え方は、順番に 0番目、1番目、2番目・・・ となる。

配列の操作方法

配列を操作したいときに使えそうな命令をまとめておく。

// 配列のn番目の要素を出力
console.log(配列名[n]) ; 

// 配列の要素をすべて出力
console.log(配列名) ; 

// 配列の要素を追加したい
配列名.push('追加する要素') ; 

// 配列の要素を削除したい
配列名.splice(削除したい要素の始まる要素番号, 消す個数) ; 

// 配列を構成する要素の個数を確認／出力したい
console.log(配列名.length) ; 

オブジェクト

※JavaとJavaScriptのオブジェクト指向の違いについては、改めてまとめる。

オブジェクト（Object）の原義

• Object・・・物体、対象、目的（from weblio英和辞典）

JavaScriptにおけるオブジェクト

• オブジェクト・・・名前と値をセットでグループ化して値を扱うための概念。

• 基本的な書き方

  var 変数名（オブジェクト名） = { 
      キー（名前） : バリュー（値）, 
      キー（名前） : バリュー（値）, 
      ・・・
  }
  

  • キーとバリューがそれぞれ対応している（対応しているもの同士を : でくっつけて書く）

• オブジェクト内の指定のバリュー（値）の呼び出し方
  →以下のふたつのかきかたのいずれでもOK

  変数名['キー（名前）'] ; 
  変数名.キー（名前） ; 
  

• オブジェクト内の指定のバリュー（値）を上書きする
  →基本は呼び出して代入するだけ。

  変数名['キー（名前）'] = 代入する値 ; 
  変数名.キー（名前） = 代入する値 ; 
  

• オブジェクトの情報を出力する

  console.log(オブジェクト) ; 
  

• メソッド・・・オブジェクトの中に書いた関数

JavaScriptを触ってみて

結論

Javaと比較すると、使いやすかった！

理由

• Javaと比較して、環境構築がしやすかった（おそらく、学習時に指定された環境が大きく違ったから？）
  →Javaでは、ローカルサーバホストの設定やサーバーでの実行時の設定、DBとの連携のために別途Visual Studio 2017のパッケージのインストールなどの対応が多く、大変だった。

  • ちなみにJavaで使用した環境はこんな感じ
    • エディター→eclipse 2019-06
    • サーバーホスト→Tomcat 9.0
    • 使用DB→MySQL

• 変数の型の宣言が必要ないため、変数定義が楽だった

→Javaではデータ型も指定する必要があった
→データ型を設定する手間が省ける分、バグも起きやすいかも・・・？（データ型がわからなくてもとりあえず定義してある程度のところまでコードを書き進めることができるから）

あとがき

開発って難しいな、と思いつつ、とっつきやすい言語もあるんだなって認識しました。
少しずつこの難しさと仲良くなれるようにマイペースにまた勉強していこうと思います^^

ではまた！

P.S.）今回はSimple is the BESTなあとがきをめざしてみた！w