はじめまして。
ちょくちょく色々な方のnoteを拝読させてもらってきていながらいざ自分は全然やってこなかったけど、今回GDG DevFest 2018 Tokyoに参加したのをきっかけに始めてみようと思ったのでまずは自己紹介から。

自己満足的自己紹介

改めましてはじめまして、都内で働くフロントエンドエンジニアのあっきーです。
まだ3年目のちゃきちゃきエンジニアです。
前職では、主に自社LP~WordPressを用いた動的サイト制作を主に扱ってきました。
業務内容はディレクションからデザイン、コーディングと運用・アナリティクス等の解析、サーバーの用意（当時は使い捨てに近かったのでレンサバでした）と一気通貫して担当していました。

そんな会社で約1年半30~40サイト制作を担当して、現在の職場ではJSのライブラリを用いたサービス開発やエンハンスを担当しています。
めっきりデザインをしなくなってきたのでフォトショのコマンドを忘れているのでは…？という不安に苛まれている25歳です。

せっかく始めるので、プライベートなことから仕事のことまで幅広く書いていこうと思いますのでゆるくお付き合いいただけたら嬉しいです。

思っていたより参加者が多かった

https://gdg-tokyo.connpass.com/event/95307/
さてさて、本題です！
今回はGoogle Developer Group主催のGoogleが推進している（もしくは扱っている）サービスの最新情報から現場でのノウハウを学べるイベントに行ってきました。

もともとイベントには行ってみたいと凄い思っていた、私。
そんな時、前職の時ご一緒させていただいていたインフラエンジニアの方に誘われて今回行ってまいりました。
各内容ごとにブースが分かれていて、自分が聞きたい時間になったらブースに行って登壇者の方のお話を伺うというものでどれも行きたかったのですが、フロントエンドエンジニアとして外せないなと思ったものをピックアップして回ってきました。
以下当日のタイムテーブル

読込時間はやっぱり大切

開始早々電車の遅延で途中からの傍聴になってしまったのが悔やまれて仕方ないですが、WEBパフォーマンス改善を聞いてきました。
やはりWEBサイト制作者としてこれは欠かせません。
以前Googleがこんな提言をしていました。

3秒を目安に描画されていないサイトは50%前後の離脱率につながる

これは勿論今もその通りです。
ただ、タスクランナーのgulpからwebpackが主流になったりnpmからyarnというコマンドに変化したりと、日進月歩で進化を続けるWEB業界なりの面白い情報もあったのでここでお伝えできればと思います。

webpack-bundle-anlyzer
昨今、React.jsやVue.jsを始めとするJSのMVCフレームワークの急速な成長やes6の普及などで、JSファイルも機能ごとに切り出しimportで使用することが増えていると思います。
そうなってくると困るのが、読み込まれなくて良いページでも読み込まれてしまうJSがいるという事態ですよね。
実際会場でのデモでも、相当数不要なJSが読み込まれている状態でした。

そんな時、何がそんなに容量を占めているのかを可視化してくれるnpmパッケージがwebpack-bundle-anlyzerです。
これを導入することで一体どのファイルがどれだけの容量を占めているのかを可視化してくれるので、importをdynamic importに切り替えたりして動的に読み込ませることで、初回ロード時の負荷を軽減させることが可能になります。

導入も簡単でQiitaの記事がシンプルでわかりやすかったのでぜひ試してみてください。

font-display
こちらが地味に衝撃でした。
この数年で日本語フォントも含めどんどんウェブフォントが出てきていますよね、デザインする側としてはよりどりみどりでこだわったデザインも可能になっていくのが楽しいのですが、weight数などが増えてきたり種類が増えるとこれも読込に負荷をかけてしまいます。

今まではJSで遅延ロードさせたりと改善されてきていたそんなあなたに朗報なのがfont-displayというcss3のプロパティです。
これは僕も今回のイベントで初めて知ったのですが、とても便利なのでぜひ使っていこうと思います。
指定する値によって、web fontが読み込みきるまでシステムフォントを使用する、もしくは読み込まれるまで表示しないなどが指定できるプロパティでChromeは60から使用可能になるそうです。

参考：コリス

時代はPWA

https://slides.com/takanorip/pwa-now-and-future#/
サービス開発をしている方は特に聞いたことがある、もしくはもう導入されている方も少なくないと思います、PWA。
とても便利なので、ぜひ皆さん導入していっていただきた代物です。
基本的にはきっとググってもある程度は情報としてキャッチしていけると思いますが、ざっくりと紹介していきます。

PWAとは
PWAとは、Progressive Web Appsの略で、モバイルユーザーのUX向上を目的とした、WEBアプリにネイティブアプリのようなUXを提供できる仕組みです。
モバイル端末が主流になってきている昨今、PWA実装されているWEBサービスを閲覧すると、ネイティブアプリのような挙動をさせることが可能になります。
以下簡略的にメリットを書きます。

1. ページの読み込みや表示が速い
2. オフラインでも動く
　･画面遷移をともなう操作もオフライン時に可能
3. プッシュ通知の受信が可能
4. インストール不要
5. ストアの審査なくアップデートが可能
6. GPSを使った現在地取得と利用が可能
7. ネイティブアプリのようなUIを実現できる
　･ブラウザデフォルトのUI（上部のメニューバー）を非表示にするなどのカスタマイズが可能
　･「ホームに追加」ボタンを表示でき、ホームに追加されたページはインストールされたアプリのように扱える
　･ホーム画面のアイコンが設定できる
　･起動時のスプラッシュ画面が設定できる

これだけメリットがあり、海外ではすでに某企業や某カフェの公式サービスなどはPWA化が進んでいるとのことです。
国内ではまだ実装実績がないそうですが、いずれ当たり前になっていく時代が必ず来ると思います。

今回のイベントで学んだ内容は以下です。
各種ブラウザの対応状況

●Chrome
　○Desktop Chrome, Android ChromeでPWA対応可能。
●Safari
　○Safari Technology Preview Release 46にてService Workerが提供されることに。2017/12/21時点ではPush APIなどはまだ提供されていないため、一部機能が利用可能に。
●Firefox
　○一部の機能を除いてPWA対応可能。Web App Manifestに依存する機能は利用不可。
●Internet Explorer/Edge:
　○IEでは対応不可。Edgeでは次のメジャーバージョンでService Workerが利用可能になるため、一部の機能が利用可能に。 

Angular.jsの最新動向

https://slides.com/laco/devfest-tokyo-2018-angular#/
JavaScriptのモダンフレームワークのひとつ、Angular.jsです。
一番歴史の長いモダンフレームワークで、誰しも一度は名前を聞いたことがあるのではないでしょうか。
かくいう僕も前職の時ある案件で導入検討がなされましたが、制作期間と学習コストが見合わず見送りになったフレームワークです。
そうです…つまるところ触ったことがないのです。
その為、凄い新鮮にお話を伺うことができました。

$ ng g c hello

と打つと、コンポーネント用のファイル一式と単体テスト用にファイル一式を自動生成してくれます。
コマンドである程度のことが簡単に導入できるようで、PWAの実装もハードルが低くやりやすい感触でした。
日々、Reactに触れていると斬新で実は凄い書きやすいのでは？といった感じです。
以下特徴を羅列していきます。

Tips
・CSSは各コンポーネントごとにデフォルトでscopingされる
・$ ng testコマンドで単体テストCLIツールで処理が可能
・$ ng atコマンドでライブラリをインストールし、初期実装を行ってくれる
・$ ng serveコマンドでローカル環境起動
・Material Designのコンポーネントが簡単実装可能
・$ ng buildコマンドでデプロイ用のdistディレクトリへ展開
・Angular Elements：コンポーネントをElements化することでAngular外でも使用可能になる

Feature
現在着手中（着手予定）のAngularの動きも少し教えていただけました。
Angular Ivy：Angularの内部改善、bundleのサイズが小さくなり読込を改善、Apiの速度改善等々
Angular Console：GUIでng ~ をいじいじして挙動を確認
Angular Designers：コードを欠かずにGUIでAngularを実装可能に。プロトタイプツールと同じ感覚でAngularを使用可能に

WEBコンポーネント概念はやっぱり大切

JavaScriptのUIフレームワーク、Polymerについてのイベントでした。
名前は聞いたことありましたが、こちらもまた使用経験がなかったためとても新鮮でした。
LPなどの単体のサイトや数ページのサイト制作にはとても向いているのではないかと思います。

Polymer Projectの紹介
Googleが推進しているプロジェクトで、新しい機能・ツール・パターンの標準を技術に合わせ、作っているプロジェクトです。
ウェブプラットフォームを進化させることを目的にライブラリ等の開発を行っています。

web componentsとは
web componentsについては詳しい情報はググってもらえたらと思います。。。
・Native Elementの中にCustom Elementを生成し使用していくことが出来る
・Shadow DOM -> Custom Elementをコンポーネント化しcss等の汚染を防ぐ
・HTML import -> 宣言的にCustom Elementを使用できる

現在のweb componentsの状況
・PC/スマホともに全ブラウザで使用可能

Eco System
webcomponents.org
→web componentsのnpmのようなもの。検索し、importするだけで公開されているCustom Elementsを使用可能に
Custom Elements Everywhere
→Custom Elementsの使用可能状況を確認することが出来る

現在のPolymer
・何故bowerを使用しているのか
→リリースされた当時のパッケージマネージャーがbowerだったため。3.0より、npmに変更されている
・Polifilと近藤する
→当初web componentsがPolifil+Polymerだったが、2.0より切り離された
・HTML importがやりづらい
→一度にロードさせることを考慮し、HTML importだったが3.0よりJavaScript Modulesに変更
・3.0よりシンタックスが変更された

Tips
・web componentsでもReduxが実装可能
・App-routerというRouterがある
　→location.hrefを取得分解し該当するコンポーネントを表出させる

Next Polymer Projects
・Lit-html、Lit-Elements
→Polymer Elementsのライト版として製作中

使っていってみようと思ったTypeScript

https://speakerdeck.com/okunokentaro/the-courage-to-change-by-typescript

聞いたことはあるという人も多いのではないかと思う、TypeScript。
僕も聞いたことはあるけど、使うメリットと使わないデメリットがあまり知らず、通常のJavaScriptで困ったことがなかったので、あまりググったりしたことはなかったですが、これを聞いて地味に勉強になったのでぜひこれを機会に使用していこうと思います。

そもそもTypeScriptとは
・JSなどと同様の言語
・Rubyライクな記述が可能
・自動コンパイルの手段もいくつか用意されている
・jQueryなどとの掛け合わせも可能
・Microsoftが開発中（現在3.0.3が最新）
・tscを使用し、jsにコンパイルする

そもそもそもそもnpmとは
ざっくりと言うと名前の通り、Nodeのパッケージを管理するマネージャーです。
それが便利だから、フロントなどでも使えるようにしていこうねとなり現在に至ります。
TypeScriptでも使用しますが、これのbundlerがwebpackで、このbundle時に型チェックをしてくれるのがTypeScriptの魅力です。

TypeScriptの今
・型定義
以前までの型定義は別ファイルで管理していかないといけませんでした
→今はnpmにて管理が可能に！！

$ npm i -D @types/react

・案件への導入ハードル
→今は途中からの実装も可能
コンパイラに--allow.jsというものが存在あり、型定義がanyで全て通ってしまうのがデメリットだが、導入ハードルは低く設定されている。
コンパイラのconfigに

script: true

とすることで、.tsファイルのみチェックを通しエラーを吐かせることが可能です。

変えていく勇気とは？
コードは往々にしてビル建築に例えられることがあるが、設計図通りに仕上がることはなく、コード外の変化によるコードの変化が大きいのが実情です。
それはプログラマーの進化や、仕様変更など理由は様々ですがこういったことはあるあるですよね。
この中コードの品質を保つ、腐っていく不要なコードを削除して高品質に保つためにリファクタリングは欠かせません。
いざリファクタリングをするとなったときテストがあれば便利ですよね。
それが可能なのもTypeScript。
コンパイラがエラーにならない限り、型定義があれば型検査で最低限可能になります。

まとめ
・テストを書く
・型を書く
・ドキュメントを書く
これでTypeScriptを入れることで不安を取り除くことが出来ます

まとめ

今回イベントに参加して、今まで触れてこなかった言語への理解と現状使っている言語の知識が増えました。
すぐに導入可能なものもあれば、自身で勉強をして深めていきたいのもありつつ、世界がより広がったのでおすすめです。
説明下手で伝わり切っていない点もあるかと思うので、ググりつつスライドを見ていただけたら…！

長々とお付き合いいただきありがとうございました！！