MENU
未経験からWeb制作を仕事に。
  1. ホーム
  2. Web制作
  3. 学習記録
  4. 【学習記録】microCMS×Vue.jsの環境をつくろう

【学習記録】microCMS×Vue.jsの環境をつくろう

Web制作 学習記録

Macの環境でmicroCMS×Vueの環境でポートフォリオを作る手順です。

いろんな会社の応募要件や昨今の技術の革新っぷりに、「WordPressだけじゃまずいかなぁ。そもそもCMS自体よくわからないし。」

という観点から勉強も兼ねて環境構築から行いました。

忘備録として作成しています。動作環境はMacです。

目次

microCMSのベースを作成

microCMSのサービスに登録します。https://microcms.io/

microCMS｜トップページ

個人開発レベルなら無料プランで良いと思います。

STEP
無料で始める

アカウントの作成、メールの登録をします。

STEP
APIの新規作成

目的に応じた内容で作ります。

今回の場合は、ポートフォリオを作りたいため、以下のAPIを用意します。

  • 実績紹介
  • 自己紹介

それぞれ、実績紹介はリスト形式、自己紹介はオブジェクト形式で作成します。

STEP
APIの項目を決める

実績紹介(リスト形式)

自己紹介(オブジェクト形式)

なんやかんやで項目を作ります。

microCMSの操作は一度ここまでです。

Vueの開発環境を作る

ターミナルを開きます。

⌘+Spaceを押してターミナルと入力

デスクトップに移動

cd ~/Desktop

続けて以下をターミナルにコピペ

名前は用途によって変更

npm create vue@latest portfolio-site

Need to install the following packages:
create-vue@3.18.3
Ok to proceed? (y)

とでるので「ｙ」を入力

npx
“create-vue” portfolio-site

┌ Vue.js – The Progressive JavaScript Framework
│
◆ Select features to include in your project: (↑/↓ to navigate, space to
select, a to toggle all, enter to confirm)
│ ◻ TypeScript
│ ◻ JSX Support
│ ◻ Router (SPA development)
│ ◻ Pinia (state management)
│ ◻ Vitest (unit testing)
│ ◻ End-to-End Testing
│ ◻ ESLint (error prevention)
│ ◻ Prettier (code formatting)
└

次は↓でRouterにカーソルを合わせてスペースキー

他はあとで追加できるので、一旦オフのままで進めます。

┌ Vue.js – The Progressive JavaScript Framework
│
◇ Select features to include in your project: (↑/↓ to navigate, space to
select, a to toggle all, enter to confirm)
│ Router (SPA development)
│
◆ Select experimental features to include in your project: (↑/↓ to navigate,
space to select, a to toggle all, enter to confirm)
│ ◻ Oxlint
│ ◻ rolldown-vite (experimental)
└

次は何も選ばずエンターを押します。

┌ Vue.js – The Progressive JavaScript Framework
│
◇ Select features to include in your project: (↑/↓ to navigate, space to
select, a to toggle all, enter to confirm)
│ Router (SPA development)
│
◇ Select experimental features to include in your project: (↑/↓ to navigate,
space to select, a to toggle all, enter to confirm)
│ none
│
◆ Skip all example code and start with a blank Vue project?
│ ○ Yes / ● No
└

こちらはNoを押します。

Noにするとサンプルコード付きでプロジェクトが作られるので、最初にVueの動きを確認しやすいです。

次は

cd portfolio-site

作成したフォルダに移行

npm install

をします。

added 171 packages, and audited 172 packages in 12s
31 packages are looking for funding
  run `npm fund` for details
found 0 vulnerabilities

インストールが終わったら以下を入力

npm run dev

ローカル環境で開発サーバーが起動したので、出たURLを開きましょう。

  VITE v7.2.7  ready in 436 ms
  ➜  Local:   http://localhost:5173/
➜  Network: use –host to expose
➜  Vue DevTools: Open http://localhost:5173/__devtools__/ as a separate window
➜  Vue DevTools: Press Option(⌥)+Shift(⇧)+D in App to toggle the Vue DevTools
➜  press h + enter to show help

やったね！

microCMSと連携する

ターミナルを開きます

開発サーバーを一度止めたいので、コントロール+Cを押します。

Vueプロジェクト(フォルダ)のまま、以下を実行

npm install microcms-js-sdk

added 50 packages, and audited 175 packages in 704ms
31 packages are looking for funding
  run `npm fund` for details
found 0 vulnerabilities

インストールが完了したら、VScodeで作成したファイルを開きます。

今回の場合はportfolio-siteフォルダですね。

以下の手順を行います。

  1. VSCode を開く
  2. portfolio-site フォルダを VSCode で開く
  3. src フォルダの中に lib というフォルダを作る
  4. lib の中に microcms.js というファイルを作る

microcms.jsファイルに以下をコピペ

import { createClient } from 'microcms-js-sdk';

export const client = createClient({
  serviceDomain: 'あなたのサービスドメイン',
  apiKey: 'あなたのAPIキー',
});

サービスドメイン：ログインページURLの前半部分

apikey：作成したAPIの右上「APIプレビュー」の中

開発サーバーを起動し直します。

npm run dev

src/views/HomeView.vueを開きます。

worksを取ってくるコードを挿入していきます。

<script setup>の中に、以下を追加。

import { client } from '../lib/microcms.js';
import { ref, onMounted } from 'vue';

const works = ref([]);

onMounted(async () => {
  const data = await client.get({ endpoint: 'works' });
  works.value = data.contents;
});

次に、<template>の中に以下を追加

<pre>{{ works }}</pre>

Home画面がスッキリした…？と思ったかもしれませんが、⌘＋Shift＋Rでスーパーリロードしてください。

配列が出るはずです。

配列がでてもらっても困るので、各項目を一つずつ取り出していきます。

テキストの呼び出し

<template>
  <main>
    <TheWelcome />
    <div v-for="item in works" :key="item.id">
      {{ item.work_title }}
    </div>
  </main>
</template>

これにて、microCMSで設定した(フィールドID)work_titleを呼び出します。

本当にただテキスト呼び出すだけです。

これでテキストを呼び出せたら、h2やpなどでセマンティックにしていきます。

<template>
  <main>
    <TheWelcome />
    <div v-for="item in works" :key="item.id">
      <h2>{{ item.work_title }}</h2>
      <p>{{ item.work_description }}</p>
    </div>
  </main>
</template>

divの中だけ(スコープ)がworksの呼び出し範囲となります。

リンクの設定

コンソールにて、Routerの設定を読み込んでいるのでページ推移を設定します。

<h2>
  <RouterLink :to="`/works/${item.work_slug}`">
    {{ item.work_title }}
  </RouterLink>
</h2>

タイトルがリンクになりましたが、推移先を作成していないので表示は変わらないと思います。

詳細ページを作成していきます。

src/router/index.js

routers: […]という配列を探す

index.js内のroutes配列の中に以下を足す

    {
      path: '/works/:slug',
      name: 'work-detail',
      component: () => import('../views/WorkDetailView.vue'),
    },

viewsフォルダの中に、WorkDetailView.vueファイルを作成。

WorkDetailView.vueに以下を書き込みます。

<script setup>
import { client } from '../lib/microcms.js';
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();
const work = ref(null);

onMounted(async () => {
  const slug = route.params.slug;
  const data = await client.get({
    endpoint: 'works',
    queries: { filters: `work_slug[equals]${slug}` }
  });
  work.value = data.contents[0];
});
</script>

<template>
  <main>
    <pre>{{ work }}</pre>
  </main>
</template>

jsonの中身が見れたら成功です。

リンク先のページを整える

<template>の中身を整えていきます。

<template>
  <main>
    <div v-if="work">
      <h1>{{ work?.work_title }}</h1>
    </div>
  </main>
</template>

詳細ページにh1でタイトルが表示されるようにしています。

以下、色々追加していきます。

サムネイルを表示

<div
      style="width: 100%; aspect-ratio: 16/ 9; overflow: hidden; border-radius: 10px"
    >
      <img
        :src="work.work_thumbnail?.url"
        :alt="work.work_title"
        style="width: 100%; height: auto"
      />
    </div>

ディスクリプションを表示

<p>{{ work.work_description }}</p>

本文を表示

<div v-html="work.work_body"></div>

一覧ページの見た目を整える

HomeView.vueに戻り、実績を一覧表示するようにします。

 <div v-for="item in works" :key="item.id">
      <h2>
        <RouterLink :to="`/works/${item.work_slug}`">
        {{ item.work_title }}
      </RouterLink>
      </h2>
      <p>{{ item.work_description }}</p>
    </div>

「とりあえずdivで囲んでいたタイトルとディスクリプション」を、カード用に囲い直します。

<section class="work-list">
      <article v-for="item in works" :key="item.id" class="work-card">
        <div class="work-thumbnail">
          <img :src="item.work_thumbnail.url" :alt="item.work_title" />
        </div>
        <h2>
          <RouterLink :to="`/works/${item.work_slug}`">
            {{ item.work_title }}
          </RouterLink>
        </h2>
        <p>{{ item.work_description }}</p>
      </article>
    </section>

sectionでカード全体を束ねるコンテナ

articleでカードを作成。繰り返しのためにv-forを使います。

<template>の下に、<style scope>を設置、その中にcssを入れていきます。


<style scoped>
.work-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 40px;
}
.work-card {
  background-color: #fff;
  padding: 16px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.work-card h2 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 12px;
}

.work-thumbnail {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  margin-bottom: 16px;
}

.work-thumbnail img {
  width: 100%;
  height: auto;
  object-fit: cover;
}
</style>

ここまでの学習記録です

https://github.com/bac7220/portfolio-site

次は「AWSを使ってサイトをアップロードしよう」です。

Web制作 学習記録

この記事を書いた人

ばくのアバター ばく

未経験、異業種からWeb制作の副業を経てフリーランスに。
学習ノウハウ、役に立った情報を初心者に寄り添った目線で発信します。

関連記事

コメント

コメントする

目次