jtk

WordPress + Nuxt.js でポートフォリオサイトを作る その3

WordPressサイト(http://works.yuheijotaki.com/)の REST API と Nuxt.js でポートフォリオサイトを作成する。その3

f:id:jotaki:20190924093802p:plain

GitHub: https://github.com/yuheijotaki/works-nuxt

作業フォルダを src/階層にまとめる

nuxt.config.js に

export default {
  ...
  srcDir: 'src/',
  ...

を追記して src/ フォルダ作成後、
assets/components/layouts/middleware/pages/plugins/static/store ディレクトリを src/ 以下に移動

参考: API: srcDir プロパティ - NuxtJS

.scss を使う

前回sass を使う と同じ方法でOK

.pug を使う

今回は .vue ファイルでテンプレートエンジンとして pug を使ってみようと思うので pug モジュールも追加する。
これもsass loaderと同じでかんたんですね

$ npm i -D pug pug-loader pug-plain-loader

components/Logo.vue

<template lang="pug">
  h1
    nuxt-link(to="/") index
</template>

でできた。

参考: nuxt.js(v2)でpug/stylusを利用する - Qiita

残りやること

  • データ登録・調整
  • 全体スタインリン
  • Netlify へホストする

WordPress + Nuxt.js でポートフォリオサイトを作る その2

WordPressサイト(http://works.yuheijotaki.com/)の REST API と Nuxt.js でポートフォリオサイトを作成する。その2

f:id:jotaki:20190924093802p:plain

GitHub: https://github.com/yuheijotaki/works-nuxt

クリックイベントと $emit / props

コンポーネント名を Filter.vue にしようと思ったのですが、予約語だったので Search.vue に修正
コードは下記ですが一部省略

components/Search.vue ではクリックしたカテゴリーを $emit する

<template>
  <div>
    <ul>
      <li><a @click="clickedCategoryEvent('All')">All</a></li>
      <li><a @click="clickedCategoryEvent('Front-end')">Front-end</a></li>
      <li><a @click="clickedCategoryEvent('WordPress')">WordPress</a></li>
      <li><a @click="clickedCategoryEvent('Web Design')">Web Design</a></li>
      <li><a @click="clickedCategoryEvent('Tumblr')">Tumblr</a></li>
    </ul>
  </div>
</template>

<script>
export default {
  methods: {
    clickedCategoryEvent(category) {
      this.$emit('clickedCategory',category);
    }
  }
}
</script>

一度 pages/index.vue で受け取り、 components/WorksList.vue へ props する

<template>
  <div>
    <Search @clickedCategory="selectedCategory" />
    <WorksList :filterCategory="propsCategory" />
  </div>
</template>

<script>
export default {
  ...
  data () {
    return {
      category: 'All'
    }
  },
  methods: {
    selectedCategory (category) {
      this.category = category
    }
  },
  computed: {
    propsCategory: function() {
      return this.category
    }
  }
}
</script>

components/WorksList.vue で受け取る

<script>
export default {
  ...
  props:{
    'filterCategory': {
      type: String,
      default: 'All'
    }
  },
  ...
}
</script>

クリックされたカテゴリーを絞り込み表示

components/WorksList.vue
mounted :function(){ にてAPIから投稿を引っ張ってきて
computed: {... にてpropsしてきたカテゴリーに属する投稿をフィルタリング

...
<script>
import axios from "axios";

export default {
  name: 'WorksList',
  components: {
    WorksItem
  },
  props:{
    'filterCategory': {
      type: String,
      default: 'All'
    }
  },
  data () {
    return {
      posts: []
    }
  },
  mounted :function(){
    axios.get( 'https://works.yuheijotaki.com/wp-json/wp/v2/posts?per_page=100' )
    .then( response => {
      this.posts = response.data
    })
    .catch( error => {
      console.log(error)
    })
  },
  computed: {
    filterWorks: function() {
      const posts = this.posts
      const filterCategory = this.filterCategory
      if ( filterCategory !== 'All' ) {
        return this.posts.filter( function( post ) {
          if ( post.category_name.indexOf(filterCategory) >= 0 ) {
            return post
          }
        })
      } else {
        // 初期表示 or `All` を選択した場合
        return this.posts
      }
    }
  }
}
</script>

<template> は computed で絞り込んだ投稿からループする。

<template>
  <ul>
    <WorksItem
      v-for="(post,index) in filterWorks"
      :item="post"
      :key="index"
    />
  </ul>
</template>

残りやること

  • 作業ファイルを src/ にまとめる
  • データ登録・調整やスタインリン
  • Netlify へホストする

WordPress + Nuxt.js でポートフォリオサイトを作る その1

WordPressサイト(http://works.yuheijotaki.com/)の REST API と Nuxt.js でポートフォリオサイトを作成する。その1

f:id:jotaki:20190924093802p:plain

GitHub: https://github.com/yuheijotaki/works-nuxt

サイト構成

下記のシンプルな構成で行う

  • トップページ (/)
    • Works一覧(クリックで詳細ページへ)
    • カテゴリーごとの絞り込み機能
  • Works詳細ページ (/work/_slug.vue)
    • サイト名などの情報、画面キャプチャ等

インストールと起動

# create-nuxt-app
$ npx create-nuxt-app [ProjectFolderName]
# 起動
$ cd [ProjectFolderName]
$ npm run dev

ページ/コンポーネント

root
|
└ pages/
|   └ index.vue
|   └ work/
|      └ _slug.vue
└ components/
    └ Logo.vue
    └ Filter.vue
    └ WorksList.vue
    └ WorksItem.vue
    └ WorksSingle.vue

スラッグベースのルーティング

前回もつまづきましたが、今回はWPの通常投稿をスラッグ形式でルーティングする。
エンドポイントは、 'https://hoge.com/wp-json/wp/v2/posts?slug=[SlugName] となり、これを async asyncData( { params } ) {... で取ってくる必要がある。

<template>
  <div>
    <WorksSingle
      :post="post"
    />
  </div>
</template>

<script>
import axios from 'axios'
import WorksSingle from '~/components/WorksSingle.vue'

export default {
  components: {
    WorksSingle
  },
  data () {
    return {
      post: {}
    }
  },
  async asyncData( { params } ) {
    const { data } = await axios.get('https://hoge.com/wp-json/wp/v2/posts?slug=' + params.slug)
    return {
      post: data[0]
    }
  }
}
</script>

参考:

次回はカテゴリーごとの絞り込み機能を実装する。

JAMstack と Headless CMS

Headless CMS について調べる用事があったのですが、関わりが深そうな JAMstack についても調べてみました。

f:id:jotaki:20200106110409j:plain

JAMstack とは?

JAMstackはテクノロジーではなく、JAMstackはWebサイトやアプリを構築する新しい方法です。クライアントサイドに基づいた最新のWeb開発アーキテクチャで、Webサーバーには依存しません。

引用元: クライアントサイドに基づいたWeb開発アーキテクチャ「JAMstack」がなぜ人気になっているのか | コリス

Netlify の創業者発の言葉で JavaScript / API / Markup の頭文字をとったものとのこと。
こういう名前のサービス名ではなく思想またはアーキテクチャのこと。

生成された静的HTMLのホスティングサービスとしては Netlify や Firebase を使うのが一般的のよう。

Headless CMS とは?

ヘッドレスの「ヘッド」は、ビュー(表示する画面)を指します。ヘッドレスなので、ビューの無いCMSということになります。


ではヘッドレスCMSの場合、ビューはどうするのか?
CMS外で、自作する必要があります。

引用元: ヘッドレスCMSとは何か?従来CMSとの違いやメリデメを解説!

管理画面(コンテンツ編集者側)とフロント表示(訪問者側)を切り離して、間にAPIを持たせるサイトにおける管理画面側が Headless CMS ということのようです。

管理画面側は WordPress 使ってフロントを REST API から受けても純粋な Headless CMS ではなさそうな感じですね。この場合は WordPress as a Headless CMS と定義したほうがわかりやすそう。

Headless CMS を使って作られたフロント表示は JavaScript / API / Markup が使われる(ことが大半)なので JAMstack アーキテクチャを採用したサイトと定義できるかと思います。

Headless CMS のメリット・デメリット

引用元: Headless CMS - Qiita

メリット

  • フロントエンド側の自由度が高まる
  • 配信対象の拡大
  • フロントとバックエンドの開発分離

デメリット

  • 開発が専門的になり、開発工数が増加する
  • APIの品質への要求が高い

いろいろ記事を読んでいたのですが、あまり小規模なWebサイトに向いていないという意見と、一部分にも適用できるから導入が楽、という見方が混在していました。
あとはデメリットとして開発コスト増につながりますが、下書きプレビューがしづらいという意見も多くありました。

主な Headless CMS サービス

Flamelink は Firebase で作られたCMSなのでちょっと毛色は違うと思いますが、海外では Contentful と Strapi のどっちがいいのみたいな話になっているようです。
参考: Contentful vs Strapi | 違いは何ですか?

microCMS は日本製で比較的新しいサービス。比較は下記記事などが詳しいです。

まとめ

2019年から熱気を帯びてきた感じのする JAMstack / Headless CMS というワードですが、概要などなんとなく掴めたので今度は実際になにか作ってみたいと思います。

個人的には管理画面や仕組み的にも WordPress に慣れているので Nuxt 使って構築してみたいと考えています。

その他 参考リンク

JAMstack

Headless CMS

【読書メモ】この1冊で合格! AWS認定ソリューションアーキテクト - アソシエイト テキスト&問題集

ソリューションアーキテクト アソシエイトの試験を受けるにあたり、勉強段階の終盤のほうで読みました。

概要・ポイント

  • 第1章 AWS概要
  • 第2章 コンピューティングとストレージ
  • 第3章 セキュリティとネットワーキング
  • 第4章 データベース
  • 第5章 管理とガバナンス
  • 第6章 アプリケーション統合
  • 第7章 分析サービス
  • 第8章 移行とコスト管理のサービス
  • 第9章 模擬試験(65問)

アクセンチュアの方々が書いているAWS本。
基本的な内容を一通りざっくり網羅していて、巻末に模擬試験が本番試験と同じボリュームでついてくる。
ザ・試験対策本な感じと思う。

各章やサービスにも練習問題がついてきますが、その章で扱っているサービスを選択するだけなので解説を読むだけになる。

良かった点

  • 情報が新しい。
  • 模擬試験が変に優しくない。
  • 図表がわかりやすい。

図表に関しては今までの本が分かりづらかったのか、これまでの総仕上げとしてこの本を読んでいるから入りやすいだけだったかもしれません。
模擬試験の難易度に関してはUdemyやオレンジ本よりも本番に近いレベル感に思いました。(ただ設問順が偏っているような気もする)

惜しかった点

  • 模擬試験の解答がオンラインPDF

これは本形式全般の欠点なのですが、本の設問/紙に書いた回答/PDFの解答を見比べるのがちょっと厄介でした。

まとめ

この1冊で合格、というのは「人による」という感じかなと思いました。
普段業務でAWSを使いこなしている人がSAA受けようと思って読む分にはボリュームもそんな多くないですがまとまってはいるので可能かもしれませんが、自分のようなほぼ未経験の人にとっては難しいように感じました。

ただギリギリで受かったのはこういう本1冊読んだからというのもあるので、未経験者にとっては多角的な視点を得れる、オレンジ本よりも図解が分かりやすく的を絞った内容で多角的に知識を得ることができる本でした。

2019年12月 振り返り

結果

ブログ

目標:月 12 回(週 3 回)更新
結果:月 16 回 更新

読書

目標:月 1 冊
結果:月 2 冊

反省点など

フロントエンドの技術的な所に関して何かしらの向上ができなかった。
ブログはまとめ系が多かったですがアウトプットできてよかった。

来月に向けて

1月の初めにSAA取得でき落ち着いたので、月次の目標設定を改めて設定して計画立てるところから始めたい。

AWSソリューションアーキテクト アソシエイト 受験記

f:id:jotaki:20200105065609p:plain

これまで・今回の結果

受験理由

  • 年末年始まとめて時間取れるので
  • AWSに関して業務で自分から扱いはしないものの見聞きすることが多くなってきたので
  • 3月くらいから方式が変わるようで、難しくなっても簡単になってもまた勉強し直すレベルの変更になる可能性がありその前に受けておきたかったので

モチベーション

  • 前回落ちてもやもやしていたので
  • 周りでプラクティショナー取った人が多くなったので

今回の勉強計画

前回、オレンジの認定本を3回ほど通しで読んで付属の模試も完コピくらいしてしまうくらいになったものの、それで理解していると勘違いしてしまった部分があるので今回は同様な事態は避けるようにした。

基礎力がない/応用が効かないと本番の試験では難しいなと感じたので基礎部分をもう少し固める。
また公式のドキュメント類(ホワイトペーパーやブラックベルト)やハンズオンも前回ほとんどやってこなかったのでそちらの読み込みもやるようにした。

あとは試験問題に慣れること。実際にやると問題文や回答長いのでそのときだけ集中できる気がしないので前日、前々日はUdemyの模試2回ずつやって当日は難しい問題が出て当たり前なことにする作戦を立てました。

やったこと

試験日決めて3、4週間前くらいから開始しました。
毎日の通勤時に本読んだり、土日まとめて何時間かやったり、あとは年末年始休暇中にがっつり1日中やりました。

1. 【読書】AWSクラウドの基本と仕組み

https://www.amazon.co.jp/dp/4798160563
基礎固め&半年やってなかったのでこれでリハビリ

2. 【読書】AWS認定資格試験テキスト AWS認定 ソリューションアーキテクト-アソシエイト

https://www.amazon.co.jp/dp/479739739X/
いやというほど読んだはずでしたが改めて。巻末模擬試験はスキップ

3. 【Udemy】これだけでOK! AWS 認定ソリューションアーキテクト – アソシエイト試験突破講座(初心者向け21時間完全コース)

https://www.udemy.com/course/aws-associate/learn/lecture/13377668
年末1,400円のときに購入。オレンジ本と同時並行で
ハンズオンはもちろん、動画(音声)で勉強できると違うなあと思いました。
最後の方は1.25倍速で

付属の模試を試験4,5日前にやりました。

  1. 64%正解 (42/65)
  2. 58%正解 (38/65)

4. 【Udemy】AWS 認定ソリューションアーキテクト アソシエイト模擬試験問題集(5回分325問)

https://www.udemy.com/course/aws-knan/learn/quiz/4632478
やるつもりなかったけど、試験形式と難易度に慣れる目的で
最後の3日間で一気にやりましたが、難しいとレビューにあったので結果は気にせず(正確には気にしたけどこれだと落ちて普通かなと開き直れた)

  1. 56%正解 (37/65)
  2. 52%正解 (34/65)
  3. 61%正解 (40/65)
  4. 76%正解 (50/65)
  5. 60%正解 (39/65)

5. 【読書】この1冊で合格! AWS認定ソリューションアーキテクト - アソシエイト テキスト&問題集

https://www.amazon.co.jp/dp/4046042036/
これもUdemyの後半と同時並行で
終盤だったので1回結構流し込みみたいな感じ
付属の模試は前日にやって64%正解 (42/65)

6. もろもろ復習 公式ドキュメント読む、BlackBelt見る

前回から引き続きセキュリティ分野が弱いということが分かってきたのでWell-Architectedフレームワークと質問集のセキュリティのところだけ読んだりした。
そのほか、

YouTubeアーカイブ

公式問題と模擬試験

これ最後にやっておいてよかったです。
変にUdemyやその他の非公式的な細かい所に慣れてしまっていたので、前回の模試をやりつつ改めて基礎(EBSのボリュームタイプなど)を振り返りました。

本試験結果

771点
ギリギリでしたね..
分野 5: オペレーショナルエクセレンスを備えたアーキテクチャを定義する が 再学習の必要あり となってしまいました。

かなり慎重に解いていって一通り終わったのが1時間20分くらい。
1問ずつ見返したのですが時間足らずで40問くらいしかできなかったけど、そこで変えた回答もあったのでそれでひっくり返ったのもあると思うので最後までやってよかったです。

覚えたほうが良さそうなこと

重要

  • VPC、NACL/セキュリティグループ
  • ストレージ(EBS/S3/EFS)の特性
  • EBS/S3/DBの各タイプと特性
  • 暗号化(特にS3)

まぁまぁ

  • Storage Gateway
  • Route53
  • SQS
  • Lambda

Udemyの模擬試験集でかなり慣れたつもりでいましたが、本試験は本試験で難しかったです。
パブリックにEC2とプライベートにDBの構成問う問題でも、パブリックにNATゲートウェイみたいな単純な回答はなさそう。
S3暗号化についても手順まで分かっていないと分からないものもあった記憶。

ただ前回とは違い分からないサービス名はほとんどなかったのと、4つの選択肢のうち2つまでは絞れる..みたいな知識向上は感じることができたのも勉強してよかったと思います。

試験の中で同じような問題はいくつか出て、それでも選択肢は毎回違うので、
その正解のサービスの特性を知っておくことはもちろんですが、消去法で消せる選択肢を増やすために広く知識を貯めておかないと難しいなと改めて感じました。

読んだ体験記

まとめ

毎回試験前は胃がきりきりするのですが、今回自費で受けたのでちょっと気楽に勉強できました。
前回は1つの教材を徹底的にやり込む形だったので、今回はなるべく教材は多めに色々な視点や言い回しでサービスだったり仕組みを覚えるようにしました。
自分が一番しっくりする説明が教材(本やUdemyや公式ドキュメント)によって違うので、すんなり入る教材を各サービスや仕組みごとに見つけれた気がします。

他の試験の予定は考え中ですが、せっかく勉強してやりこむ習慣がついたのでフロントエンド技術に対してしばらくは注ごうかなと思っています。