「はじめてのフロントエンド開発」の感想・備忘録

書籍「はじめてのフロントエンド開発」のまとめ。

点数

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");

【新しい記事】

【古い記事】

コメントを残す

メールアドレスが公開されることはありません。