- We Are JavaScripters! @30thに参加してきました。
- 今回はいつもより人数少なめでいい雰囲気の勉強会でした！"全員登壇が目標"の勉強会なのでそろそろ初登壇してみたいな・・・とも思いました！
| タイトル | 発表者 |
|---|---|
| Expo と Firebase Authentication | @okamuuu |
| vueでのcssアニメーションの話 | @daitasu |
| 記事作成ツールのフロントエンドをNuxt.js × Atomic Designでリプレイスしている話 | @comy |
| 反復処理に速さを求めて | @camcam_lemon |
| 無思考型個人開発のススメ | @skmt3P |
| 『if文のはなし』 | @ticktakclock |
| 勝手に技術書でビブリオバトル「JavaScriptで学ぶ関数型プログラミング」 | @sadnessOjisan |
| On the Evolution and Change of Riot.js v4 | @kuwahara_jsr |
| もっと画像を壊した話 | @chikoski |
Expo と Firebase Authentication
- @okamuuuさん
ExpoとFirebaseAuthentication
- 意外と大変だったので共有
- SNS認証でログインが必要
- Firebase Authenticationで簡単にいけるのでは！？
- RNとFirebaseとOAuthとサーバサイドの知識必要だった
なぜExpo(ReactNative)
- 少人数でクロスプラットフォーム
- Webだと簡単だから
ExpoでFirebaseAuthentication
参考
vueでのcssアニメーションの話
- @daitasuさん
CSSアニメーション
- @keyframesで始点と終点を指定
VueでCSSアニメーション
- v-if/-v-showで切り替え
- vue-transition
- v-enter
- v-enter-to
- v-enter-active
- v-leave
- v-leave-to
- v-leave-active
- js hookもできる
- jsライブラリ殿組み合わえもしやすい
記事作成ツールのフロントエンドをNuxt.js × Atomic Designでリプレイスしている話
- @comyさん
NuxtとAtimicDesign
- ディレクトリ構成
- /components配下にatoms等々
- pagesはそのまま
- templateは使わない
- atoms
- 他のコンポーネントを含まない
- state持たない
- molecules
- atomsで構成される
- state持って良い
- vuexアクセス不可
- organisms
- atomes/molecules/organismsで構成
- 再利用考えない
- state持つ
- vuexアクセス可
- 責務がはっきりしたので肥大化しづらく再利用しやすくなった
反復処理に速さを求めて
- @camcam_lemonさん
JavaScriptのイテレーション処理
- たくさん書き方がある
- どれが一番早いか
- for inはおそすぎ
- whileが強い
- ループ回数増やしていくとforが上回る
- jQuery謎の安定感
- mapはだんだん遅くなっていく
無思考型個人開発のススメ
- @skmt3Pさん
個人開発
- 余計なことに時間かけたくない
- Nuxtで規約を設けて開発
- docker個人PCだと重くて動かない
- PrettierとLintを信じる
『if文のはなし』
- @ticktakclockさん
JavaScriptのif
- 静的型付け言語に慣れている人だとJavaScirptは感覚が違う
- true/falseで判定する
if(str) { ... }!?if(str !== null) { ... }ではないのか!?- truthy/falsy
- 型変換した結果が入る
- false => false/undefined/null/''/0/NaN
- 空文字なんでfalsy? => lengthが0だから
- if文の条件式には何でも入れられる
勝手に技術書でビブリオバトル「JavaScriptで学ぶ関数型プログラミング」
- @sadnessOjisanさん
知的評論合戦ビブリオバトル
- 本を持ち寄ってディスカッション
JavaScriptで学ぶ関数型プログラミング
- ライブラリのインターフェース設計に役立ち
- 第一級関数
- 値として関数を使える
- 作用的プログラミング -関数を実行するために他の関数を呼び出す
- 関数を組み立てる関数
- カリー化
- 実行されるたびに新しい関数を返す
- 設定を加える関数を作るにはどうしたらいいかあを学べる
On the Evolution and Change of Riot.js v4
- @kuwahara_jsrさん
Riot
- Reactの競合みたいな立ち位置
- Reactより機能は劣るが導入が速い
Riot@4
- 破壊的変更多い
- 拡張子が
.tagから.riotになった - Reactっぽくなってきた
- ライフサイクルメソッド
- props/state
- Vueっぽくも見える
- まだベータ版なので注意
もっと画像を壊した話
- @chikoskiさん
JavaScriptで画像を壊す
- WebCamで撮った画像を壊して表示する
- ArrayBufferをBlobにしてJPGにして表示する
- Workerの第二引数に
{mode: 'module'}つけるとES Modules使える - worker-dom
- WorkerでDOMを操作できるライブラリ
- https://github.com/ampproject/worker-dom
- 一部分だけ動的に変更するようなページで使えるかも
