JavaScript(ES 6)の基本文法

2019年6月19日

プログラミング学習サイトProgateで一通りレッスンを終えたので簡単にまとめておく。

この言語の文法どんな感じだっけとなったときに、確認できるようにこの記事はシリーズ化したい。

型宣言

今までのJSではとりあえず型宣言と言えば、varだったと思う。

新しいJSには二つ用意されている。それがletconstだ。

Letは変数を格納する。ちなみにletの範囲はブロック単位だ。constは定数を格納する。プログラムの中で変更がない値を扱う。

配列

配列はこんな感じで宣言する。

const sports = [“soccer”, baseball”, tennis”];

配列の要素の数は

sports.length;

で取得する。for文なんかを回すときに便利。

オブジェクト

配列が[]で要素を囲んだのに対してオブジェクトは{}で囲む。プロパティと値をセットで格納する。

const item = { name: ball”, price: 2000};

オブジェクトの値の取り出しは

>console.log(item.name);

>ball

という感じに行う。

配列とオブジェクトで少し応用

オブジェクトを要素にもつ配列を作ることもできる。

const items = {

{name: ball”, price: 2000},

{name: bat”, price: 3000},

{name: secret item}

}

items[2].priceを指定するとまだ指定していないので、undefinedが返ってくる。そんな場合を想定してif文で分岐しておくこともできる。

if(item.price === undefined){}

さらに複雑にオブジェクトの中の値をオブジェクトにすることもできる。

関数

関数の基本形は以下の通りだ。

const sayHello = function(){

console.log(“Hello”);};

 これには省略形がある。それがアロー関数と呼ばれているものだ。

const sayHello = () =>{};

引数はそれぞれ()の中に書く。

クラス

クラスのコンストラクタは以下のように指定する。コンストラクタはインスタンスが生成された時に実行される処理をまとめたものである。

class Food{

constructor(){

//処理

}}

メソッド

メソッドの定義について曖昧なのでゴニョゴニョ書く。

まずメソッドは関数の一部である。メソッドは関数でもあるわけだ。

メソッドは関数の中でも、インスタンスの「動作」に当たるものだ。

このサイトが参考になるのだが、一番わかりやすい例がthisの扱いだ。

ただの関数がthisで参照する時、グローバルのthisを参照する。それに対してメソッドはローカルな方を参照する。

コンストラクタのオーバーロード

オブジェクト思考の言語にはオーバーロードというものがある。これは親クラスからそのまま子クラスに要素を継承する「継承」があるからだ。

継承はclass 子クラス extends 親クラスっといった具合に行う。

そしてオーバーロードとは継承したものに追加ができる機能だ。super()をコンストラクタの一行目で行う。()の中で引数を受け取ることもできる。

複数ファイルで管理

プログラムが大きくなると、複数ファイルに分けて管理したくなる。そんな時はexportとimportでプログラムファイル同士をリンクさせることができる。

importは外部のパッケージを取り込むことができる。

例えばchlkを使うと、簡単に出力する文字の色を変えることができる。

他にはreadline-syncがある。コンソールへの入力を受けて、それをプログラムの中で使うことができる。

配列を操作するメソッド

この言語には配列を操作するのに、いくつか便利なメソッドがあります。

  • push
  • forEach
  • find
  • filter
  • map

細かい使い方は省略します。

終わりに

まとめ始めると思った以上に時間がかかりました。関数とメソッドの違いが少し分かったりと学びもありました。暇があったらたまにこんな感じでまとめてみるのも良いかと思います。

 

ITJavascript

Posted by shu