mixiの21卒フロントエンド研修が公開されていたのでメモしたよ！

公開日:

目次

mixiの21卒フロントエンド研修が公開されていたのでメモしたよ！

ミクシィの21新卒技術研修の資料と動画を公開します！ でmixiさんの21卒研修の内容が公開されていました。生憎、mixiさんに新卒入社できるようなスキルは持ち合わせてはいませんが、これを見ることですこしでもmixiさんの同い年？のエンジニアの方に近づけたらいいなと思い見てみました。Git研修は先週見たので、今回はフロントエンド研修を見ました。その時の備忘録としてメモを残しておきます。フロントエンド研修は動画で公開されていました。

JavaScript の基礎

まずはJavaScriptの歴史からでした。JavaScriptの実行環境は他の言語と比べても特殊で、様々な実行環境があります。  

  • ブラウザ
  • Node.js
  • Web Worker
  • Deno

ブラウザと Node.js は有名なので説明は省きます。
Web Worker は通常はシングルスレッドで動作するJavaScriptをダブルスレッドで実行させるための実行手段です。最後の Deno というのはNode.jsの作者が作成時の反省を活かして作成したruntimeです。Node.jsは何でもできてしまう実行環境ですが、 Deno はPermissionを指定しないと何もできないほどセキュアな環境なようです。

ページロード

続いてページロードについてです。まず、HTTP/1 についてのおさらいです。HTTP/1 は

  • 1つのTCPコネクションで1リクエスト1レスポンス
  • なので複数のTCPコネクションを張る（6つくらい)
  • しかし、ブラウザは基本的に6個ずつしか読み込みできない

といった特徴があります。そういったブラウザの仕様から以下のような課題が見えてきました。

  • *.js ファイルの依存関係
  • ファイル数が多くなるととても重い

→その結果タスクランナーを活用したファイル数の結合がされるようになりました。

ファイル結合の時代

JavaScriptでは、 HTML に script タグを依存関係順に並べる。依存関係順に単純にファイルを結合し1つの *.js ファイルにする。そうすると、いままで複数必要だったリクエストが1つでよくなる。
また、CSSスプライトが流行ったのもこのためである。

タスクランナーとして gruntやgulp といったツールが登場しました。

HTTP/2の登場

HTTP/2の登場により、ファイル結合の利用頻度は低下したようです。

  • 複数のリクエストを処理できるようになった。
  • CDNの対応（AWS　並列に画像を取得できるようになった）
  • CDNは昔は高額だった。HTTP/2を使用できるサーバーを用意するのは難しかったがクラウドの普及で身近になった

また、ブラウザの仕様として

  • <link rel="preload"/> による先読み込み ホバーしたら読み込まれる画像を先に読み込みだけ行うことができる（適用はされない）。

↑の点からファイル結合の利用頻度は低下。 さらに、キャッシュヒット率を考慮すると、結合しないほうが有利な場合も。例えばCSSスプライトの例では画像の1部を変えたときに再度すべてを読み込まなければいけないことと比べた場合、CDNが進化したいま、ファイルを分割して、変更した画像だけ再読み込みを行い、ほかはCDNを使用してキャッシュするという方が良い場面もある。

→ファイルの結合の利点が薄れてきた→bundlerの登場！

JSの依存関係解決

  • brouserify
  • Node.js 由来の require が利用できるようになった。
  • npm packegeが利用できるようになった。

そして、webpack の登場！！

  • 画像やscss、css など、より広いリソースをターゲットとしてbundleする。
  • *.js 以外のファイルの import を可能にする。
  • ブラウザでもimportは使用できるが依存関係が多くなると、ブラウザは依存関係を直列に解釈する仕組みのため、とても遅くなる。→webpackが利用される
  • 将来的にはこれもブラウザの仕組みで解決され、bundlerを使わない未来も近いかもしれない

ここで講義の前半は終了しました。後半はUIライブラリの話とハンズオンでした。

UIライブラリ 状態管理の複雑化

ここからはUIライブラリ編です。モダンJavaScriptとして有名なReactやVueなどがなぜ必要になったのかという話でした。 Webが複雑化するにつれて、jQueryで状態に合わせて DOM操作をする手法に限界がきていました。

そこで、Backbone.js がMVCモデルをフロントエンド領域に持ち込みました。このように、他領域の設計手法を用いた取り組みが盛んになりました。

そして、このあたりの時代から宣言的UI、リアクティブ、コンポーネントや状態からViewへという一方向のライフサイクルといった考え方が台頭してきました。
Fluxという設計思想が生まれたのもこのあたりの時代のようです。
ではjQueryはどうなったかと言うと、自由にDOMを触れてしまうため、状態→Viewの一方向の反映にあまり向いてない。また、ReactやVueなどの宣言的UIライブラリとの組み合わせが不向きという問題もありました。
更にそれだけではなく、jQueryの機能の一部は Javascript に吸収されました。

Single Page Application

単一のWebページを読み込み、表示内容は fetch 等で取得したデータを用いて書き換えを行うアプリケーション。  

- 例：bodyタグ以下が全部空の状態でサーバーからHTMLが返される。（中身はクライアント側でJavascriptで組み立てる。）

UIライブラリ まとめ

ブラウザ上で行うことが増えたことによる状態変化の複雑化

  • 他領域のアプローチを取り入れ、試行錯誤した時代
  • 手続き的な処理から宣言的な処理への変化

ワークショップ

研修の後半はReactでTodoアプリを作ろうといった内容でした。実際にすべての内容をメモとしてのこすのは量が多すぎるため勉強になったJavascriptの書き方についてメモを残していきたいと思います。

オブジェクトのプロパティ削除の方法

JavaScriptでオブジェクトのプロパティを削除するときは、 delete演算子を使用すると思うのですが、変わった書き方？があったので紹介します。
レスト演算子を使用した書き方です。
通常は↓のようにdelete演算子を使ってオブジェクトのプロパティを削除します。

const obj = {
  foo: "foo",
  bar: "bar",
  hoge: "hoge",
}

delete obj.hoge;
console.log(obj); // 結果：{ foo: 'foo', bar: 'bar' } 

削除されているのがわかるかと思います。  
次にレスト演算子を使用したプロパティの削除の方法です。

const obj = {
  foo: "foo",
  bar: "bar",
  hoge: "hoge",
}

const { hoge: _, ...rest } = obj
console.log(rest); // 結果：{ foo: 'foo', bar: 'bar' } 

同じようにオブジェクトが削除されているのがわかるかと思います。厳密には削除というより、削除したいプロパティをのぞいた、新しいオブジェクトを作成して、削除しているように見せています。自分的には破壊的変更にならないのでこれからはこっちの書き方を採用していこうと思いました。

まとめ

Webサービスを作っているmixiさんとWebサイトを作っている自分では違う部分もあるかと思いますが、これからJavaScriptをより勉強していきたい自分にとってはとても勉強になりました。こんな有益な研修が無料で見れていいのだろうか…とも思ってしまいました。appleple では研修がきちんと整っていないところもあるので、自分に後輩ができた際にはこういった公開研修をやってみたなと思いました。