きいてくれNIGHT Vol.1

きいてくれ NIGHT これから5年の フロントエンドエンジニアキャリアプラン案 株式会社トゥーアール フロントエンドエンジニア 扇 克⾄（おうぎ かつし）

⾃⼰紹介 扇 克⾄（おうぎ ● かつし） 所属 株式会社トゥーアール ● 担当 フロントエンドエンジニア / テクニカルディレクター ● 経歴 広告代理店営業 → Webデザイナー → Flash → jQuery → React Web業界の経歴は18年⽬ ● 年齢 1978年6⽉⽣まれ 46歳

選択と集中！ 現在のフロントエンドエンジニアの業務領域 1. TypeScript / JavaScript 2. React / Vue.js 3. Next.js / Remix / Nuxt 4. Headless CMS 5. CSS / Tailwind CSS 6. WordPress 7. アクセシビリティ 8. Animation 9. AWS Lambda / Cloudflare / Firebase and more…

さらに絞り込み… 1. TypeScript / JavaScript 2. React 3. Remix（Next.js） 4. SQL / Prisma ORM 5. AWS SAM（AWS Serverless Application Model）

バックエンド気味なフロントエンドエンジニアへ バックエンドの事はわからぬ！ JSONがほしい！ CSS… JSONをあげる！ わたし フロントエンドエンジニア バックエンドエンジニア

Rails･Laravel･Django サーバーサイドフレームワーク ● Railsでは何度かアプリケーションを作った経験があるがMPAを作るには最 速。ActiveRecordはSQL弱者には最⾼。 ● 込み⼊ったUIを作ろうとすると途端に苦しい。erb + UMD版のVue.jsで何 とか頑張っていた記憶。 ● 最近はHotwireと呼ばれるモダンWebアプリケーションのためのフレーム ワークが付いているらしいが…。 ● Railsは好きだがフロントエンド開発とは分けて考えたい。 ● TypeScriptユーザーには動的型付け⾔語が扱いにくい。

TypeScriptでRails的なフルスタックをやるには？ ツール 責務 ● ● ルーティング（ファイルベース） データの取り扱い（loader / action） ● ● ● データベースのスキーマ管理とマイグレーション。 TS型の生成。 タイプセーフなデータベースクライアント データベース操作を抽象化 ● タイプセーフなバリデーション ● ● ユーティリティクラスの組み合わせ shadcn/uiを利用するとUI開発が加速 Vitest ● ● TypeScriptをネイティブサポート ユニットテスト &スナップショットテスティング（要追加モジュール） Remix Auth ● 認証 Zod

Remix Reactのone-way data 思想そのまま。データフローが理解しやすい。 Data Flow in Remix | Remix https://remix.run/blog/remix-data-flow UIはステートの関数である アクションによって状態が変化するたびに、ビューは再レンダリングされる

• https://remix.run/blog/remix-data-flow

Prisma ORM スキーマをDSLで書いてマイグレーションを実⾏する。 既存のデータベースからスキーマを作ることも可能だ！ VSCodeのPrismaプラグインを⼊れればコードフォーマットもやってくれる。

● ● TypeScriptのコードを⽣成してくれる のでコードヒントが出る！ aspidaのような感覚で利⽤可能。

ActiveRecordの絶対的にいいところ… コマンドライン（rails c）から直接データの操作が可能。 Prismaの場合はおそらくスクリプトを書いて実⾏しないとできない…はず。 今後の進化に期待したい。

これからのフロントエンドエンジニア…⾯⽩そうじゃないですか？ 株式会社トゥーアールでは フロントエンドエンジニアを募集中です！ ともに新時代のフロントエンドエンジニアにな りませんか！？

Xで気軽にDMください！ @to_r_inc