みたいな話を
リアルVtuberが語るフロントエンド開発入門セミナー #1
https://liberal-arts-for-tech.connpass.com/event/120366/
で聞いてきた！内容メモメモ
リアルVtuberがうんぬん
・自己紹介
・普段作っているもの
ホロレンズ向け XR
・理由
シティーボーイになりたい
DMM.comおしゃれ→宣伝です
・Javascript
Webが必要ですか？
ねこも杓子もSPA：本当にWeb必要？
Kotlin、バックエンド→技術戦略として必要か？
モダンフロントエンドへの異常な期待
どこでも動く：Windows,Mac,Android,iOSすべて違う（動いているフリはする）
→はやいのはプロトタイプまで
端末の差異：どこまで拾うか
・ナビゲーションバーの有無、解像度
・文字サイズ
・通信環境：PWA→Javascriptで通信遅れをカバーすることになる
→どこでも動くけど、動く分のつらさ
Web技術の投入で検討すべきこと
・ネイティブアプリではだめですか
Electronという選択肢もある
・MSブラウザを切る覚悟はありますか
IEだけでなく、Edgeもです
WebCL
・Betaビルドを
３か月に１回、仕様が変わる：
→ラピッドリリース
３か月に１回リグレッションテストをしなくてはいけない
前はReact、今Vue→そのフレームワークが即座に古くなる
React フックス
Webアプリで得られるモノ
・審査の回避
予定通りにリリースできる。修正も
・一つの言語にまとめられる
チーム全員がコードを読めるようになる
・技術的障壁の（若干）ダウン
高次ラッパーとしてのブラウザ
技術的障壁が低いように見える→早くできるように見える
→思いついたとき、すぐに出せる！
・Javascriotはつらい
今、Webに熱狂している→Safariでジャイロがとれない：プライバシー重視
つらみ一覧
コード補完がない
自分が正しい確証をもてない→ビルドされているのに壊れる
自分が正しいことがわからない
実行環境が手元にない
イマドキの書き方があまりまとまっていない
ES2015しかまとまっていないところが多い（２０１７までまとまっていない）
バックエンド：APIの役割しかない：REST APIの役割がほとんど
→非同期通信：ES2015より後の話 ぷろみすにほん
2016のプロミスが、今、楽でなくなっている
デバッグできない
Chromeの開発者ツールとにらめっこ
まさかのconsole.logデバッグ
→型がない、なにがおきてるかわからない
対策
TypeScriptを検討する
flowというのはあるけど、ほぼない
Dev Toolsが使えるときも
壊れているところは：通信、CPU,メモリ？
ここを解決したい
ES2015しかまとまっていないところがない
書き方の共有（できるだけ壊れない書き方）
・Javascriptはビルドする言語
ビルドしないと動かない
React/Veu/jsxはそもそもブラウザが解釈しない
→開発環境を構築しないといけない
ビルドに使うゆかいな仲間（戦う相手？）
Webpack
Babel
（ぱーせる）
→おちているものを拾えば動く時代ではない
・Webpack
モジュールバンドラー（公式）
ビルドです
１つのJSファイルになったほうが早い
転送速度からの解放
１つのファイルになっているからSPA
nodeエコシステムの利用
パッケージマネージャー
＜src=hogehoge＞からの解放
npmインストールにまとめる：１つにする
メディアのバンドル
CSS・imgなどもまとめる＝速い
モジュールによる安全性
・Webpackの勘所
module.ruleに記載していくだけ
test:正規表現を書く
use:使うローダーを書く
exclude:除外ディレクトしを指定
cssのローサ―はstyle-loader,css-loaderの順！
スタイルローダー：HTML styleタグを作る
そのなかにcss-loderが入ってくる
nodeモジュール JavascriptがJavascriptに依存している状態
→雰囲気で理解する。消すと壊れるよ！
・Babelの勘所
コンパイラです（トランスパイルとも）
古いブラウザで新しい関数を動かすためのコンパイラ
IE,Edgeを使うなら
waterfox
polyfil
ブラウザ側で未実装の関数を作っていれる
ただし動作を担保するものではない
preset-env
es2017までのコードをコンパイルする
EcmaScript：仕様の提案→Babelはそこをカバー
ステージ４
今３：webGPU
Babelが通っても、動くというものではない。
・ES2015とはなにか？
ECMAスクリプト
これ以降がモダン、これ以前は置き換える ２０１５以降はそれなりに使える
letとconst
ブロックスコープ
アロー関数
class
引数のデフォルト
分割代入
スプレッド演算子
Promise
async/await
import/export
・モダンなJavaScriptの書き方
→じゃないと、ただのレガシーコード
変数（定数）はletとconst
varは”絶対”使わない（巻き上げ回避）
constをできるだけ使う
アロー演算子
functionは使わない（先頭につくfunctionはレガシー）
関数は定数です。
async/await
コールバックを書かない。Promiseメソッドチェーンを書かない
むかしはXHRでやっていた→過去の資産
Promisfyを使ってawait：非同期処理が同期処理で書ける
Promiseはallなど一部にとどめる
一気に同時のとき
new Promise()はあり
→短く済むほうで書きましょう
※５GとSSRでリッチになる Three.js 重たくなる。 Joy8を使う、Chromeだと早い
・まとめてあるサイトがある
ES2015(ES6) 入門
https://qiita.com/soarflat/items/b251caf9cb59b72beb9b
イマドキのJavaScriptの書き方2018
https://qiita.com/shibukawa/items/19ab5c381bbb2e09d0d9
・規約はきびしめに
・lintツールを入れると
→意に反したらエラーにできる
自由に開発できる：意図せず壊れてしまう→セーフティネットがいる
・ルールに則る
ルールがないと、この書き方のほうが良くない！と言われてしまう。
・各ブラウザの所感
PCとモバイル
・PC
MSブラウザ；あきらめましょう。対応は厳しい
EdgeHTMLの解釈もだいぶ謎
→今後はChronium
Firefox
意外と動作に癖がある。プライバシー設定の挙動がChromeと異なる
Chrome
ここに合わせる。デバッグもしやすいので基本運用
Safari
too buggy。触んないほうがいい。バグどころの騒ぎではない
・モバイル
Windows Phoneは考えないでいい
Android
端末個体差が厳しい（Homeボタン）。ナビゲーションバーへの対応を
rotate Change
ios
PC版よりはまし、Androidとは値の入り方が変わる if ios if よこむき
resizeのやり方も違う
ユーザーエージェントを見てふるまいを変える
レスポンシブデザイン→スマホのほうが高性能なので、対応できない
２つのソース
→このへんは３回目
品質を満たすならネイティブ
・eslintのスタンダードの規約がだれにもいい
理由：文句言われたときに、「スタンダードって、書いてあるじゃん！」
・Enzyme、Jest、プリティアPrettier フォーマッタ(code formatter)
・Hasky
・コード規約以外でレビュー
フルスタックの場合、自分（人間）を信用しない→機械に任せる
Webpackの中身がどう動くか
class-loader
SASローダー
cssローダー：読めるけど・・・
styleローダー
→実際には、テキストの解析
エンジン
Chrome V8
Firefox：すぱいだーもんきー
edge:V8になっていく
→Openな環境といいつつ、実行環境が違う
XDの動きに合わせるのに、結構な労力がいる
Twitter/Github @lelelove1225
リアルVtuberが語るフロントエンド開発入門セミナー #1
https://liberal-arts-for-tech.connpass.com/event/120366/
で聞いてきた！内容メモメモ
リアルVtuberがうんぬん
・自己紹介
・普段作っているもの
ホロレンズ向け XR
・理由
シティーボーイになりたい
DMM.comおしゃれ→宣伝です
・Javascript
Webが必要ですか？
ねこも杓子もSPA：本当にWeb必要？
Kotlin、バックエンド→技術戦略として必要か？
モダンフロントエンドへの異常な期待
どこでも動く：Windows,Mac,Android,iOSすべて違う（動いているフリはする）
→はやいのはプロトタイプまで
端末の差異：どこまで拾うか
・ナビゲーションバーの有無、解像度
・文字サイズ
・通信環境：PWA→Javascriptで通信遅れをカバーすることになる
→どこでも動くけど、動く分のつらさ
Web技術の投入で検討すべきこと
・ネイティブアプリではだめですか
Electronという選択肢もある
・MSブラウザを切る覚悟はありますか
IEだけでなく、Edgeもです
WebCL
・Betaビルドを
３か月に１回、仕様が変わる：
→ラピッドリリース
３か月に１回リグレッションテストをしなくてはいけない
前はReact、今Vue→そのフレームワークが即座に古くなる
React フックス
Webアプリで得られるモノ
・審査の回避
予定通りにリリースできる。修正も
・一つの言語にまとめられる
チーム全員がコードを読めるようになる
・技術的障壁の（若干）ダウン
高次ラッパーとしてのブラウザ
技術的障壁が低いように見える→早くできるように見える
→思いついたとき、すぐに出せる！
・Javascriotはつらい
今、Webに熱狂している→Safariでジャイロがとれない：プライバシー重視
つらみ一覧
コード補完がない
自分が正しい確証をもてない→ビルドされているのに壊れる
自分が正しいことがわからない
実行環境が手元にない
イマドキの書き方があまりまとまっていない
ES2015しかまとまっていないところが多い（２０１７までまとまっていない）
バックエンド：APIの役割しかない：REST APIの役割がほとんど
→非同期通信：ES2015より後の話 ぷろみすにほん
2016のプロミスが、今、楽でなくなっている
デバッグできない
Chromeの開発者ツールとにらめっこ
まさかのconsole.logデバッグ
→型がない、なにがおきてるかわからない
対策
TypeScriptを検討する
flowというのはあるけど、ほぼない
Dev Toolsが使えるときも
壊れているところは：通信、CPU,メモリ？
ここを解決したい
ES2015しかまとまっていないところがない
書き方の共有（できるだけ壊れない書き方）
・Javascriptはビルドする言語
ビルドしないと動かない
React/Veu/jsxはそもそもブラウザが解釈しない
→開発環境を構築しないといけない
ビルドに使うゆかいな仲間（戦う相手？）
Webpack
Babel
（ぱーせる）
→おちているものを拾えば動く時代ではない
・Webpack
モジュールバンドラー（公式）
ビルドです
１つのJSファイルになったほうが早い
転送速度からの解放
１つのファイルになっているからSPA
nodeエコシステムの利用
パッケージマネージャー
＜src=hogehoge＞からの解放
npmインストールにまとめる：１つにする
メディアのバンドル
CSS・imgなどもまとめる＝速い
モジュールによる安全性
・Webpackの勘所
module.ruleに記載していくだけ
test:正規表現を書く
use:使うローダーを書く
exclude:除外ディレクトしを指定
cssのローサ―はstyle-loader,css-loaderの順！
スタイルローダー：HTML styleタグを作る
そのなかにcss-loderが入ってくる
nodeモジュール JavascriptがJavascriptに依存している状態
→雰囲気で理解する。消すと壊れるよ！
・Babelの勘所
コンパイラです（トランスパイルとも）
古いブラウザで新しい関数を動かすためのコンパイラ
IE,Edgeを使うなら
waterfox
polyfil
ブラウザ側で未実装の関数を作っていれる
ただし動作を担保するものではない
preset-env
es2017までのコードをコンパイルする
EcmaScript：仕様の提案→Babelはそこをカバー
ステージ４
今３：webGPU
Babelが通っても、動くというものではない。
・ES2015とはなにか？
ECMAスクリプト
これ以降がモダン、これ以前は置き換える ２０１５以降はそれなりに使える
letとconst
ブロックスコープ
アロー関数
class
引数のデフォルト
分割代入
スプレッド演算子
Promise
async/await
import/export
・モダンなJavaScriptの書き方
→じゃないと、ただのレガシーコード
変数（定数）はletとconst
varは”絶対”使わない（巻き上げ回避）
constをできるだけ使う
アロー演算子
functionは使わない（先頭につくfunctionはレガシー）
関数は定数です。
async/await
コールバックを書かない。Promiseメソッドチェーンを書かない
むかしはXHRでやっていた→過去の資産
Promisfyを使ってawait：非同期処理が同期処理で書ける
Promiseはallなど一部にとどめる
一気に同時のとき
new Promise()はあり
→短く済むほうで書きましょう
※５GとSSRでリッチになる Three.js 重たくなる。 Joy8を使う、Chromeだと早い
・まとめてあるサイトがある
ES2015(ES6) 入門
https://qiita.com/soarflat/items/b251caf9cb59b72beb9b
イマドキのJavaScriptの書き方2018
https://qiita.com/shibukawa/items/19ab5c381bbb2e09d0d9
・規約はきびしめに
・lintツールを入れると
→意に反したらエラーにできる
自由に開発できる：意図せず壊れてしまう→セーフティネットがいる
・ルールに則る
ルールがないと、この書き方のほうが良くない！と言われてしまう。
・各ブラウザの所感
PCとモバイル
・PC
MSブラウザ；あきらめましょう。対応は厳しい
EdgeHTMLの解釈もだいぶ謎
→今後はChronium
Firefox
意外と動作に癖がある。プライバシー設定の挙動がChromeと異なる
Chrome
ここに合わせる。デバッグもしやすいので基本運用
Safari
too buggy。触んないほうがいい。バグどころの騒ぎではない
・モバイル
Windows Phoneは考えないでいい
Android
端末個体差が厳しい（Homeボタン）。ナビゲーションバーへの対応を
rotate Change
ios
PC版よりはまし、Androidとは値の入り方が変わる if ios if よこむき
resizeのやり方も違う
ユーザーエージェントを見てふるまいを変える
レスポンシブデザイン→スマホのほうが高性能なので、対応できない
２つのソース
→このへんは３回目
品質を満たすならネイティブ
・eslintのスタンダードの規約がだれにもいい
理由：文句言われたときに、「スタンダードって、書いてあるじゃん！」
・Enzyme、Jest、プリティアPrettier フォーマッタ(code formatter)
・Hasky
・コード規約以外でレビュー
フルスタックの場合、自分（人間）を信用しない→機械に任せる
Webpackの中身がどう動くか
class-loader
SASローダー
cssローダー：読めるけど・・・
styleローダー
→実際には、テキストの解析
エンジン
Chrome V8
Firefox：すぱいだーもんきー
edge:V8になっていく
→Openな環境といいつつ、実行環境が違う
XDの動きに合わせるのに、結構な労力がいる
Twitter/Github @lelelove1225
アクセス
トータル
ランキング
