_microCMS_を使ってNext.jsアプリ開発しよう_.pdf

Transcript

1. 「microCMS」を使って、 Next.jsアプリ開発しよう！ Dockerを用いGCPへデプロイするシーンも公開 シニアエンジニア 青木美穂子
2. 自己紹介 青木 美穂子 パーソルキャリア株式会社 サービス開発部 シニアエンジニア 👩‍💻Webフロントエンドが専門 👀デザインとエンジニアリングの間の領域に興味あり 👨‍👩‍👧 ‍👦 家族4人 🚶散歩・読書が好き 🍫好きな食べ物はマルセイバターサンド
3. パーソルキャリアについて
4. パーソルキャリアについて
5. 今日の流れ ハンズオン 1. Next.jsでアプリケーション(with Docker)の作成 2. アプリケーションのTypeScript化 3. microCMSのセットアップ 4. アプリケーションにmicroCMSへの通信を実装 5. アプリケーションにニュース一覧ページとニュース詳細ページを実装 デプロイ 1. Docker上での実行 2. DockerイメージをContainer Registryへpush 3. Cloud Runでサービスを作成
6. 今日の環境 • MicroCMS無料アカウント • Node.js v18 • Docker Desktop • VSCode
7. Next.jsとは https://nextjs.org/ • Reactベースのフレームワーク • Server Side Rendering, Static Site Generation • Routing
8. サンプルからNext.jsアプリケーションを作ろう next.js/examples/with-docker $ npx create-next-app --example with-docker nextjs-microcms-docker # or $ yarn create next-app --example with-docker nextjs-microcms-docker → DockerfileはCloud Runへのデプロイの時に使います
9. 作ったアプリケーションを起動しよう $ cd nextjs-microcms-docker $ yarn dev → http://localhost:3000/ をブラウザで開く
10. アプリケーションをTypeScript化しよう(1) https://www.typescriptlang.org/ TypeScript is JavaScript with syntax for types. $ yarn add -D typescript @types/node @types/react @types/react-dom $ npx tsc --init
11. アプリケーションをTypeScript化しよう(2) package.jsonに太字部分を追加する "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "type-check": "tsc" },
12. アプリケーションをTypeScript化しよう(3) 作成されたtsconfig.jsonに太字部分を追加する "compilerOptions": { …, "jsx": "preserve", "baseUrl": "./", "noImplicitAny": false }, "exclude": [ "node_modules", "dist" ], "include": [ "next-env.d.ts", "**/*.ts", "**/*.tsx" ] }
13. アプリケーションをTypeScript化しよう(4) index.d.tsを作成する declare module '*.css';
14. アプリケーションをTypeScript化しよう(5) ファイルの拡張子を変更する • pages/_app.js → pages/_app.tsx • pages/index.js → pages/index.tsx • pages/api/hello.js → pages/api/hello.ts $ yarn type-check → Errorなく完了すればOK
15. microCMSをセットアップしよう 1. https://microcms.io/ からログイン 2. https://app.microcms.io/create-service 「サービスを作成」で「一から作成する」をクリック 3. サービス名とサービスIDを入力して「サービスを作成する」をクリック 4. https://<yourServiceId>.microcms.io/create-api 「APIを作成」で「お知らせ」をクリック →「お知らせ」と「カテゴリ」APIが作成される
16. microCMSへの通信を実装しよう(1) https://github.com/microcmsio/microcms-js-sdk It helps you to use microCMS from JavaScript and Node.js applications. $ yarn add microcms-js-sdk
17. microCMSへの通信を実装しよう(2) .env.localを作成する → https://<serviceId>.microcms.io URLからサービスIDを確認 → https://<serviceId>.microcms.io/api-keys からAPI Keyを確 認 NEXT_PUBLIC_MICROCMS_API_URL=<serviceId> NEXT_PUBLIC_MICROCMS_API_KEY=<APIKey>
18. microCMSへの通信を実装しよう(3-1) lib/api.tsを作成する クライアントの作成 import { createClient } from 'microcms-js-sdk'; const client = createClient({ serviceDomain: process.env.NEXT_PUBLIC_MICROCMS_API_URL ?? '', apiKey: process.env.NEXT_PUBLIC_MICROCMS_API_KEY ?? '' });
19. microCMSへの通信を実装しよう(3-2) lib/api.tsを作成する Newsタイプの作成 export interface News { id: string, title: string, content: string }
20. microCMSへの通信を実装しよう(3-3) lib/api.tsを作成する ニュース一覧とニュース詳細を取得 export async function getNewsList(): Promise<News[]> { const data = await client.get({ endpoint: 'news' }) return data.contents } export async function getNews(id: string): Promise<News> { const data = await client.get({ endpoint: 'news', contentId: id }) return data }
21. ニュース一覧ページを実装しよう(1) pages/index.tsを編集する const [newsList, setNewsList] = useState<News[]>([]); useEffect(() => { getNewsList().then((newsList: News[]) => { setNewsList(newsList) }) }, []);
22. ニュース一覧ページを実装しよう(2) pages/index.tsを編集する return ( <div className={styles.container}> ... <main className={styles.main}> ... <div className={styles.grid}> {newsList.map(news => <Link key={news.id} href={`/news/${news.id}`} className={styles.card}> <h3>{news?.title} &rarr;</h3> <p></p> </Link>) } ...
23. ニュース詳細ページを実装しよう(1) $ yarn add html-react-parser pages/news/[id].tsxを作成する const [news, setNews] = useState<News>(); const router = useRouter(); useEffect(() => { if (router.isReady) { getNews(router.query.id?.toString() ?? '').then((news: News) => { setNews(news) }) } }, [router.isReady]);
24. ニュース詳細ページを実装しよう(2) pages/news/[id].tsxを作成する return ( <div className={styles.container}> <main className={styles.main}> <h1 className={styles.title}> {news?.title} </h1> <p className={styles.description}> {parse(news?.content ?? '')} </p> </main> </div> )
25. 動かしてみましょう $ yarn dev
26. microCMSの便利機能 • 画像サイズ ◦ 画像の縦横比調整、切り取りや表示領域の最適化 • クエリパラメータ ◦ limit, offset : ページング ◦ q : 全文検索 ◦ fields : 取得する要素の指定 ◦ filters : フィルタ条件
27. おつかれさまでした！ 🍵
28. Docker上で実行しましょう $ docker build -t nextjs-microcms-docker . $ docker run -p 3000:3000 nextjs-microcms-docker
29. Docker Composeを使いましょう(1) docker-compose.ymlを作成する version: '3.8' services: app: build: . ports: - 3000:3000
30. Docker Composeを使いましょう(2) Dockerの起動 $ docker compose up -d Dockerの終了 $ docker compose down
31. DockerイメージをContainer Registryへpushし ましょう gcloudへログインする $ gcloud auth login $ gcloud config set project <project name> Container Registryへpushする $ docker tag nextjs-microcms-docker_app gcr.io/dev- aoki/nextjs-microcms-docker:init $ docker push gcr.io/dev-aoki/nextjs-microcms-docker:init
32. Cloud Runでサービスを作成する
33. お知らせ
34. 新卒採用の職種一覧 ビジネス職 新規事業開発職 企画職 エンジニア職 デザイナー職 データスペシャリスト職 さまざまなエリア・職種に 配属可能性あり 特定のポジション 確約で配属 リクルーティングアドバイザー キャリアアドバイザー プロジェクトエージェント リクルーティングコンサルタント HiPro Bizコンサルタント 新卒採用人事 サービス企画 プロダクト企画 ITコンサルタント クライアントサクセス エンジニア UI/UXデザイナー データサイエンティスト
35. 学びの環境 • エンジニアが多様なキャリアを実現できるよう、さまざまな取り組みが 行われています。 学 び • 書籍購入補助 • 資格取得費用補助 • セミナーや研修費用負担 • 英語学習サポート 社 外 貢 献 • techtekt（テックテクト）での記事執筆 • TECH Street (テックストリート)での登壇 • 各種セミナーでの講演 そ の 他 • 開発用PCいつでも交換OK • 部署によっては最新スペックのMac貸与 • モニター貸与
36. 勉強会一例 • エンジニア組織だけではなく、デザイナーなど他職種との開催も。 • 新卒社員同士で行っている勉強会もあり〼。 ⚫ プロジェクトの危機を察知するフレームワーク ⚫ QAガイドライン作ったので紹介と簡単な品質講座 ⚫ Chrome拡張機能作ってSlack便利にしてみた！ ⚫ なぜ「サウナイキタイ」は使いやすく美しいのか解剖してみた。 ⚫ パーソナルジムに通ってみた ⚫ ネガティブ・ケイパビリティ〜あなたの積年の悩みを、一瞬で解決させない〜
37. イベントのお知らせ アンケートにご回答いただくと優先予約可能！ 回答期限：10/19(木)12：00まで ▼日程：10/19(木) 17:00 - 18:30 ▼内容：パーソルキャリアのエンジニア部署内で行っている 勉強会を皆さま向けに開催します。 エン ジニ ア勉 強 会 （ 卒 業 年 度 不 問） エン ジニ アパネル デ ィ ス カ ッシ ョ ン （25卒限定） ▼日程：10/24(火) 16:00 - 17:00 ▼内容：就活の進め方やパーソルキャリアについて等 パネルディスカッション形式でお話しします。 ▼マイページを お持ちの方 ▼マイページを お持ちの方 ▼マイページを お持ちでない方 こちらのQRコード または、チャットへ お送りするリンク から予約下さい！
38. ご案内 • パーソルキャリアのエンジニア組織について 理解が深まる 『techtekt (テックテクト)』をご存じですか？ 過去開催したイベントの レポートが見れる！ ▼こちらからアクセス！ 新入社員が書いた 記事も見れる！ 技術についても 学べる！