【聞き専】TSkaigi参加レポート
筆者のスペック
- プログラミングはほぼ独学
- 学生時代はC#プログラマー
- 今はソフトフェアエンジニアとして自社製品の製品開発を担当
- 使える言語はC# , Java , Python , Shell Script , node.js（勉強中） , TypeScript（勉強中）
参加したイベント
| イベント名 | TSKaigi Mashup #1 フロントエンド |
|---|---|
| URL | TSKaigi Mashup #1 フロントエンド |
| 主催 | 一般社団法人TSKaigi Association |
| 参加対象者 |
|
発表：1人目
基本情報
| 氏名 | 鴻巣 和司 さん |
|---|---|
| 会社名 | LINEヤフー株式会社 |
| 題名 | 大規模なコードベースの改修のために自作TypeScriptツールを作るメリット |
| 氏名 | Shota Hatadaさん |
|---|---|
| 会社名 | 株式会社dinii |
| 題名 | ReactNative アプリ同士の通信のために型情報をサクッと共有した話 |
発表概要
この方は、株式会社diniiのシステム紹介でした。
■システム概要
- 飲食店のDXを目指す会社
- 飲食店での注文を普段はインターネット経由でサーバーに送信
- 注文はモバイルオーダー、ハンディ、レジから入る
- ネットワーク障害に備える仕組みを作った
■ネットワーク障害に備える仕組み
- キッチンプリンターとアプリの連携はSDKで実現可能
- ハンディとレジアプリをアプリ同士で連携は独自開発が必要
- APIの型情報の共有は実装が必要だが、ライブラリ（react-native-tcp-socket）が使えそうだから、TCP通信にした
- APIの型情報の共有 ⇒ 無理やり同じインターフェースにする（型を上からかぶせているようだった）
感想
型を無理やり被せちゃうのはなるほど！と思った。型を定義出来るTypeScriptならではだと思った！
発表：３人目
基本情報
| 氏名 | Fumiya Konno さん |
|---|---|
| 会社名 | 株式会社ICS |
| 題名 | 私のことは嫌いになってもTypeScriptのことは嫌いにならないでください 〜フロントエンドエンジニアがTypeScriptと仲良くなる方法〜 |
発表概要
この方は、初心者のための勉強法紹介でした。
■TypeScriptの良い点
- JavaScriptでは気が付けないことを教えてくれる = JavaScriptよりも安全
- 型はドキュメントになる
■おすすめの勉強法
- 型エラーを解消できるようにすべし！
- 型を定義できるすべし！
- 変数や型から型を作れるようにすべし！ ★型パズルよりも設計が大切
感想
TypeScriptの本が少なくて困っていたが、JavaScriptの本で自分で型を解決してみるやり方で勉強しようかな？と勉強方法のヒントを得ることができた。
発表：４人目
基本情報
| 氏名 | ktmouk さん |
|---|---|
| 会社名 | note株式会社 |
| 題名 | テスト用のオブジェクトを簡単につくれるFactoryJSというライブラリを作った |
発表概要
この方は、自作ツールの紹介でした。
■課題
- テストをしっかり書きたいが、テストデータを用意するのが大変
■システム概要
- factory_bot , factory_boy のようなものを目指した ※factory_botはRubyのテスト用ライブラリ、factory_boyはPythonのテスト用ライブラリ
- Prismaのスキーマファイルから自動生成するために、Prisma専用のライブラリも作った
■現在は
- 個人開発で作っていたが、会社でも使っている
感想
個人開発で作ったものを会社でも使うなんて、、、凄すぎる！私もやってみたい！
参考リンク
noteエンジニアの技術記事 , 2024 , テスト用のオブジェクトを簡単に作れるFactoryJSというライブラリを作った発表：５人目
基本情報
| 氏名 | おささ さん |
|---|---|
| 会社名 | 株式会社BLUEISH |
| 題名 | Zero-Runtimeの理解とvanilla-extractという選択肢 |
発表概要
この方は、vanilla-extractの紹介でした。
■Zero-Runtime CSS-in-JS
- Runtime CSS-in-JSはJavaScript実行時にCSSを作成
- Zero-Runtime CSS-in-JSはビルド時にCSSを作成 ※どちらもJavaScript内にCSSを書く技術
■vanilla-extractとは？
- TypeScriptを使用したCSS開発を行うためのライブラリ
- Zero-Runtime CSS-in-JSである
- Runtime CSS-in-JSであるEmotionとほぼ同じことが出来る
- パフォーマンス、型安全性、開発効率の3拍子が揃っている
感想
CSSいつもべた書きだからやってみたい
参考リンク
2023 , ゼロランタイムCSS in JSとは？結局、何を使えばいい？- 2024年のフロントエンド -発表：６人目（ゲストセッション）
基本情報
| 氏名 | うひょ さん |
|---|---|
| 会社名 | 株式会社カオナビ |
| 題名 | tsconfig.jsonの設定を見直そう！ フロントエンド向け 2024夏 |
発表概要
この方は、おすすめのtsconfig.jsonの紹介でした。
tsconfig.jsonとは？
- TypeScriptのコンパイラオプションなどを記載した設定ファイル
- Next.jsが勝手に作ってくれることもある
おすすめのオプション
■moduleResolution
- moduleResolutionとは、モジュール解決の方法を決めるオプション ※モジュール解決とは、importで指定されたモジュールがどのファイルか判定すること
- moduleResolution:"node"にするとNode.jsを再現する
- moduleResolution:"builder"はwebpackなどのハンドラーの挙動を再現する。 Node.jsを再現しつつ、ESMの場合でも相対パスの拡張子を省略できる ※webpackとは、モジュールをいくつかのファイルにまとめてくれる開発ツールのこと
- moduleResolution:"bundler"がおすすめ！
■baseUrl
- baseUrlは削除しよう！
- 余計なモジュール解決をしてしまうことがあるので、ない方がいい
■target
- ソースコードがどのバージョンをサポートしているかを指定するオプション
- ブラウザでどこまでサポートしているか調べて出来る限り新しくしよう！
■momdule
- moduleは、targetからmoduleだけを取り出した設定
- momdule:"esnext"にすると純粋なES modules環境と解釈される
- momdule:"preserve"は自由度が高い設定
- momdule:"esnext" か "preserve" がおすすめ
感想
弊社のConfigファイルを見直してみたいと思った！
参考リンク
2024 , いちばんやさしい webpack 入門 2021 , webpackLT会のすすめ
筆者はサーバーサイドエンジニアなので、フロントには詳しくなかったですが、意外と話についていくことができました。 また、分からないことはLT会後に調べることで見識を広げることができました。LT会では、聞く専でも、学ぶことがいっぱいあります。
聞くだけでなく、発表してみたい！という方は【発表】LT会参加レポート をぜひご覧ください！
ぜひ、LT会に参加して、日本のエンジニア業界を盛り上げていきましょう！
おわりに
ここまで読んでくださった皆様、ありがとうございます。
そして、本記事の公開を許可してくださった登壇者の皆様に心より感謝申し上げます。