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