jtk

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や公式ドキュメント)によって違うので、すんなり入る教材を各サービスや仕組みごとに見つけれた気がします。

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

2020年やりたいこと

サービス/ツール/キーワード いろいろありますが追っておいてマスターしておきたいものたち

フロントエンド

  • 表示速度・パフォーマンス

HTML/CSS

JavaScript

  • Vanilla JS
    • Vue.js
      • Nuxt.js

WordPress

  • ブロックエディタ
  • Headless CMS

バックエンド/サーバー

  • Firebase
  • Netlify
  • AWS
  • Docker

Webサイト高速化/最適化のためにやったこと

概要

最近作っていたWebサイト( https://atelier24b.com/ )で、Chorme の Audits 使ってパフォーマンス計測しながらやってみたのでその結果

サイトの作り的には

みたいなわりとミニマムな5テンプレートくらい(ページ数20くらい)のレスポンシブのWebサイトです。

設定

Audits の設定はデフォルトです f:id:jotaki:20191220091736p:plain

結果

ページ名 Performance Accessibility Best Practices SEO URL
トップ 89 100 100 100 URL
一覧 96 93 100 96 URL
詳細 93 93 100 90 URL
ページ 97 93 100 90 URL

トップ

f:id:jotaki:20191220091723p:plain f:id:jotaki:20191220091712p:plain f:id:jotaki:20191220091702p:plain f:id:jotaki:20191220091707p:plain f:id:jotaki:20191220091718p:plain

一覧

f:id:jotaki:20191220091658p:plain

詳細

f:id:jotaki:20191220091742p:plain

ページ

f:id:jotaki:20191220091729p:plain

やったこと

WordPressプラグイン

最適化まわりでいれたプラグイン

Autoptimize

ファイル(html/css/js)のminifyをいい感じにしてくれるプラグイン
テンプレート側の記述は一切気を使わなくてよく、生成されるhtmlに対してoptimizeをかけるので手軽に導入可能です。
設定も豊富でcssインライン化などベストプラクティに沿ったオプションも用意されています。
ただデバッグはしづらいので管理画面ログイン中のユーザーは最適化しないほうがいいかもです。

Compress JPEG & PNG images

画像圧縮のプラグイン
実際にはこれで圧縮してもPerformanceの項目では圧縮してねと怒られるのですが..

All In One SEO Pack

SEO最適化ですが、だいたいこれ入れて適切に設定できてればSEOは上がる気がします。
カスタム投稿のアーカイブなどうまく出力してくれないテンプレートやページもあるので、1ページずつ出力内容確認しながらフック使って調整していく必要がある場合も

gzipの有効化

Performance の項目で gzip にするといいよってことだったので .htaccess に下記を追加でファイルをgzipで配信
※ さくらサーバー + WordPressの場合
参考: さくらインターネットのレンタルサーバーで通信の圧縮(mod_deflate)を利用する方法 | スキコミ

詳しくみる

# gzip有効
<IfModule mod_deflate.c>
  SetOutputFilter DEFLATE
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch \bMSIE\s(7|8) !no-gzip !gzip-only-text/html

  Header append Vary Accept-Encoding env=!dont-vary

  # 画像は再圧縮しない
  SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary

  # 圧縮設定
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/xml
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/js
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/atom_xml
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/x-httpd-php
</IfModule>

その他

もやりましたが普段からやってはいるのでやっぱりコンテンツ(構成)がミニマムっていうのが大きい気がします。
jQueryとIsotopeやPhotoSwipeみたいなJSライブラリも使っていますし、なんか考えると特別なことはしていないという印象です。

SEOがスコア90くらいなのは、meta関係の設定などではなく色のコントラストをもっとつけましょうみたいな見た目的な話なのでそこは少し許容(妥協やトレードオフ)しています。

感想

Page Speed Insightsは割と結果判定がゆるい?気がしますが、GTmetrix だとPageSpeed ScoreはF判定だったりします。
Auditsの点数だけがすべてではないですね。

あとはいろいろな設定とか環境とか加味したり、もっとキャッシュ設定や実際の表示速度/ネットワーク周りも突き詰めてやらないといけないのかなと感じました。

2019年 / 2020年

ちょっと早いですが今年の振り返りと来年へ向けてのことを考えました。

2019年

インプット

技術の知識に関しては普段の業務や読書、RSS経由でWebメディアを見ながらという感じ。
基本はフロントエンド(HTML/CSS/JavaScript/Vue.js)、デザイン(UI/UX/Webギャラリー系)をみつつ、各社の技術ブログやメディアサイト見たり、あとクラウドの会社入ってAWSの資格も取ったのでその界隈の大きな動き(大きなアップデートや障害などのニュース)は追っておこうかなという感じでした。
これまでが雑多に色々なことを取り込んだので、今年からはもう少しフォーカスしてフロントエンド中心にインプット(アウトプットもですが)を思った結果、ある程度はこれまでのインプット分のロスには追いつきつつあるのかなという気がしています。

アウトプット

これは仕事での業務と勉強時間が中心です。
業務では主に案件で手を動かして、個人勉強は手を動かしつつこのブログに書いていってって感じです。
ブログ書く量はそれほど不足は感じませんが、身につき具合がもう少し欲しかったのが正直なところです。
ブログ書いて満足、本も読んで満足みたいなところがあるので改めなきゃなと思います。

2019年まとめ

去年ブログを始める11月くらいに、これから何を学びたいか、流行ってたりやりたい技術を何十個か書き出していたのですが、思っていたよりそれらを触ったり調べたりする機会が多くて、充実していたように思います。
朝型になって朝に勉強にしようとか、読書も月1冊も最低は読もうと思って続くかなとも思ったけどそれも続いているので、そういう面でも見せかけはいい感じでした。

ただ何が身についたかとか技術的に成長できたかというと具体的にこれっていうのはなくて、これまでのロスを挽回できるようなラインにやっと立てた気持ちです。
来年どうやり込むかが大事になってくると思っていますがそのことは下記に書きます。


2020年

やりたいこと

身につけること

そのために

  • ブログを続ける
    • Qiitaで記事を書く
  • 勉強会やイベントに行く

ブログ1年書いてみて(メモしてて)思ったのですが、書くこと目的ではなくて、誰に見てほしいってものでもないので新しく知ったことを覚えるという習慣づけ的な作用があるものと考えるようにしました。
そのためにブログ書いて、刺激受けたり周りの環境を知るために勉強会にも行こうかなと思います。

その他

仕事面で言うと今年ある程度人数の多い会社に入って客観的に自分の能力の長所をみたとき

  • グラフィックデザイン〜Webデザイン〜開発 までカバーできる(広く浅く)
  • 小さい会社での経験がある
  • これまでのWebサイト制作のスピードと量

くらいはあるかなと(それ以外はない)思ったのでそこを意識して生かしていきたいなと思います。

あとは興味範囲的に

みたいな各クラスタのことを全ての範囲をレベル高めに知っておきたいので、そこもなにかにとらわれず興味を持っていけたらと

まとめ

まとまりがなくなりましたが
技術的にはJavaScriptをマスターする、にフォーカスして、
興味がある4つの範囲に関しては各クラスタの人と話せるレベルに知識を蓄えておく、
ということに決まりました。
変わるかもしれませんが。

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

ソリューションアーキテクトの試験を7月に不合格になってからAWS関連の勉強してこなかったのですが、もう一度受けてもいいかなと思いつつ、よさそうな本がでていたのでリハビリも兼ねて読んでみました。

AWSクラウドの基本と仕組み

AWSクラウドの基本と仕組み

クラウドの概要〜AWSができた経緯や特徴、各サービスの説明までまとまっている自分にとってはとても良い内容でした。

概要・ポイント

  • 第1章 クラウドコンピューティングの特徴とメリット
  • 第2章 ITシステムの使用例とAWSの主要サービス
  • 第3章 AWS導入のメリットその1(ネットワーク&コンピューティング)
  • 第4章 AWS導入のメリットその2(ストレージ)
  • 第5章 AWS導入のメリットその3(データベース)
  • 第6章 AWS導入のメリットその4(セキュリティ)
  • 第7章 新しいテクノロジーへの取り組みとクラウドネイティブ開発

タイトルにある通り「基本と仕組み」なので、サービスの細かい難しい説明はあまりないです。

最初に概要、第3章から各サービスについて(VPC/EC2/S3/EBS/EFS/RDS...)と続いて最後は最近のサービス紹介(機械学習とIoT)とざっくりですが流れていきます。

細かい説明はあまりない、とはいいつつも取り上げられるサービスに関しては3〜5ページ以上くらいずつはあるので、例えばS3のストレージクラスやEBSのボリュームクラスについてやオプションの話もあります。

レベル的には本書を読んでいる人はプラクティショナーから受けてみましょうとは書いてあります。
出てくるサービスは幅広いのですべてのプラクティショナー受ける人はサービスは覚える必要はないかなという感じです。
逆にほぼSAAで出てくるサービスではあるので、SAA受ける人は理解したほうがよさそうと思います。

良かった点

  • AWSエバンジェリストの方とトレーナーの方が書いている本なので、AWSそのものや各サービスについての説明が分かりやすい
  • 図が分かりやすい(VPC構成や、EBS最適化インスタンスの図など特にわかりやすかった)
  • わからない言葉が出てこない

例えばEBSボリュームの項で最初の説明として下記のように説明してあるのでイメージが湧きやすい

パソコンには、HDD(ハードディスクドライブ)やSSD(ソリッドステートディスク)が搭載されており、OSやデータはそこに格納されます。同じように、EC2インスタンスでは、OSやデータを EBSボリューム に格納しています。

惜しかった点

特になし

まとめ

SAAを受けたときにどうしても基礎知識の不足を感じたので、この機会に補えるような感じがあってよかった。
EBSやEFSなど試験本読んだだけでは掴めなかった実体が少しですが具体的にイメージできるようになったのでその点が大きいです。
SAAの勉強もう一回やってみようかなという気持ちになれました。

copy-webpack-plugin でファイルを別階層にコピーする

f:id:jotaki:20181228214933p:plain

copy-webpack-plugin の設定でちょっとはまったのでメモ
webpack-contrib/copy-webpack-plugin: Copy files and directories with webpack

やりたいこと

src/ 以下の特定階層ファイル( src/library/*.js )を app/ 以下の階層にコピーしたい

webpack.config.js

const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
  plugins: [
    new CopyPlugin([
      {
        from: `${__dirname}/src/js/library/*.js`,
        to: `${__dirname}/app/_assets`,
        context: `${__dirname}/src`
      }
    ]),
  ]
};

こうすると出力は app/_assets/js/*.js になる。

context の書き方が変なのかもしれませんが、from / to / context__dirname がないままだとうまくコピーしてくれませんでした。