JavaScriptでよく使う記述

よく使うものや、たまに使うけど重要なものをまとめました。
必要に応じて更新をしていきます。

押さえておきたい記述

//この行はコメントになります

文字列の表示

//文字はダブルコーテーションで囲む、数字や変数はそのまま
console.log("文字列");

変数/定数の定義（値の更新可能・2語以上は大文字で区切る）

//変数の定義（値の更新可能・2語以上は大文字で区切る）
let name = 代入する値

//定数の定義（値の更新不可・2語以上は大文字で区切る）
const name = 代入する値

//定数・変数の結合（今回はplayerNameが定数または変数）
//下記はどちらも同じ意味
console.log("おはよう、" + playerName);
console.log(`おはよう、${playerName}`); //バックコーテーションで囲む

配列

//複数の変数や定数をまとめて保管できる
let name = ["変数1","変数2","変数3"];

//呼び出すときには一番左を0として番号で呼び出す
console.log(name[0]); //「変数1」と表示される

//配列の更新
name[1] = "変数B"; 

//配列の要素数を取得
console.log(name.length); //要素数である「3」が表示される

オブジェクト

//配列の値一つ一つに情報を付加する
let itemInfo = {name:"Apple", cost:200}

//呼び出し方
console.log(itemInfo.cost); //「200」と表示される

//オブジェクトの更新
itemInfo.cost = 250;

配列 + オブジェクト

const infos[
  {name:"Apple", cost:200},
  {name:"Grape", cost:500}
];

//呼び出し方
console.log(infos[0].cost); //「200」が表示される

関数の定義と引数・戻り値

//複数の処理をまとめたものを関数という
const 定数名 = function(引数名){
  処理内容;
};

//下記のように書き換えることもできる（ES6以降）・アロー関数と呼ぶ
const 定数名 = (引数名)=>{
  処理内容;
};

//実際の記述例
const taxPlus = function(name, noTax){
  console.log(name +"は税込" + noTax * 1.1 + "円です");
};
taxPlus("りんご", 1200); //「りんごは税込1320円です」と表示される

//「return」で戻り値を指定できる・returnより下の処理は実行されない
const taxPlus = function(noTax){
  return noTax * 1.1;
};
console.log(taxPlus(200)+500); //200*1.1+500の「720」が表示される

//また、オブジェクトの値として関数を指定することもできる

クラス

//主にオブジェクト内で類似データを量産したいときに用いる
class クラス名{
  constructor(引数){  //ここに基本的な"情報"を記述
    情報内容; //「this.プロパティ名 = 値;」で追加可能な処理に
  }
  メソッド名(){  //ここには動作（プログラム）を記述・メソッドは複数作成可能
    処理内容: 
  }
}
const member = new Member(引数); //インスタンスの作成

//実際の記述例
class Member{
  constructor(name, ageNumber){
    this.name = name;
    this.age = ageNumber;
  }
  info(){
    console.log("こんにちは" + this.name + "さん");
  }
}
const member = new Member("ヤマモト", 20);
member.info(); //「こんにちはヤマモトさん」が表示される

//また、処理内容には戻り値(return)も利用できる

クラスの継承

//すでにあるクラスを利用した上で情報を追加したクラスを作成したい場合に利用する
//下記、すでにあるクラス（親クラス）
class Member{
  constructor(name, ageNumber){
    this.name = name;
    this.age = ageNumber;
  }
  info(){
    console.log("こんにちは" + this.name + "さん");
  }
}
const member = new Member("ヤマモト", 20);

//親クラスを継承して情報を追加する
class Comment extends Member{
  next(){
    console.log(this.age + "歳でお間違いないですか");
  }
}
const comment = new Comment("リョウスケ", 18)
comment.info; //親要素をそのまま引き継いでいるため「こんにちはヤマモトさん」と表示される
Comment.next; //「18歳でお間違いないですか」と表示される

//子クラスでコンストラクタをオーバーライド（上書き・追加）する
class Comment extends Member{
  constructor(name, ageNumber, date){
    super(name, ageNumber);  //親クラスから引き継ぐものを記述
    this.date = date;　//子クラス独自のコンストラクタを追加
  }
  next(){
    console.log(this.age + "歳でお間違いないですか");
  }
}

条件分岐

//複数の条件式を使う場合、「式1 && 式2」か、「式1 || 式2」を使う
//同一を示す「numberName == 10」、非同一を示す「numberName != 15」

//IF条件分岐（範囲によって条件分岐）
if(条件式1){
  処理内容1;
}else if(条件式2){
  処理内容2;
}else{
  当てはまらなかったときの処理内容;
}

//SWITCH条件分岐（値によって条件分岐）
switch(条件の値){
  case 条件値1:
    処理内容1;
    break; //これがないと次の処理も実行される
  case 条件値2:
    処理内容2;
    break;
  default:
    当てはまらなかったときの処理内容;
    break;
}

繰り返し処理

//WHILE繰り返し処理（あらかじめ変数を決める必要あり）
while(繰り返す条件式){
  処理内容;
  変数の更新;
}

//FOR繰り返し処理（あらかじめ変数を決める必要なし）
for(変数の定義;繰り返す条件式;変数の更新){
  処理内容;
}

スコープ（定数・変数の使える範囲のこと）

//関数内や条件分岐内で定義した変数・定数は関数の外では使えない（再定義する必要がある）

存在しないインデックス番号やプロパティを記載すると・・・

//「undefined」と返される
//これをIF条件分岐などで利用してエラー時の処理も作れる

JavaScriptを複数のファイルに分割する

クラスや関数、変数、定数を種類ごとにファイルを分けたい場合があります。
この際に、別のファイルからも関数を呼び出せるようにする方法を紹介します。

どれか一つを呼び出せるようにする（デフォルトエクスポート）

まず、クラスや関数、変数、定数が記載されているファイルのクラスの下に下記を記述します。

export default 変数/定数/関数/クラス名;

次に、クラスや関数、変数、定数を利用したいファイルの最初に下記を記述します。

import 変数/定数/関数/クラス名 form "./ファイル名";

注意点として、呼び出せるのは一つのファイルにつき、どれか一つだけです。
複数のクラスや関数、変数、定数を呼び出したい場合には次に紹介する「名前付きエクスポート」を利用してください。

名前付きエクスポート

まず、クラスや関数、変数、定数が記載されているファイルのクラスの下に下記を記述します。

export {変数/定数/関数/クラス名};

次に、クラスや関数、変数、定数を利用したいファイルの最初に下記を記述します。

import {変数/定数/関数/クラス名} form "./ファイル名";

また、｛｝内の値をカンマで区切ることで複数まとめてエクスポートできます。

ファイルの指定（相対パス）

「./ファイル名」は同じ階層のファイル名を示しています。
「../ファイル名」で一つ上の階層のファイル名を示します。

【余談】パッケージについて

世界中の多くの人が作成したプログラムの塊をパッケージと呼びます。
パッケージには、実際に実装しようとするとかなり大変な作業となるものをあらかじめ作成して保存されています。これをうまく活用することでより多くのことを時短して実装できるようになります。

パッケージのインポート

まずは下記を記述します。

//プログラムに記述する場合（下記を１行目に記述）
import 定数名 form "パッケージ名";

//コンソールから入力する場合（下記２つは同じ意味）
npm install パッケージ名
npm i パッケージ名

代表的なパッケージを紹介します。これ以外にも山ほどあるので、ぜひ余裕のある時に調べてみてください。

//HTTPクライアント。APIリクエストを行うために利用されます。
npm install axios

//汎用的なユーティリティ関数を提供するユーティリティライブラリ。
npm install lodash

//日付と時刻の操作やフォーマットに使用されるライブラリ。
npm install moment

//Node.jsのWebアプリケーションフレームワーク。
npm install express

//リアルタイムなウェブソケット通信を実現するためのライブラリ。
npm install socket.io

//MongoDBとの対話のためのElegantなMongoDBオブジェクトモデリングツール。
npm install mongoose

//JSON Web Tokens（JWT）の生成と検証のためのライブラリ。
npm install jsonwebtoken

//ユーザインターフェースの構築のためのReactライブラリ。
npm install react

//アプリケーションの状態管理のためのReduxライブラリ。
npm install redux

//非同期処理やデータのフェッチに利用されるHTTPクライアント。
npm install axios