発表資料 - React Tokyo ミートアップ #11

え？Reactってなんですか？ React Tokyo ミートアップ #11 haruki 1

自己紹介 haruki • 「東京オタク大学」でググったらマジで出てくる大学4年 • Reactを使っている会社 新卒入社予定 ◦ 内定者インターンに最近行きました 2

2024年10月 新卒採用面接にて • 「今までPythonやってきました！作品いっぱいあります」 • 「特にWebサイトは累計ユーザー26万人います！」 ◦ Flask (最近は使われないWebフレームワーク) 3

2024年10月 うちではGo, React, Next.js使ってるけど大丈夫？ • がんばります！ ◦ しらんけど 内定もらった 4

2024年10月 内定者インターンやるけど来る？ • 行きます！ 5

行った • 新卒採用2年目の会社 • 内定者インターン受け入れは初らしい 「勉強課題」をやることに 6

はじめてのReact 感想 7

わからない1 • Flask (Jinja2): HTML (+ Jinja2特有の文法) • React: TSX, TS 8

わからない1 • Flask (Jinja2): フロント側ではほぼ何もできない 変数を表示する程度 • React: なんかtsファイルでいろいろ処理やってる！？ フロントエンドとは 9

わからない1
Flask (Jinja2): for, if, 数値の簡単な計算くらいなら書ける
<div>
  <h2>目次</h2>
  <ol>
    <li>
      <a href="#p01">PyCon JP {{ year }}</a>
    </li>
    <li>
      <a href="#p02">React Conf {{ year - 1 }}</a>
    </li>
  </ol>
</div>
10

わからない1
React: なにこれ
interface YearStore {
  year: number;
  setYear: (year: number) => void;
}
export const useYearStore = create<YearStore>((set) => ({
  year: 2024,
  setYear: (year) => set({ year }),
}));
const TableOfContents = () => {
  const { year } = useYearStore();
  const items = [
    { id: 'p01', title: `PyCon JP ${year}` },
11

わからない2 エンドポイントどこ • Flask: サーバーサイドレンダリング • React: APIでバックエンドと連携 12

わからない2
list.ts
export const API_ENDPOINTS = {
  users: '/api/users',
  userDetail: (id: string) => `/api/users/${id}`,
  posts: '/api/posts',
  login: '/api/auth/login',
} as const;
13

わからない2
router.ts の例 (Next.js App Routerの場合)
import { createBrowserRouter } from 'react-router-dom';
export const router = createBrowserRouter([
  {
    path: '/',
    element: <HomePage />,
  },
  {
    path: '/users',
    element: <UsersPage />,
  },
  {
    path: '/users/:id',
    element: <UserDetailPage />,
  },
]);
14

わからない2 どっちなの！ • コードが追えない • 原因の切り分けが難しい 15

静的解析のありがたみ • Flask: フロントでの複雑な処理はJavaScriptで書く • React: TypeScriptで書く 16

静的解析のありがたみ • Flask: どこが定義なのか追いづらい • React: VSCodeショートカットで定義に飛べる VSCodeのありがたみ 17

レビューの難しさ • 先輩の中に、欠点だけを無限に指摘する人がいた ◦ (話してみたら優しい人だった) • とはいえ無限に指摘だけされるのは辛い 18

おわり React頑張ります😭 19