「We Are JavaScripters! @30th」に参加してきました

  • We Are JavaScripters! @30thに参加してきました。

wajs.connpass.com

  • 今回はいつもより人数少なめでいい雰囲気の勉強会でした!"全員登壇が目標"の勉強会なのでそろそろ初登壇してみたいな・・・とも思いました!
タイトル 発表者
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)

ExpoでFirebaseAuthentication

  • Webで使えるメソッドが使えない
  • facebookは簡単
  • googleとかtwitterは大変
  • Expoが手伝ってくれるところもあるけど自前でやらないといけない所も多い

参考

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
  • 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

Riot

  • Reactの競合みたいな立ち位置
  • Reactより機能は劣るが導入が速い

Riot@4

  • 破壊的変更多い
  • 拡張子が.tagから.riotになった
  • Reactっぽくなってきた
    • ライフサイクルメソッド
    • props/state
  • Vueっぽくも見える
  • まだベータ版なので注意

もっと画像を壊した話

  • @chikoskiさん

JavaScriptで画像を壊す

  • WebCamで撮った画像を壊して表示する
  • ArrayBufferをBlobにしてJPGにして表示する
  • Workerの第二引数に{mode: 'module'}つけるとES Modules使える
  • worker-dom