jtk

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

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

f:id:jotaki:20190924093802p:plain

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

前回から1ヶ月ほど空いてしまいましたが再開

@nuxtjs/style-resources を使う

変数用のファイルなどグローバルに読み込むscss用に @nuxtjs/style-resources を使う。

$ npm i -D @nuxtjs/style-resources

でインストール後、nuxt.config.js を下記のようにする

  modules: [
    '@nuxtjs/style-resources'
  ],
  // .scssファイルをグローバルに読み込む
  styleResources: {
    scss: [
      '@/assets/scss/foundation/_config.scss',
      '@/assets/scss/foundation/_mixin.scss'
    ]
  },

以前はscssファイル指定のところ、 ... '@/assets/ ... ではなく ... './assets/ ... みたいにしていましたが今回はいけなくちょっとハマりました。

ress.cssを使う

reset.css と normalize.css のいいとこ取りリセットcssress.css を使う。

$ npm i -D ress

でインストール後、nuxt.config.js の css:

  css: ['ress'],

としてあげるとグローバルに読み込みされる。

AWS SysOps アドミニストレーター アソシエイト 受験記

f:id:jotaki:20200105065609p:plain

これまで・今回の結果

受験理由・モチベーション

SAAとDVAとってSOAもという勢い(だけ)で。
ここで取っておかないで先にまた記憶掘り起こして勉強再開するのもしんどそうということ、そろそろAWSの勉強を一区切りしてフロントエンドの勉強に注力したいと思っていたため。

今回の勉強計画

公式サンプルと模試やって、今回もいけそうな雰囲気だったらバウチャーもあるので早めに1回受けてみようかと考えました。
内容としては

  • 公式のサンプル、模試をきちんと振り返る
  • Black Belt 弱いサービスは必ず見る
  • 模試も何個かはやってみる
  • ハンズオンはできればやるけど最優先・必須にはしない

SysOpsはSAAやDVAよりも内容は一番ふだんの業務から遠い所にある内容ではあるので、もちろん色々サービスや使い方を知りたいというのはあるけど、それよりも「資格取得」というところにフォーカスして最短で取れる道を取ろうと思いました。

やったこと

1. 試験ガイドや体験記読む

DVAの勉強期間のときからちょくちょく意識はしていたのでなんとなくは範囲は把握していました。
セキュリティが多いのが厄介(複雑なIAM設定やKMS、暗号化周りが苦手)なので、18%の出題範囲をどう捉えればいいかなと思いました。
いつものごとく体験記も読んでレベル感把握しておく。

怖かったのはDVAは不合格でした、って記事をあまり見かけない気がするのですが、SysOpsは1度不合格になって、、やレベル感としてDVAよりも難しいと書いている人がちょくちょくいたこと。
SAAとDVAとれたらSysOpsは大丈夫っていう人もいたり、SysOpsが一番アソシエイトレベルで難しいっていう人もいるので、そういう類の体験談は人によるな〜って感じで流すようにしました。

2.【公式】模擬試験

まずは力試しということで模擬試験を受ける。(2/10・月)
DVAと同じ70%でしたが分からないサービス名はあまりなかったので、このときは知識埋めていけばどうにかなるような気もしました。
ただ正解調べても分からなくてちょっと混乱

総合スコア: 70%

トピックレベルスコア:
1.0  Monitoring and Reporting: 80%
2.0  High Availability: 50%
3.0  Deployment and Provisioning: 50%
4.0  Storage and Data Management: 50%
5.0  Security and Compliance: 100%
6.0  Networking: 66%
7.0  Automation and Optimization: 50%

3.【公式】サンプル問題

同じ日(2/10・月)にサンプル問題をやってみる。
簡単とはいえ10問全問正解、8問くらいは選択肢見ないで答えられたのでここは調子に乗っていいのか迷った。

4.【Whizlabs】AWS Certified SysOps Administrator Associate | Practice Tests

Udemy がなかったので Whizlabs の模試を買いました。
AWS Certified SysOps Administrator Associate | Practice Tests | Whizlabs

クーポン使ってだいたい2,000円いかないくらいで模試5セットなどついてくるやつ。
英語なのでChrome拡張の翻訳プラグインでいけると書いてあってほんまかいなと思ってたけど90%くらいは問題なかった。(慣れもある)
※Snowball が雪玉と訳されたり、
時間の都合で全部はぜんぜん無理でした。

  • 2/12 ⑤ 61%正解 (40/65)
  • 2/13 ④ 58%正解 (38/65)

最近の(っぽいので)⑤から進めてみました。
フリーの15問のやつ全問正解だったのでレベル感大丈夫かなと思いましたが、65問のほうは難易度は高めで解説見て公式ドキュメント読んでをしました。

5.【読書】AWS認定アソシエイト3資格対策

VPCとか結構SAA範囲のものは抜けてたので通勤時はこちらでSOA範囲だけ読む。
こちらはDVAのときも書いたとおり範囲のサービス概要だけ役立つという感じです。

6.【公式】Black Belt よむ & みる

これもDVAのときに役立ったのでSOA範囲用に見直す。
YouTubeは慣れてきて1.5倍でもそれなりに入るようになりました。

YouTube

SlideShare

DVAの際もですがキャプチャのような感じでスプシで重要そうなことを書いておいて試験前に見るようにしたりしてました。

f:id:jotaki:20200215195534p:plain

本試験

DVAを2/9(日)に受けて、SysOpsもちょうど空きがなかったので2/14(金)に受ける。
今週は祝日もあったもののさすがにちょっとはやすぎかなとも思いましたが、どのみち先2週間はできそうなので受かったらラッキーくらいに捉えました。

1時間30分くらいかけて1周、じっくりやったので見直しせずに(する気力もなく)結果を見る。
結果、スコアは801点、すべて「十分な知識を要する」になっていたのでまんべんなく取れたようで一安心でした。

感触としては試験前びびりすぎていた部分もあり、結構これと分かる問題もそこそこあった印象。
Whizlabほどめちゃくちゃ突っ込んだ内容や設定値問う問題はあまりなく、ただパッと分かるものでもないものが半数以上(2つには絞れるけどどっちかなみたいな)
それでも受かったので、公式サンプル・模試やって、Whizlab2個やってBlackBeltで補完するというSAA、DVAで得た勉強法でよかったなと思います。

アソシエイトでどれが難しいか議論はみんな書いていますが、職種や得意分野、受験順や期間にも左右されるの前提で、個人的には難しい順で
SAA > SOA > DVA
でした。(スコア順でもありますが)

ただSAAはアソシエイトレベル最初の受験で難しく感じ、DVAの勉強期間長かったので楽に感じた、っていう程度なので正直レベル感は参考の参考くらいにしかならないと思います。

まとめ

これでアソシエイトレベルを3つ取れました。
昨年7月にSAAを最初に受けた際、めっちゃ難しいなと思っていた内容でも今は理解できるようになり、コツコツ(ときには一気に)やると分かるようになるもんだなという感想です。昨年の今頃はS3とEC2くらいしか分からなかったのでそういう点は感慨深いです。

AWS試験は次のレベルでいうとプロフェッショナルですが、いずれ1、2年後には受けるかもしれないですが一旦は勉強終了する予定。
ただ、AWSのイベントやDevelopers.IOなど、そういうものはせっかく得た興味範囲なので追っていこうと思います。

一段落ついて改めて思うのは、フロントエンドエンジニアと名乗ってますが、ITやインフラやネットワークやセキュリティ、Webそのものに対しての基礎や仕組みの知識が不足しているなあということでした。
試験の勉強で得られるのはAWSの知識ももちろんありますが、仮想化だとか、DRだとか、マイクロサービスだとか、CI/CDだとか、基礎的なところ〜現在の潮流に合わせてAWSのサービスが出たり機能が追加されることが多いと思うので、勉強することで分かったことと分からないと実感したことが大きな学びだと思います。

やればそれなりに覚える(っていう精神論的な..)ことも染み込んだのは大きいと思うのでこの調子で他の勉強もがんばりたいと思います。

AWSデベロッパー アソシエイト 受験記

f:id:jotaki:20200105065609p:plain

これまで・今回の結果

受験理由・モチベーション

SAA取れたら受かるみたいな記事もあり、今のうちやっておかないともったいない精神で。

今回の勉強計画

  • 前回のSAAと同様に模擬試験をやっていって実戦で力をつける
  • ハンズオンも不安なサービスは触るようにする => と思ったけどあんまやらなかった。
  • 最後はなんだかんだ公式サンプル問題と公式模擬試験を復習して抜けがないようにする。
  • 本試験受け急がない。きちんと受かりそうだなと自信がついたら受ける => と思ったけど2,3週間前に日程決めちゃった

去年の2019/07・SAA(不合格)と同じ感じのモチベーションだったので、今回は自分なりにきっちりやり込んで受けようと思いました。

1/4 にSAA受かって少し休んで 1/10 くらいから勉強をはじめました。
だいたい前回と同じで平日2,3時間、週末は1日やったりのペースです。

やったこと

1. 試験ガイドや体験記読む

当時は受けるかどうか迷いながら情報収集。
サンプル問題は英語だったのでぼんやりながめた。
とりあえずUdemyの模擬試験安かったので買っておいて、後戻りできないようにセットしました。

読んだ体験記はこちら。

2.【読書】AWS認定アソシエイト3資格対策

これまでの資格取得と同様に書籍から
DVA対策専用ではないですが、これまで読んだSAAの2冊よりは対策になるかなと思ったので。
実際にはオレンジ本のほうが詳しくかいてあるサービスもあったので、概要掴む&これまでの復習という意味では良かったかなーと思います。
あとCognitoやX-Rayなど新し目のもの載ってなかったりするので、それは公式みたりもしました。
通勤とか隙間でやってDeveloper範囲のものは2周やる。

3.【公式】模擬試験

本1周目の途中くらいでわりと早い段階で受けました。(1/17)
結果は70%だったのですが、確実に正解と分かるの2割もなかったかなくらい難しくでビビり始めました。
キャプチャ取ったので覚えるキーワード洗い出しながら復習
本試験前日にも復習する。

総合スコア: 70%
トピックレベルスコア:
1.0  Deployment: 50%
2.0  Security: 50%
3.0  Development with AWS Services: 85%
4.0  Refactoring: 100%
5.0  Monitor and Troubleshooting: 50%

4.【公式】サンプル問題

英語だったので AWS Developer Associate サンプル問題の日本語訳 - Qiita の解答/解説を参照して。7/10 でしたが当てずっぽうなのも多く、ここでも難しくてへこみました。
本試験前日に復習する。

5.【公式】Black Belt よむ & みる

Black Belt オンラインセミナー(YouTube)があるものは動画で、ないものはSlideShareを読みました。
特にSQS/API Gatewayなんかは本には試験に出そうな表面的なことは書いているのですが、動画だと深堀りしてそもそもその技術やサービスがなぜ必要とされているかなどから話してくれるのでよかったと思います。
2017年くらいの資料になるとちょっと古い内容もあるのでそこは注意が必要かなと。

YouTube

SlideShare

6.【Udemy】模擬試験セット

SAAと同様に複数問題集を解くために Udemy をやりました。
AWS 認定デベロッパー アソシエイト模擬試験問題集(3回分195問)

  • 1/25 模擬試験① 41%正解 (27/65)
  • 2/1 模擬試験② 44%正解 (29/65)
  • 2/2 模擬試験③ 47%正解 (31/65)
  • 2/5 模擬試験①(再)67%正解 (44/65)
  • 2/7 模擬試験②(再)64%正解 (42/65)
  • 2/8 模擬試験③(再)72%正解 (47/65)

またむずいんだろうなと思ってたのですが実際にやってみると..めっちゃむずくてへこみました。へこんでばっかです。
正直①やったとき諦めたほうがよいかな(´・ω・`)とも思いました。
Beanstalk めっちゃ出るなと思った記憶。。
それぞれ2回やりましたが2回目は正解覚えちゃっているのもあるので油断しないようにしました。

7.ハンズオン

触っておきたかったサービスだけやってみましたが、本当はもっとやったほうがよいのかなーと思います。

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

サーバレス中心にデベロッパー中心出題範囲だけやっている感じになってしまっていたので、EC2やRDSなどの基礎的なところを中心に最後の1週間の通勤時間に1周する。
SAA受ける際の最初に読んでいた本ですが、内容が入ってくる感じがしたので当時は知識量が足りてなかったんだなあと感じました。
細かいところまで読んでいるとデベロッパーの範囲と思われる初期値や設定値のことまで書いてあったのでなかなかよくできている本というのを再発見。

本試験

今日いつもどおり10時からやってきました。
じっくり1時間20分で1週目完了、10分見直して変に入れ替えしまいそうな気になって30分残しで終了しました。

終了ボタン押す前の感覚

  • 20% => 正解
  • 30% => たぶん正解
  • 45% => どっちか分からない
  • 05% => 不正解

結果は845点で合格。
(スコアレポート当日でも出るみたい)

Udemy模試やってたので問題自体はすんなり入ってくる(そんなに難しく感じない)けど選択肢はどれだろっていうのが結構ありました。
前日、当日に公式サンプルと模試をやったのが今回も良かった気がします。

想定していたレベル感と出題範囲だったといえばそうですが、SAAのときより分からない問題多かった印象だったので落ちるかもと試験中は思いました。

まとめ

巷(多くのQiitaやブログなど)で言われている、SAA取れたらDVAも簡単、は普段AWS触っているエンジニア目線の話であって、実務未経験かつ資格取得ベースでAWSを勉強している人にとってはかなりハードルが高かった印象。
それでもプラクティショナーやSAA勉強し始めたときに感じるインフラ(IT)用語/サービスの種類や特長を無限に覚えないといけない(という錯覚による)絶望感に比べると、今回はそれを覚えた上でどこまで細かいことを覚えられるか、なので時間を掛ければどうにかなる気もしてました。

API Gateway や Codeシリーズ は自身もわりと絡むサービス領域(フロントエンド)ではあるので、比較的きちんと身につけようと思うことができました。
Amplify、Lightsail などちょっとプライベートで触ってみたいサービスかなと感じそういうサービスを知ることができてそういう面でもよかったす。

アソシエイトレベル残りSysOps、どうしようかなあと思いますが3月入ると忙しそうだし、どうせいずれは受けたくなるのでこのまま継続してがんばります。

Nunjucks を使ってみる

f:id:jotaki:20200203155303p:plain

JavaScript製のHTMLテンプレート Nunjucks を初めて使ったのでメモ書きしておきます。
スクランナーはGulp使ってます。

各ページ共通のhtmlの骨格をつくる

head.njk, header.njk, footer.njk の3つのファイルはまた別ファイルになりますが、各ページ共通の骨格を作るには default.njk と index.html に次のように書く。

index.html

{% extends '_module/layout/default.njk' %}
{% block content %}
  <!-- ここに書く内容が `<main class="main">` と `</main>` の間に挿入される -->
{% endblock %}

_module/layout/default.njk

<!DOCTYPE html>
<html lang="ja-jp">
  {% include "_module/common/head.njk" %}
<body>
  {% include "_module/common/header.njk" %}
  <main class="main">
    {% block content %}{% endblock %}
  </main>
  {% include "_module/common/footer.njk" %}
</body>
</html>

変数で値を渡す

set hoge = で変数を宣言する。
ページタイトルやmeta系の記述などで使う場合

index.html (各ページ設定)

{%
  set page = {
    name: 'トップページ'
  }
%}
{% include "_module/common/head.njk" %}

_module/common/head.njk

{%
  set site = {
    name: 'サイトタイトル'
  }
%}
<head>
  <title>{{ page.name }} | {{ site.name }}</title>
</head>

マクロと引数を使う

マクロと引数を使うと値を渡してHTMLを生成できる

index.html

  {%- import '_module/component/button.njk' as macro -%}
  {{ macro.button( type='primary', label='ボタンのラベル名', href='https://www.yahoo.co.jp/', blank=true, class='hoge' ) }}

呼び出し側(button.njk)にはデフォルトの引数(引数が空だった場合に入る値)をいれておく

_module/component/button.njk

{% macro button( type='primary', label='ボタン', href='#', blank=false, class='' ) -%}
<p class="button button--{{ type | safe }}{{ ' ' + class if class }}">
  <a class="button__anchor" href="{{ href }}"{{ ' target="_blank"' | safe if blank }}>{{ label }}</a>
</p>
{%- endmacro %}

if を使って分岐や | safe を使ってフィルターがある。
フィルターはいろいろ用意されているので下記を参照
参考: https://mozilla.github.io/nunjucks/templating.html

ループを使う

パンくずを作ってみる

おもに 詳解 Nunjucks − Mozilla 謹製テンプレートエンジン - Qiita のコピペですが、パンくずも下記のように作成できます。

index.html

{%
  set breadcrumbs = [
    {
      item: '親ページ名',
      href: '/parent/'
    },
    {
      item: '子ページ名'
    }
  ]
%}
{% include '_module/component/breadcrumb.njk' %}

_module/component/breadcrumb.njk

<div class="breadcrumb">
  <ol class="breadcrumb__list">
    <li class="breadcrumb__item">
      <a class="breadcrumb__anchor" href="/">
        <span class="breadcrumb__label">トップページ</span>
      </a>
    </li>
    {%- for breadcrumb in breadcrumbs %}
    <li class="breadcrumb__item">
      {%- if loop.last %}
      <span class="breadcrumb__label">{{ breadcrumb.item }}</span>
      {%- else %}
      <a class="breadcrumb__anchor" href="{{ breadcrumb.href }}">
        <span class="breadcrumb__label">{{ breadcrumb.item }}</span>
      </a>
      {%- endif %}
    </li>
    {%- endfor %}
  </ol>
</div>

いまのところ正直EJSとの違いを実感できていませんが(Nunjucksのほうが強力らしい)慣れれば使えそうなので引き続き使っていきたいとおもいます。

【読書メモ】AWS認定アソシエイト3資格対策

AWSデベロッパーアソシエイト試験を受けるにあたり、専門ではないですがアソシエイトレベルの出題サービスが網羅されているこの本を読みました。

概要・ポイント

  • 第1章 AWS認定試験の概要と特徴
  • 第2章 データセンター
  • 第3章 コンピューティング
  • 第4章 ネットワーキング
  • 第5章 高可用性
  • 第6章 ストレージ
  • 第7章 データベース
  • 第8章 アナリティクス
  • 第9章 セキュリティ
  • 第10章 AWSサービスを活用した開発
  • 第11章 アプリケーションサービス
  • 第12章 サーバーレス
  • 第13章 モニタリングと運用自動化
  • 第14章 コスト最適化
  • 第15章 デプロイメントとプロビジョニング

ソリューションアーキテクトアソシエイト専門の対策本は何冊か出ていますが、デベロッパー、SysOpsも含めたアソシエイトレベルに出るレベルを網羅した試験対策本。
サービス各章のはじめにどの試験で出やすいかの色分けがされており、1度目は通しで読んで2度目はデベロッパーの出題範囲(7章データベース以降)をだけ復習する使い方をしました。

まだ本試験を受けているのでなんとも言えませんが、公式のサンプル問題、模擬試験、Udemyのサンプル試験集を受けていて感じるレベル感(説明具合)に比べるとかなり大雑把にサービスの概要を紹介している本かなと思います。
本のなかでも詳しくはAWSのこのページ参照といった内容や、この部分はハンズオンして覚えておくことが重要といった説明がされているので、あくまでも取っ掛かりを掴むための本という印象でした。

良かった点

  • DVA試験範囲のサービスがだいたい網羅できる(たぶん)

惜しかった点

  • 図の分かりやすさがイマイチ
  • 新し目のサービスは掲載されていない(CognitoやAppSyncなど)

まとめ

心の持ちようなのですが、各レベルで自分は一回なにかしらの本読んどかないと不安になってしまうのでまたいつかSysOps受けるときに再度見直すかなと思います。
デベロッパー今の所めちゃむずですががんばります。

2020年1月 振り返り

結果

ブログ

目標:月 8 回(週2回)更新
結果:月 10 回 更新

読書

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

反省点など

業務で使っていることをTipsレベルでいいので記事にしておきたい。

来月に向けて

DVAの勉強しているので受かってSysOpsも受けたい。
ブログは年100記事目処にしたいと思います。

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

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

f:id:jotaki:20190924093802p:plain

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

Pug と Nuxt.js(Vue.js)

はじめてpug使ってみたのでちょっととまどったところ
属性名と属性値はぜんぶ () の中に突っ込めばOKという感じですね

<NuxtLink>

html

<p><NuxtLink :to="`/work/${item.slug}/`">detail</NuxtLink></p>

pug

p
  nuxt-link(:to="`/work/${item.slug}/`") detail

<childComponent>

html

<ul>
  <ChildComponent
    v-for="(post,index) in posts"
    :item="post"
    :key="index"
  >
</ul>

pug

ul
  ChildComponent(
    v-for="(post,index) in posts"
    :item="post"
    :key="index"
    )
  )

:src (v-bind:src)

html

<img :src="image.url" alt="title">
img(
  :src="image.url"
  :alt="title"
)

@click (v-on:click)

html

<li>
  <a
    @click="clickedEvent('hoge')"
  >Hoge</a>
</li>

pug

li
  a(
    @click="clickedEvent('hoge')"
  ) Hoge