きいてくれNIGHT Vol.1

540 Views

November 06, 24

スライド概要

これからトゥーアールが目指すフロントエンドエンジニア

profile-image

株式会社トゥーアールのフロントエンドエンジニアです。

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

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

2.

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

3.

選択と集中! 現在のフロントエンドエンジニアの業務領域 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…

4.

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

5.

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

6.

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

7.

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

8.

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

10.

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

11.

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

12.

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

13.

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

14.

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