2024.10.01
【勉強】ミドルウェア・アプリケーションのEOL・EOSLについて学んでみた
2016.05.11
プログラミングJavaScriptよさらば。「TypeScript」で始めるECMAScript 2015
はじめまして、WebアプリケーションエンジニアのKです。
昨今の大規模Webサービスに生のJavaScriptで挑むには激しい辛みを覚える次第です。
そこで、同じく疲弊されてる皆さんに朗報です!
「TypeScript」をご存知でしょうか。
TypeScriptはECMAScript 2015(ECMAScript 6)に静的型付けを加えたスーパーセットであり、
ECMAScript 2015は去年6月に勧告された次世代のJavaScriptの中核仕様です。
今現在、巷のブラウザで動作するJavaScriptは一つ前のECMAScript 5の仕様が主流ですが、
Google Chrome、FireFox、Safari、Edge(IE11はNO)の最新版では、ECMAScript 2015が
動作するようになってきています。
TypeScriptはECMAScript 2015の仕様を
現行のJavaScriptコードにトランスパイルする機能を備えており、
いずれ使うことがでできる新しい仕様を先取りして利用することができます。
フロントエンド界隈は横文字が多いので、いったんまとめます。
このTypeScriptとECMAScript 2015がとにかくスゴイので一部を紹介させていただきます。
コードを紹介する前に、トランスパイルの方法を記載しておきます。
コンパイルが必要なことに抵抗がある人がいるかもしれませんが簡単です!
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
1-2. nodebrewをインストールbrew install nodebrew
1-3. nodebrewのパスを通す(~/.bash_profileに追記)export PATH=$HOME/.nodebrew/current/bin:$PATH
1-4. 設定ファイルを再読み込みsource ~/.bash_profile
1-5. Node.jsをインストールnodebrew install-binary stable
1-6. 使用するNode.jsのバージョンを設定nodebrew use stable
node -v // v5.10.1
npm -v // 3.8.3
npm install -g typescript
mkdir ~/tsc_sandbox && cd $_
tsc --init
tsc -p .
osascript -l JavaScript sample.js
TypeScriptの売りはなんといっても静的型付けです。
静的型付け言語のメリットとして次が挙げられます。
TypeScriptで使用できる型の使用例を示します。
型は変数名の後に: 型名
と記述します。
// Boolean let isDone: boolean = false; // Number let decimal: number = 6; let hex: number = 0xf00d; let binary: number = 0b1010; let octal: number = 0o744; // String let color: string = "blue"; name = 'red'; // Array let list: number[] = [1, 2, 3]; let list: Array<number> = [1, 2, 3]; // Tuple let x: [string, number]; // Enum enum Color {Red, Green, Blue}; let c: Color = Color.Green; // Any let notSure: any = 4; notSure = "maybe a string instead"; notSure = false; // Void function warnUser(): void { alert("This is my warning message"); } // Type assertions let someValue: any = "this is a string"; let strLength: number = (<string>someValue).length;
ECMAScript 2015はlet
、const
キーワードによって宣言された変数は、
ブラケット内{}
でブロックスコープを有効にできます。
function f(input: boolean) { let a = 100; if (input) { let b = a + 1; // aは参照可能 return b; } // bはブロックスコープ外なので参照不可 return b; }
let
は変数、const
は定数を宣言するときに使用します。var
はもう使用しません。
let hoge: number = 1; hoge = 2; // 再代入可能 const fuga: number = 1; fuga = 2; // 再代入不可
ES 5のJavaScriptでもprototypeを使ってクラスのようなものを書くことはできましたが、
ES 2015からはJava使いには見慣れたコードスタイルでクラス宣言を書くことができます。
class Greeter { greeting: string; constructor(message: string) { this.greeting = message; } greet() { return "Hello, " + this.greeting; } } let greeter = new Greeter("world");
なお、ES 5のprototypeでクラスのようなもの書くとこうなります。
まだなんとか見れますが、継承を実現しようとするとかなり複雑になります。
var Greeter = (function () { function Greeter(message) { this.greeting = message; } Greeter.prototype.greet = function () { return "Hello, " + this.greeting; }; return Greeter; }()); var greeter = new Greeter("world");
必須ではない引数については、変数名に?
を付けることでオプション引数とすることができます。
ES 5までは、関数の引数の数が異なってもエラーとはならず、入るだけ入れるという振る舞いでしたが、
ES 2015からは引数の数が異なるとエラーになります。
function buildName(firstName: string, lastName?: string) { if (lastName) return firstName + " " + lastName; else return firstName; } let result1 = buildName("Bob"); // 引数2はオプションなのでOK let result2 = buildName("Bob", "Adams", "Sr."); // 引数が3つなのでエラー let result3 = buildName("Bob", "Adams"); // 引数が2つなのでOK
変数名に= "デフォルト値"
を指定することで、引数にデフォルト値を与えることができます。
function buildName(firstName: string, lastName = "Smith") { return firstName + " " + lastName; } let result1 = buildName("Bob"); // "Bob Smith" let result2 = buildName("Bob", undefined); // undefinedもデフォルト引数が適用される。"Bob Smith" let result3 = buildName("Bob", "Adams", "Sr."); // 引数が3つなのでエラー let result4 = buildName("Bob", "Adams"); // "Bob Adams"
変数名にスプレッド演算子...
を付けることで、引数の数が未定の場合でも値を受け取ることができます。
function buildName(firstName: string, ...restOfName: string[]) { return firstName + " " + restOfName.join(" "); } let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie");
関数型言語によく見るラムダ式のような書き方で関数を宣言できます。
functionを省略できる他、JavaScriptを書く上でよく問題となる
呼び出し元によってthis
の値が変わる振る舞いを解消してくれます。
class MyClass { private status = "blah"; public run = () => { alert(this.status); // アロー関数内で使用されるthisは一律、MyClassのインスタンスを指します } } var x = new MyClass();
Arrayやstring型などで簡単に値の取り出しを行うことができます。
for..of
はリストの値を、for..in
はリストのキーを取り出します。
let someArray = [1, "string", false]; for (let entry of someArray) { console.log(entry); // 1, "string", false }
関数の可変長引数で出てきましたが、スプレッド演算子...
を付けることで、
配列を展開して利用することができます。
用途としては次のようになります。
function sum(...array: number[]) { } let args: number[] = [0, 1, 2]; // 関数呼び出し sum(...args); // 配列リテラル let hoge: number[] = [...args, 0, 1, 2] // 分割代入 let [a, b, c, ...fuga] = [1, 2, 3, 4, 5] console.log(fuga) // 4,5
配列やオブジェクトから値を取り出して、別個の変数に割り当てることを分割代入といいます。
// 配列を分割代入する let [a1, a2] = [1, 2] // オブジェクトを分割代入する let {b1, b2} = {b1: 1, b2: 2} console.log(a1) // 1 console.log(a2) // 2 console.log(b1) // 1 console.log(b2) // 2
式の埋め込みができるようになった文字列リテラルです。
使用するにはバッククォート`
で文字列を囲みます。
変数、式、改行コードなどを直感的に指定することができます。
let fullName: string = 'Bob Bobbington'; let age: number = 37; let sentence: string = `Hello, my name is ${fullName}. I'll be ${age + 1} years old next month.`
ES 5で書くとこうなります。ダブルクォートの数があってるか不安になることはもうありません。
var fullName = 'Bob Bobbington'; var age = 37; var sentence = "Hello, my name is " + fullName + ".\n\nI'll be " + (age + 1) + " years old next month.";
簡単な内容となりましたが、紹介は以上です。
いかがでしたでしょうか、これでもまだTypeScript Handbookの3割程度しか紹介できていませんが、
TypeScriptとECMAScript 2015の魅力が伝われば幸いです。
ぜひみなさんの職場にTypeScriptを普及してください!それでは。
【記事への感想募集中!】
記事への感想・ご意見がありましたら、ぜひフォームからご投稿ください!【テクノデジタルではエンジニア/デザイナーを積極採用中です!】
下記項目に1つでも当てはまる方は是非、詳細ページへ!Qangaroo(カンガルー)
【テクノデジタルのインフラサービス】
当社では、多数のサービスの開発実績を活かし、
アプリケーションのパフォーマンスを最大限に引き出すインフラ設計・構築を行います。
AWSなどへのクラウド移行、既存インフラの監視・運用保守も承りますので、ぜひご相談ください。
詳細は下記ページをご覧ください。
最近の記事
タグ検索