2018/10/22 - 2018/10/28

AirDropを悪用した痴漢が発生しているようです。
悪用するつもりはないですが、知らない人に画像を送れるなんてAirDropって便利なんですね...今更。
https://www.yomiuri.co.jp/national/20181028-OYT1T50021.html

Nuxt.js ビギナーズガイドを読みはじめた

Vue.js入門に続き、 Nuxt.js ビギナーズガイドという本が発売されたので読みはじめました。
こちらの本です。
nuxt-beginners-guide.elevenback.jp

200ページほどの軽めな本ですが、中身は写経していてとても面白いです。
本の内容としてはこんな感じ。

1章 Nuxt.jsの概要
2章 Nuxt.jsによるシンプルなアプリケーション開発
3章 Nuxt.jsの機能の活用
4章 中規模以上の開発を意識したNuxt.jsによるWebアプリケーション開発
5章 Nuxt.jsアプリケーションのテスティング
6章 アプリケーションのデプロイと運用
7章 プラグインとモジュール、エコシステムの開発・貢献
8章 最新情報のキャッチアップのすすめ

今週は3章まで読んだのでそこまでの学びやら感想やらをつらつらと。

1章 Nuxt.jsの概要について

Nuxt.jsがなぜ生まれたのか。Nuxt.jsがなぜ支持されているのか。について記載しています。

Nuxt.jsが支持されている要因の一つは、「アプリケーションの本質的ではないことを考える機会が少ない」ということのようです。
例えば、以下のようなところ。

カスタマイズしたローダーやプラグインを使わない場合はwebpackを意識する必要がない
Nuxt.jsはVueのエコシステム(Router, Vuexとか)と密に連携しているから自分で設定しなくてOK
vueの機能不足を補う独自レイヤ(middleware, plugins...)が便利

また、規約があるのも上記につながっていそう。
例えば、pagesディレクトリ配下においたvueファイルは、自動的にルーティングされてページになる。
とかとか、Nuxt.js便利じゃん！って話しが記載してあります。

2章 Nuxt.jsによるシンプルなアプリケーション開発

実際にNuxt.jsを使ったwebアプリを作っていきます。
Qiita API を使って、axiosで記事一覧を取得して表示するアプリです。

デザインはめんどくさかったので僕は何もしてませんが...イメージはつくかと思います。
f:id:yagi_suke:20181028195848g:plain

実際に書きながら学ぶスタイルは楽しくて良いですね！写経したものは以下にupしています。
github: https://github.com/yagisuke/nuxt-beginners-app

3章 Nuxt.jsの機能の活用

レイアウト、ミドルウェア、プラグイン、モジュールモードでのVuexといったNuxt.jsの便利機能を紹介しています。

レイアウト

共通のヘッダー、フッター、サイドバーというように、 Webアプリケーションを作る場合は共通のレイアウトになることが多くあり、この機能が活躍します。

Webアプリケーションを作る場合、TOPページは他ページと違ったレイアウトになることが多いので、 Nuxt.jsがはじめから用意しているdefault.vueではなく、TOPページは独自のレイアウトファイルを用意したほうが色々幸せになるよ。と著者はアドバイスしていました。こういうちょっとしたアドバイスは素敵です。

ミドルウェア

ルーティングへのアクセス時に最初に読み込まれ、SSR処理などが行われる前に処理を行うことができる機能です。例えば、ユーザーエージェントに合わせたリダイレクト処理や、認証が必要なページの構築など。

この本では、Cookieの値で認証済みかどうかを判定して、ページの出し分けを学ぶことができます。

プラグイン

npmパッケージやVueプラグイン、そのほか、特定の処理をグローバルに登録し、再利用性を高めるために利用します。

プラグインを利用するパターンは主に2つあるそうです。

1. UIフレームワークや、Firebase SDK、momentといった、アプリケーション全体で使うことが明確なライブラリの導入時
2. ルーティングフックや初期段階での外部CDNコードの読み込みなどの共通処理の導入時

また、SSR時に呼び出すかどうかのオプションを指定できるのも便利。特にUIに関するものは、SSR時にwindowやdocumentが参照できないためエラーとなることがあるので注意です。
日本語ガイドだとここのこと。

モジュールモードでのVuex

Vuexにはクラシックモードとモジュールモードがあります。

クラシックモードでは、自身でVuexを読み込み、ストアインスタンスを生成してVuexストアを構築します。
一方、モジュールモードは、規約に沿って記述するだけで、Nuxt.jsが勝手にVuexストアインスタンスの生成を行ってくれます。モジュールモードで書くっきゃないですね、便利！！

Nuxt.jsの日本語ガイドにも記載されているので、分からない方は一読するのをオススメします。

PixiJSを入門しはじめた

アニメーションとか表現豊かなものは苦手なのですが、克服するためにもPixiJSに入門してみました。

以下に作ったものをドンドンコミットしていく予定ですが、今はひたすら人のソースをコピーして触って壊しての繰り返しです。 github.com

上記プロジェクト(Nuxt + PixiJS + GitHub Pages + Travis CI) の公開もしてみました。
GitHub Pagesも、Travis CIも初めてだったんですが、Nuxt.jsのガイドのおかげで割りとサクッとすぐできました。
助かりますmm
URL: https://yagisuke.github.io/nuxt-pixi/

以上、終わります。