Inside Frontend #3 資料まとめ

# 概要

2019年5月18日に渋谷Abema Towersで開催されたFrontendカンファレンスである[Inside Frontend](https://inside-frontend.com/)の資料と補足情報まとめメモ。資料とかはそのうち公式にまとめられる？  

# 各セミナー

## TypeScript: Why and how we adopted it at Slack (Felix Rieseberg)

Twitter:[felixrieseberg](https://twitter.com/felixrieseberg) GitHub:[felixrieseberg](https://github.com/felixrieseberg)  

* [未公開](#)

### 参考

* [Koa \- next generation web framework for node\.js](https://koajs.com/)
* [ESLint \- Pluggable JavaScript linter](https://eslint.org/)  
→tsに対するLintはまだちょっと弱いとのこと(TSLintはESLintに取り込まれた)  

## Introduction to Lucet (Adam Foltzer)

GitHub:[acfoltzer](https://github.com/acfoltzer)

* [未公開](#)

### 参考

* [WASI \|](https://wasi.dev/)  
→WebAssembly System Interface. ブラウザ以外の実行環境で動作させるための仕様。
* [fastly/lucet: Lucet, the Sandboxing WebAssembly Compiler\.](https://github.com/fastly/lucet)  
→WebAssemblyのコンパイラ&ランタイム
* [Terrarium \- Fastly Labs](https://wasm.fastlylabs.com/)  
→edge computing platform. 中で `Lucet` が動いてる


## Nuxt.jsで中規模サービスを統合した話 (Koichi Sawada& Hajime Sasanuma)

* [Unification of the middle scale services by Nuxt\.js](https://www.slideshare.net/HajimeSasanuma/unification-of-the-middle-scale-services-by-nuxtjs)

## Making less of the web with feature policy (Andrew Betts)

Twitter:[triblondon](https://twitter.com/triblondon) GitHub:[triblondon](https://github.com/triblondon)  

* [Making less of the web with Feature Policy \- Speaker Deck](https://speakerdeck.com/triblondon/making-less-of-the-web-with-feature-policy?slide=3)  
→(仮)3月公開のときの資料だから今回とは内容とか一部違うかも？

## デザインエンジニアとフロントエンド (Shinichi Kogiso)

Twitter:[kgsi](https://twitter.com/kgsi) GitHub:[kgsi](https://github.com/kgsi)  

* [デザインエンジニアとフロントエンド / Bridge the gap between design and engineering \- Speaker Deck](https://speakerdeck.com/kgsi/bridge-the-gap-between-design-and-engineering)



## formの送信ログから反省する、本当は必要だったvalidationや機能たち (Yuta Ide)

Twitter:[sadnessOjisan](https://twitter.com/sadnessOjisan) GitHub:[sadnessOjisan](https://github.com/sadnessOjisan)  

* [Formの送信ログから反省する、 本当は必要だったバリデーションや機能たち \- Speaker Deck](https://speakerdeck.com/sadnessojisan/formfalsesong-xin-rogukarafan-sheng-suru-ben-dang-habi-yao-datutabaridesiyonyaji-neng-tati)


### 参考

* [sadnessOjisan/Form\-Museum: 式場会社の管理画面という設定](https://github.com/sadnessOjisan/Form-Museum)

## Web App Checklist ~高品質のWebアプリケーションをつくるために~ (Kazunari Hara & Marina Toki)

Twitter:[herablog](https://twitter.com/herablog)  Twitter:[tokimariri](https://twitter.com/tokimariri) GitHub:[herablog](https://github.com/herablog)  GitHub:[tokimari](https://github.com/tokimari)  

* [Web App Checklist 〜高品質のWebアプリケーションをつくるために〜 / Web App Checklist 2019 at Inside Frontend \- Speaker Deck](https://speakerdeck.com/herablog/web-app-checklist-2019-at-inside-frontend)

## いちからデザインシステムを作ってみて学んだこと (Kengo Haruno)

Twitter:[halsakulalala](https://twitter.com/halsakulalala)

* [いちからデザインシステムを作ってみて学んだこと \- Speaker Deck](https://speakerdeck.com/halken/itikaradezainsisutemuwozuo-tutemitexue-ndakoto)

### 参考

* [Fractal](https://fractal.build/)  
→スタイルガイドジェネレーター
* [css\-modules/css\-modules: Documentation about css\-modules](https://github.com/css-modules/css-modules)  
* [storybooks/storybook: UI component dev & test: React, Vue, Angular, React Native, Ember, Web Components & more\!](https://github.com/storybooks/storybook)  
→UIコンポーネント開発環境。一覧参照したり管理もできる。
* [Atomic Design by Brad Frost](http://atomicdesign.bradfrost.com/)  
→コンポーネントを分割するルール。そのままではうまく適用・運用できなかった。最小単位として `element` とを定義するなど踏襲しつつカスタマイズして利用したとのこと。

## BFFのDeveloper Experience (Yosuke Kurami)

Twitter:[quramy](https://twitter.com/quramy) GitHub:[quramy](https://github.com/quramy)  

* [BFF and Developer Experience \- Speaker Deck](https://speakerdeck.com/quramy/bff-and-developer-experience)

### 参考

* [InsideFE2018 A\-5のAMAで時間内にできなかった質問に対する回答](https://gist.github.com/Quramy/dd505a537fdf1c88f2f497039cac0845)

## キャリア系の話~strobo.fm公開収録~ (Shogo Sensui & Hiroki Tani)

* [未公開](#)

* [\#strobofm](https://strobo.fm/)  
→ここで公開されるはず

## AbemaTVにおけるCSS is too fragile問題に対する解 (Shota Kubota)

Twitter:[kubotashota](https://twitter.com/kubotashota) GitHub:[kubosho](https://github.com/kubosho)  

* [AbemaTVにおけるCSS is too fragile問題に対する解 / Solution of "CSS is too fragile" in AbemaTV \- Speaker Deck](https://speakerdeck.com/kubosho/solution-of-css-is-too-fragile-in-abematv)


## 世界中誰もが使えるサービスを目指して、Web標準で作るガラケーサイト (Mariko Kosaka)

Twitter:[kosamari](https://twitter.com/kosamari) GitHub:[kosamari](https://github.com/kosamari)  

* [Web標準でつくるガラケーサイト \- Speaker Deck](https://speakerdeck.com/kosamari/webbiao-zhun-detukurugarakesaito)

### 参考

* [AMAの回答](https://twitter.com/kosamari/status/1129923863754825732)  
→twitterのスレッドになってます
* [The emerging OS \- KaiOS](https://www.kaiostech.com/)  
→FirefoxOSベースのOS。インドではAndroidに次いで2位の普及率らしい。3億7千万台!!
* [PROXX — a game of proximity](https://proxx.app/)  
→ガラケーでも遊べる Accesible Mine sweaper!!
* [GoogleChromeLabs/proxx: A game of proximity](https://github.com/GoogleChromeLabs/proxx)  
→同githubリポジトリ
* [Introducing PROXX  \|  web\.dev](https://web.dev/proxx-announce)  
→同紹介記事
* [GoogleChromeLabs/comlink: Comlink makes WebWorkers enjoyable\.](https://github.com/GoogleChromeLabs/comlink)  
→ `WebWorkers` とのやり取りを助けてくれる。
* [WICG/focus\-visible: Polyfill for \`:focus\-visible\`](https://github.com/WICG/focus-visible)  
* [Electroknit! Node.jsでセーターを編む方法](https://kosamari.com/presentation/nodefest-2015/#/0)  

## Loading Performanceとの向き合い方 (Sho Miyamoto)

Twitter:[shqld](https://twitter.com/shqld) GitHub:[shqld](https://github.com/shqld)  

* [Loading Performanceとの向き合い方 / InsideFrontend 2019 \- Speaker Deck](https://speakerdeck.com/shqld/insidefrontend-2019)

## 品質と開発速度を両立させるために捨てたものと守ったもの (Tsuyoshi Wada& Soichi Masuda)

Twitter:[wadackel](https://twitter.com/wadackel)  Twitter:[masuP9](https://twitter.com/masuP9) GitHub:[tsuyoshiwada](https://github.com/tsuyoshiwada)  GitHub:[masuP9](https://github.com/masuP9)  

* [Inside Frontend 2019 \- 品質と開発速度を両立させるために捨てたものと守ったもの \- Google スライド](https://docs.google.com/presentation/d/13QD86hxp0dB_xHkYcyLrFX1xNt0Vg4wsqIo8yeBQmFs/edit#slide=id.g5a1484322a_2_48)