X-HACKさん主催 【JS/JavaScript/TypeScript】TypeScript入門講座
先日またまた#xhackさんの主催イベントに参加してきました！
【JS/JavaScript/TypeScript】TypeScript入門講座
今回はTypeScriptの勉強会です。
勉強会で教えていただいたTypeScriptの感想としては・・・
めちゃめちゃJavaに似ている！
これならJavaScriptが苦手な私でも入りやすいかもしれない・・！
TypeScriptは型のあるJavaScriptと思ってもらえれば大丈夫かと思います。
動作としては、TypeScriptを一度JavaScriptにコンパイルして動かします。
X-HACK松田さん語録
「フロントはTypeScriptで動いているのではない、あくまでもJavaScriptで動いているのだ」
勉強会は、プログラムをほとんど触ったことがない人でも理解できるくらいわかりやすい内容でした！
内容をさらっとおさらいしてみたいと思います。
環境構築
勉強会ではこちらのサイトを参考にしながら作成していました。
TypeScriptを簡単に動かす環境構築
まずは適当なフォルダを作成します。
エディタは今回はVSCodeを使っています。
ターミナルを開いたら、下の手順で環境構築をしていきます。
１．TypeScriptのインストール
$ npm install -g typescript以下のコードでバージョンが表示されていたらインストール成功です。
$ tsc --version２．package.jsonの作成
最初に作成した、プロジェクトフォルダに移動し、以下のコマンドを実行します。
$ npm initpackage.jsonが作成されたと思います。
追加コメントの箇所を追加したら、次のステップに移ります。
３．tsconfig.jsonの作成
{
"name": "typescript",
"version": "1.0.0",
"private": true, // 追加
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "tsc", // 追加
"watch": "tsc -w" // 追加
},
"author": "",
"license": "ISC"
}次に、tsconfig.jsonを作成します。
$ tsc --initファイルの中身はこんな感じで作成されたと思います。（長くなりそうなので、コメントアウトされている行は省略しました。。）
{
"compilerOptions": {
/* Basic Options */
"target": "es5", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */
"module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
/* Strict Type-Checking Options */
"strict": true, /* Enable all strict type-checking options. */
/* Module Resolution Options */
"esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
}
}ここまでで、準備が完了しました！
TypeScriptの特徴
１．型の宣言が必要
以下のように宣言します。
let name: string = "pocho";
若干宣言の仕方は違いますが、静的型付け言語を今までされていた型はとっつきやすいんじゃないでしょうか！
特に少し規模の大きい開発の場合だと、型の宣言がないと何をいれたらいいのかわからないなんてことも・・
２．classを簡単に作れる
例えば、JavaのアクセッサのようなクラスをJavaScriptで作ると結構大変ですが、TypeScriptだとまるでJavaのような感じで作れちゃいます。（調べてみたらES2015からアクセッサは簡単に作れるようになってました・・）
class Person {
private name: string;
private age: number;
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
public getName(): string {
return this.name;
}
public getAge(): number {
return this.age;
}
}３．アクセス修飾子がある
javaでおなじみのアクセス修飾子ですが、TypeScriptにもアクセス修飾子を使用することが出来ます！（項番２のアクセッサを参照）
使えるアクセス修飾子は以下の３種類。
・public
どこからでも参照可能
アクセス修飾子を書かなかった場合はデフォルトでpublicになる
・private
class内からのみ参照可能
・protected
class内、もしくはその派生classのメンバからのみ参照可能（継承など）
TypeScriptの特徴としてはこんな感じです！
TypeScriptの使い方
それでは、実際コンパイルまでの流れを行っていきましょう！
１．person.tsというファイルを作成します。
２．「TypeScriptの特徴」の項番２で書いたコードをそのままperson.tsに張り付けます。
class Person {
private name: string;
private age: number;
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
public getName(): string {
return this.name;
}
public getAge(): number {
return this.age;
}
}３．以下のコマンドを実行します。
$ npm run watchperson.jsというファイルが作成されたのを確認できたでしょうか！
"use strict";
var Person = /** @class */ (function () {
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.getName = function () {
return this.name;
};
Person.prototype.getAge = function () {
return this.age;
};
return Person;
}());tsconfig.jsonのtargetの項目がes5となっているので、es5のjsにコンパイルされました。
次はこれをes2015に変えてみると・・
"use strict";
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
getName() {
return this.name;
}
getAge() {
return this.age;
}
}
ES2015になりました！！！
ES5だと結構書くの大変ですが、ES2015になると書き方ほとんど変わらないですね・・
ほかにもvarがletになったり、constが使えたりと、ES2015にちゃんと書きかわってくれます！
X-HACKさんの勉強会はプログラミングしたことがない方でもわかるくらい、基本をしっかりと教えてくれるのでとてもとっつきやすくなるのではないかと思います！
それとコミュ障なのでこの前上手に伝えられなかったんですが・・
次はIllustratorなどを使わずに、SVGやPATHなどのタグを使用したWebサイトの作り方の勉強会があれば参加したいです・・！