フロントエンド技術を学ぼう 2-11.JavaScriptについて学ぶ

Front-end Developer Handbook 2017を教科書にフロントエンド周りの技術を習得する連載。

www.mojage.club

第21回はPart II: Learning Front-End Devから、
11項のLearn JavaScriptを紹介します。

JavaScriptについて学ぶの説明です。

Sponsored Link

JavaScriptについて学ぶ

JavaScriptは高水準動的動的型付けインタプリタ型プログラム言語です。 またECMAScript言語仕様にて標準化されています。 HTMLやCSSと共に、Webコンテンツ制作に必要な3つの技術の内の1つで、大体のWebサイトが採用しており、全てのモダンブラウザではプラグイン無しでサポートしています。
JavaScriptは、ファーストクラスの関数を使用したプロトタイプベースであり、オブジェクト指向、命令型、関数型プログラミングスタイルをサポートしたマルチパラダイム言語です。 テキスト、配列、日付、および正規表現を扱うためのAPIを備えていますが、ネットワーキング、ストレージ、グラフィックス機能などのI/Oは含まれておらず、埋め込まれたホスト環境に依存しています。

参照元;英語版Wikipedia

主な要素 説明
高水準 人間にとってわかりやすい記述の仕方が出来る言語のこと。
動的 動的でない言語がコンパイル時に行う事を、実行時に行うこと。
動的型付け 静的型付けに対して、変数などに代入する値の型が実行時に決まる性質のこと。
インタプリタ型 実行時にコンパイル->実行の流れを一度に行う性質のこと。
ECMAScript言語仕様 JavaScriptの標準仕様。
ファーストクラス 言語における基本的な操作を行える対象。変数へ関数を代入する無名関数の生成など
プロトタイプベース 新しいオブジェクトを生成するときに、既存のオブジェクトを複製する性質のこと。
マルチパラダイム言語 プログラミングパラダイムというプログラムの書き方が、複数種類対応している性質のこと。

スタートガイド

JavaScriptの基礎を学ぶ際には以下の項目を学ぶことになります。 DOM(ドキュメントオブジェクトモデル)の操作以外は、他のプログラミング言語を学ぶ際にも通用する考え方になります。

項目 概要
Operator(演算子) 四則演算を行うための演算子の紹介(+, -, *, /, %)と使い方。また、Math.foor()やMath.random()などのMathオブジェクトの使い方。
Variables(変数) 変数とはなにか、変数の宣言(var)と使い方。
Control Flow(制御フロー) 条件によってプログラムの動きを制御する方法。if文(if, else, else if)や、switch文(switch, case, break)の使い方。
Functions(関数) 関数の作成(function, return)と使い方。
Scope(スコープ) グローバルスコープ、functionalスコープなど、変数の参照範囲。
Arrays(配列) 配列の作成、要素増減(.push, .pop)。
Loops(繰り返し) 同じ処理を複数回行う場合に、同じ命令式を繰り返し書く必要をなくす(for, while)。
DOM(ドキュメントオブジェクトモデル操作) JavaScriptでDOMを操作する。まずはHTMLファイルにJavaScriptファイルを読み込む方法、そしてDOM操作を簡略化できるjQueryの使い方。(this, slideToggle, textなど)

Reference from : codecademy.com JavaScript [インタラクティブ]

オブジェクトの生成

JavaScriptにおいては、全てがオブジェクトの様な動きをします。(変数もFunctionもArrayも)つまり、オブジェクトとは何かを知ることはJavaScriptの基本を知る上で重要です。 一番簡単なオブジェクトの生成方法は以下です。

    var person = {};
    console.log(person.constructor); //Object()

オブジェクトには、パラメータを設定することが出来ます。

    var person = {
      name: ['Bob', 'Smith'],
      age: 32,
      gender: 'male',
      interests:['music', 'skiing'],
      bio: function(){
        alert(this.name[0] + ' ' + this.name[1] + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');
      },
      greeting: function(){
        alert('Hi! I\'m ' + this.name[0] + '.');
      }
    };

このpersonオブジェクトの各プロパティを参照してみましょう。

    console.log(person.name[0]);       //Bob
    console.log(person.age);           //32
    console.log(person.interests[1]);  //skiing
    person.bio();                      //Bob Smith is 32 years old. He likes music and skiing.
    person.greeting();                 //Hi! I'm Bob.
オブジェクトのプロパティ/メソッドにアクセスする.(ドット)
    person.age
    person.interests[1]
    person.bio();

.(ドット)以外に[](バケット)を使用することもできます。

    person['age']
    person['interests'][1]
    person['bio']();

バケットのを使用することはあまり一般的ではありませんが、以下のようにプロパティにアクセスする文字列を作成する際に便利です。

    var foobarObject = {foobar: 'Foobar is code for no code'};
    
    var string1 = 'foo';
    var string1 = 'bar';
    
    console.log(foobarObject[string1 + string2]);
ネストされたオブジェクト
    name: ['Bob','Smith'].

例えば、上記のnameの値を以下の様にすることもできます。

    name : {
      first: 'Bob',
      last: 'Smith'
    },

これはサブネームスペースといいます。 アクセスするときはこうなります。

    person.name.first
    person.name.last

また、オブジェクト同様にarray()やfunctionも入れ子にすることができます。

    var myArray = [[[]]]; //array in array in array
    
    var myFunction(){
      var myFunction(){
        var myFunction(){
        };
      };
    };
オブジェクトの更新
    person.age = 45;
    person.name.last = 'Cratchit';

新しいプロパティを追加することもできます。

    person.eyes = 'hazel';
    person.farewell = function(){ alert("Bye everybody!"); }

プロパティの削除はこのようにします。

    delete.person.eyes;
thisの使い方
    greeting: function() {
      alert('Hi! I\'m ' + this.name.first + '.');
    }

この箇所でthisを使いました。これは、現在のオブジェクトを参照する意味で使われています。 つまり

    this.name.first

は以下と同義です。

    person.name.first

これはオブジェクトのコンテキストが変更になった際にも(person以外のオブジェクト名になるなど)有効な記法です。

Reference from :
JavaScript first steps(JavaScriptファーストステップ) [読み物]
JavaScript building blocks(JavaScript コードブロックの構築) [読み物]
JavaScript object basics(JavaScriptオブジェクトの基本) [読み物]

一般的な学習リソース

以下、JavaScriptを構成する要素について纏めているページです。

www.mojage.club

www.mojage.club

www.mojage.club

www.mojage.club

www.mojage.club

www.mojage.club

www.mojage.club

www.mojage.club

www.mojage.club

www.mojage.club

www.mojage.club

www.mojage.club

Reference from : JavaScript Enlightenment(啓発JavaScript) [読み物]

その他学習リソース

マスタリングJavaScript

書籍

Understanding ECMAScript 6: The Definitive Guide for JavaScript Developers
(ECMAScript 6を理解する:JavaScriptデベロッパーのための完全ガイド)

JavaScript with Promises
(プロミスとJavaScript)

Test-Driven JavaScript Development
(テスト駆動型JavaScript開発)

関数型JavaScript

funfunfunction: Functional programming in JavaScript
(ファンファンファンクション:JavaScriptでの関数型プログラミング)

書籍

Functional Programming in JavaScript: How to improve your JavaScript programs using functional techniques
(JavaScriptでの関数型プログラミング:関数型技術を使ったJavaScriptプログラムの改善方法)

リファレンス/ドキュメント

用語集/百科事典/専門用語

標準仕様

スタイルガイド

ニュースレター、ニュースサイト、ポッドキャスト