こんにちは！インターンのキシリトールです。少しずつ秋らしい陽気が感じられますが、GIGブログ読者のみなさまはいかがお過ごしでしょうか。

さて、今回は第20回社内勉強会として行われたLT（ライトニングトーク）の様子をご紹介します！

前半のテーマは「SPAフレームワーク3種について比較してみる」

まず登壇してくれたのは、フロントエンドエンジニアの秋津辰弥さん。

SPAフレームワーク3種を比較し、それぞれのメリット／デメリットについてまとめてくれました。

秋津辰弥（あきつたつや）：フロントエンドエンジニア。総合学園ヒューマンアカデミーを卒業後、職業支援学校にてWeb制作を習得。その後イベント・映像制作系企業に入社し、およそ1年半自社企画のイベント告知サイトを中心に構築と運用を担当。2017年10月末、GIGにジョイン。

SPA（Single Page Application）とは

SPA（Single Page Application）とは、単一のWEBページで1つのアプリを構築するアーキテクチャの総称です。

秋津：「使い慣れているHTML、CSS、JSを用いてデスクトップアプリのような快適な操作性が提供できます」

SPA導入のメリット／デメリットは以下の通りです。

【メリット】

• ページ間の遷移を高速化
• Web componentsを擬似的に再現できる
• クライアントとサーバーが分離してメンテナンス性が向上するので、REST設計との相性が良い
• 状態が変更されたタイミングでDOMの再描画を走らせられる
• コミュニティが活発なのでライブラリが豊富 = 拡張しやすい
• アプリケーションに近い動きを実現しやすいのでUXを向上させられる

【デメリット】

• WEBサイト制作にはオーバースペック気味
• 学習コストが高い（Flux、router）
• 移り変わりが早い
• UI・UXを含む設計を通常のWEBアプリに比べ綿密に行う必要がある
• SEOに弱い（認識してくれないクローラーがある）
• JSが実行できない環境だと、全く動かない

従来のWEBアプリケーションとの違い

従来のWEBアプリケーションの手順は以下の通りです。

1. ユーザーがアクションを起こす
2. サーバーに通信する
3. サーバー側でHTMLを生成する
4. サーバーからHTMLを受信する
5. HTMLを描画する

対して、SPAの実行手順は以下の通りです。

1. ユーザーがアクションを起こす
2. そのアクションに必要なデータのみサーバーに要求する
3. 返されたデータをJS等で処理する
4. HTMLの差分を描画する

秋津：「従来のWEBアプリケーションは、ユーザーのアクションに応じてサーバーにリクエストを送ると、ページ全体の更新を丸ごとHTMLで描画します。対してSPAでは、ユーザーのアクションに応じてサーバーにリクエストを送ると、HTMLの更新するべき差分だけを描画します。つまり、サーバーとの通信を削減できるのです」

Angular.js

Angular.jsは、Googleが開発しているJavaScriptフレームワークです。フルスタックであるので、ライブラリを追加しなくてもほとんどの機能が初めから実装されています。

公式サイト：AngularJS

秋津：「TypeScriptを採用しているので、高速レンダリングに対応しいます。そのため、自動で型定義されてバグから守ってくれます」

Angular.jsのメリット／デメリットは以下の通りです。

【メリット】

• フルスタック開発なのでライブラリ追加が不要
• 案件の規模感、開発メンバーに合わせてAngular Wayを用いた大規模開発に向いている
• 全面的な導入に向いている
• TypeScriptなので、型定義によりバグからしっかり守ってくれる

【デメリット】

• TypeScriptの学習・導入コスト
• 頑丈な分、Angular Wayの制約に従う必要性有り
• 小規模アプリ開発にはオーバースペック
• 開発途中からの切り替えは困難
• Angularからの乗り換えが困難

秋津：「Angularは独自のHTMLタグがあり、柔軟性に欠けることが難点です」

React.js

React.jsは、Facebook社が開発し2015年3月にオープンソースとして公開されたJavaScriptのフレームワークです。（公式サイト：React）

秋津：「最も特徴的な点は、JSの構文を拡張したJSX記法を採用している点です」

React.jsのメリット／デメリットは以下の通りです。

【メリット】

• ライブラリが豊富
• Angularに比べ導入コストが低く、vueに比べて大規模、複雑なアプリ開発に向いている
• Reduxを導入することで、単体テストがやりやすい
• Flowという静的型チェッカー導入で、TypeScriptのようにコードを保護出来る
• ライブラリがシンプルな為、組み合わせで要求を実現できる
• ロジックとViewが綺麗に分かれている

【デメリット】

• エコシステムのライブラリ等は公式以外が提供しているので、知識と調査が必要
• JSXがほぼ必須なので動かすときにトランスパイルが必須

秋津：「1つ1つのライブラリがシンプルなので、ライブラリを組み合わせることで求めている機能を簡単に実現できます」

Vue.jsは、Evan You氏が中心となって開発されたJavascirptフレームワークです。Angular.JSと比べ、非常にシンプルで学習コストが低いです。

公式サイト：Vue.js

Vue.jsのメリット／デメリットは以下の通りです。

【メリット】

• スモールスタートが可能
• コンポーネント内はHTMLとCSS、JSが独立している
• CSSをコンポーネントごとにscope化できるので、最終的に疎結合が可能なので、CSS同士の染を限りなく減らせる
• 基本的なライブラリ群は公式が提供している
• 学習コストが低い
• Laravel5.3〜に標準搭載されているので相性が良い

【デメリット】

• 大規模アプリの開発時には、設計の難易度が上がる
• 柔軟性が高いが故に、設計をより丁寧に進める必要性あり
• HTMLにロジックをかけるので、ソースが読みづらくなりやすい

秋津：「大規模アプリを開発する際は、人によってソースコードの書き方がバラバラになってしまう可能性があるので注意が必要です」

まとめ

最後に、秋津さんはSPAについてまとめてくれました。

秋津：「現状、WEBアプリケーションを作成するのであれば、SPAの知識は必須でしょう」

秋津：「今後はReact.jsとVue.jsがメジャーなSPAとなると思います」

後半のテーマは「TensorFlowを使ってみる」

次に登壇してくれたのは、Webエンジニアの目黒 圭剛さん。TensorFlowの使い方を実例を踏まえて教えてくれました。

目黒 圭剛(めぐろ よしたか) ：Webエンジニア。2012年米国フロリダ州のUniversity of South Floridaに入学。コンピューターサイエンス専攻。ウェブアプリケーションからシステムセキュリティ、AIなど幅広い分野を学ぶ。同大学を2016年に卒業し、翌年3月に日本帰国。2017年5月よりGIGに入社。

TensorFlow（テンソルフロー）とは

TensorFlow（テンソルフロー）とは、Googleが開発しているオープンソフトウェアライブラリです。さまざまな機械学習の分野で使用するために開発されています。（公式サイト：TensorFlow）

1. TensorFlowを使うための準備

まず、dockerを用いて以上のコマンドを実行します。

今回は実行環境としてJupyter Notebookを使用しました。

目黒：「今回のゴールは、与えられた画像データをファッションアイテムごとに分類することです」

2. 必要なモジュールをインポートする

以下の必要なモジュールをインポートします。

• TensorFlow：オープンソフトウェアライブラリ。機械学習に適している。
• Keras（ケラス）：ニューラルネットワークのライブラリ。モデルの教育に適している。
• numpy（ナムパイ）：数値を扱うことに適しているライブラリ
• Matplotlib（マットプロットリブ）：数値をグラフとして出力できるライブラリ

次に、今回機械学習で用いるデータセットのFashion MNIST dataset（10のカテゴリに分けられた70,000の28x28ピクセルイメージのデータセット）をインポートします。Fashion MNIST datasetは上のようにファッションに関するアイテムの画像データの集まりです。

その後、先ほどのデータセットをトレーニングデータとテストデータに分けます。

3. モデル（学習するためのアルゴリズム）を構築する

目黒：「ここがTensorFlowで機械学習するために最も難しいところです」

まず、レイヤーをセットアップします。レイヤーは以下の種類を使います。

• Flatten：イメージデータのフォーマットを機械学習に適したものに変換する
• Dense Rectified Linear Unit：データを128個のnodeに分けてつなげる
• Dence Softmax：それぞれのnodeはイメージがどのカテゴリーに属するかの確率を示していく

目黒：「Kerasはロジックの部分を持っているため、使いやすいです」

4.モデルをコンパイルする

次に、モデルをコンパイルします。コンパイルの手順は以下の通りです。

1. Loss function：モデルがどれだけ正確であるかを測る。値が小さいほど正確。
2. Optimizer：モデルがどのように成長していくか考える。
3. Metrics：学習やテストを監視する。

5.モデルを学習させる

上のコードを実行することでモデルの学習をします。epochsが学習する回数を表しています。今回は5回学習を行いました。

目黒：「モデルを学習させるとは、学習データを与えイメージデータとラベルの関係を学ばせることです」

上の図は、学習を行なっている途中の画面です。学習を重ねることで、loss functionの値がが徐々に小さくなっています。

目黒：「学習を複数回行うことで、モデルが正確になっていくことがわかります」

6.予想させてみる

学習が終わったら予想をしてみます。同時に複数の画像データがどのアイテムか予想させました。

目黒：「青のグラフが正しく予測できたということを表し、赤のグラフは間違った予測をしたことを表しています。完璧に予想することはできませんでしたが、90%を超える精度でアイテムに予想ができました」

まとめ

最後に目黒さんはTensorFlowを使った機械学習についてまとめてくれました。

目黒：「TensorFlowの機械学習において最も大切なことは、モデルを構築する際のアルゴリズムの選択です」

目黒：「Kerasというライブラリが非常に優秀で、モデルの学習などをコマンド1つで実行できます」

今日の勉強会メシはいつもと違う？！シェフによる豪華魚貝刺し盛り！！

GIGの勉強会後は、普段はピザやオードブルなどの軽食が用意されるのですが、なんと今回は現役シェフによる出張料理です！

サーモンやカツオ、トビウオなどの魚介を中心とした、非常に豪華な刺し盛りが振舞われました！

各自ドリンクを片手に乾杯です！

今回の出張料理が社員にとても好評だったため、今後の社内勉強会はしばらくシェフに来てもらうこととなりました！GIGにジョインすれば食べられるぞー！

GIGでは、一緒に働く仲間を募集しています

現在GIGでは「一緒に学びながら成長していきたい！」と意欲のある仲間を募集しています。

話を聞いてみたい方はぜひ、ご連絡ください！