2022年度 traP第4回メンバー集会 らん☆ぷろ #traPmtg

めうめうぺったんたん

@d_etteiu8383

by @d_etteiu8383
2022年度 traP第4回メンバー集会 らん☆ぷろ #traPmtg

自己紹介

  • 名前：d_etteiu8383 (でっていう)
  • 生命理工学院生命理工学系4年
  • グラフィック班 モデリング部
  • ゲーム班
  • traP全員言えるかなを作りました

アイコン画像

by @d_etteiu8383
2022年度 traP第4回メンバー集会 らん☆ぷろ #traPmtg

スタンプの話をします

by @d_etteiu8383
2022年度 traP第4回メンバー集会 らん☆ぷろ #traPmtg

Abstract

traQ OAuth2.0 + SolidJS + ExpressでtraQ用スタンプ作成アプリを作りました
いろいろ勉強になったので軽く紹介します

https://trap.show/~d_etteiu8383/easy-stamp-v2/

by @d_etteiu8383
2022年度 traP第4回メンバー集会 らん☆ぷろ #traPmtg

Background

  • traQのOAuth2を使って何かを作りたいとずっと思っていた
  • Vueわからん～～
    • Reactに手を出してみるか～～？？？
      • ...SolidJS？！
        • 君かわいいね
  • OAuthわからん～～～
    • @JichouPさんがtraQのOAuth2を使ったアプリを作ってた
      • ソースコードを見て何となく"何をすればいいのか"がわかったので手を出してみた
by @d_etteiu8383
2022年度 traP第4回メンバー集会 らん☆ぷろ #traPmtg

Materials

  • traQ OAuth2.0
  • node
  • SolidJS
  • Express
by @d_etteiu8383
2022年度 traP第4回メンバー集会 らん☆ぷろ #traPmtg

OAuth2.0

こういうやつ→

所有者の代わりにリソースへのアクセスを許可するためのプロトコル[1]

  • 今回は"ユーザーの情報"と"スタンプの作成"というリソースを使うためにtraQ Oauth2.0が必要だった
  • 「Googleアカウントでログイン」や「Twitter連携」とかも大体OAuth2.0
    • GoogleのOAuthを使えば「Google driveのデータを使って何かできるアプリ」とかが作れる

by @d_etteiu8383
2022年度 traP第4回メンバー集会 らん☆ぷろ #traPmtg

SolidJS

https://www.solidjs.com

  • "良い感じのウェブページを作るためのヤツ"
    • "良い感じのウェブページを作る"のは結構大変
      • "ユーザーの入力によって画面(状態)を変化させる"
      • "データのやり取りをする"
    • 仲間的な立ち位置にVueやReactが存在する
  • まだ幼い
  • シンプル
  • ロゴがかわいかったので採用→
    • 任意のサービスロゴで選びがち

by @d_etteiu8383
2022年度 traP第4回メンバー集会 らん☆ぷろ #traPmtg

Express

https://expressjs.com/ja/

Webアプリケーションのフレームワーク(枠組み・テンプレート)

  • 直接見えない裏側で頑張ってる Express
    • OAuth2.0周り
    • traQとのデータのやり取り
  • 正直まだちゃんと使いこなせてないのでこれからちゃんと勉強したい
by @d_etteiu8383
2022年度 traP第4回メンバー集会 らん☆ぷろ #traPmtg

Results

https://trap.show/~d_etteiu8383/easy-stamp-v2/

by @d_etteiu8383
2022年度 traP第4回メンバー集会 らん☆ぷろ #traPmtg

Discussion

  • 形にはなったがまだまだ甘い部分がかなりたくさんある
    • 特にバックエンド
      • セキュリティの勉強してみたくなった
      • エラーハンドリングちゃんとできてない(怠慢)
  • SolidJSのシンプルな仕組み・APIを通して"リアクティブ"の片鱗に触れ、"VueやReactがやろうとしていたこと"をようやく理解できてきた
    • VueとかReactはドキュメント/ライブラリがあまりに豊富すぎて初心者からするとなにしていいかわからなくなる(なった)
    • SolidJSはまだあまり整備されてない(正直まだ"足りない")けど初心者でもその全体像を比較的簡単に眺められて良かった
  • ガバガバコンポーネント設計
by @d_etteiu8383
2022年度 traP第4回メンバー集会 らん☆ぷろ #traPmtg

References

by @d_etteiu8383

traQはVue, TwitterはReact 幼い:5年ぐらい

オフチョベットしたテフをマブガッドしてリットにする テフ：イネ科の植物 オフチョベット：粉末状にする マブガッド：水と混ぜる 焼いてできるもの：インジェラ リット：インジェラの元 リットを数日発酵させて焼くとインジェラになる