書籍「はじめてのフロントエンド開発」のまとめ。
点数
58点
感想
JavaScriptの歴史、SPAのしくみ、ES2015とTypeScriptの解説など、前半は参考になった。
だが、後半の各フレームワークを扱ったサンプルはわかりづらく、途中で読むのをやめた。
サーバサイドレンダリング
SPAではサーバからは空の要素が返されるため、表示速度とクローラ対策に問題がある。
GoogleボットはJavaScriptでレンダリングしたコンテンツを読み取ってくれるが、SNSのクローラ(TwitterやFacebookのシェア時のサムネイル取得など)は読み取ってくれない。
Vue.jsではvue-server-rendererが用意されている。
nuxt.jsにはvue-server-renderer, vue-router, vuexなどが含まれている。
MVVM=Model View ViewModel
Vue.jsの場合
- Model=JavaScriptオブジェクト
- View=DOM
- ViewModel=Vue.js
package.jsonでのバージョン指定
- “1.2.3”
1.2.3がインストールされる - ”^1.2.3”
1.xの最新バージョンがインストールされる(メジャーバージョン固定) - ”~1.2”
1.2.xの最新バージョンがインストールされる - ”~1”
1.xの最新バージョンがインストールされる(”^1.2.3”と同じ) - “>1.2.3”
1.2.3より大きい最新バージョンがインストールされる
TypeScript
インターフェース
function hoge(person: {name: string}) {
console.log(person.name);
}のように、TypeScriptでは引数のオブジェクトのプロパティの型を指定することができる。
しかし、このpersonオブジェクトを他でも使う場合、毎回型注釈を記述するのは現実的ではない。
以下のように、インターフェースとして独自の型を定義するとよい。
interface PersonInterface {
name: string;
} function hoge(person: PersonInterface) {
console.log(person.name);
}ジェネリクス
関数、クラス、インターフェースをさまざまな型で再利用できるようにする仕組み。
以下の2つの関数は型が異なるだけである。
function hoge(arg: number): number {
return arg;
}
function hoge2(arg: string): string {
return arg;
}ジェネリクスを使って以下のように定義することができる。
Tが型変数である。
function hoge<T>(arg: T): T {
return arg;
}
// この関数を使う時は以下のように型を指定する。
hoge<number>(100);
hoge<string>("hello");