紆余曲折を経て、とりあえずNuxt.jsでi18n対応(英語と日本語のみですが)したポータル的なサイトを作りました。

なお、この記事は技術的な解説は特に行ってません。ただの日記です。

前回まで


※以下もただの日記です

今までの流れ


下記のような流れで今日にいたります。

  • Aboutディレクトリ以下のコンテンツをi18n対応してサブドメインに移したい
  • Next.jsでやるぞ!
  • 挫折
  • Nuxt.jsでやるぞ!
  • とりあえずできた (← いまここ)

できたサイト


About YoshinoriN

いちおう、基本的な部分はザックリ作成できたので、残りは段階的に移す予定です。

使用技術


こんな感じでやりました。

用途技術
サイトジェネレータNuxt.js 2.8.1
多言語対応nuxt-i18n 5.12.7
Markdownファイルのレンダリング@nuxtjs/markdownit 1.2.6
CSS フレームワークbulma 0.7.5
CSS フレームワークgithub-markdown-css 3.0.1
開発ツールhusky 3.0.0
開発ツールlint-staged 1.19.1
開発ツールprettier 1.18.2
リポジトリAWS CodeCommit
ビルド・デプロイAWS CodeBuild
ビルドトリガーAWS CodePipeline
ホスティングAWS S3
配信AWS CloudFront
DNSAWS Route53

コミットするとhusky, lint-staged, prettierでコードのフォーマットかけて、pushするとAWS CodePipelineが変更検知して、CodeBuildでnuxt generateして後はよしなにS3にデプロイしてくれる感じです。

動機的なの


繰り返し書いているんですが、今回は下記のような動機で始めました。

  • 本サイトyoshinorin.net/aboutのコンテンツ量が多い
  • 各SNS(ほとんどやってないですが)などの共通の入り口が欲しい
  • i18n対応したい(ごく少数ですが、GitHub経由などで海外からアクセスがある)
  • React試したい(結果的に頓挫しましたが)
  • 開発中(絶賛放置中)アプリのフロントでNextかNuxtを採用する予定

というところです。

もう少し補足して書くと、本サイトyoshinorin.netは日を追うごとに全てを削りまくる方向に動いており、とにかく最適化とかパフォーマンスチューニングの方向に偏重していっています。ただ、パフォーマンスを重視する反面、ゴリゴリしたサイトも作りたいという想いもあったりして、文章以外のコンテンツ類を分離しながらポータル的なサイトを作ろうと思ったという感じです。

やらないと決めていること


about.yoshinorin.netでは、今後も次のものはやらないという方針で行くつもりです。

  • 古めのブラウザの対応(Nuxt任せなのでどこまで対応しているのか知らない)
  • パフォーマンスや最適化
  • Analyticsの設置

あくまでユーザビリティやパフォーマンス的なのは二の次でクソデカ画像なども使っていこうと思います。また、クローラ拒否しているので検索にはかからないはずで、流入量もたかが知れているはずなのでAnalyticsは設置しません。

現段階でやらなかったこと


以下はやりたいな~とおもったのですが、手を付けたら完成しなさそうだったので現段階ではやりませんでした。

  • TypeScript
  • SCSS

残りとか


雑に残りこれくらいはやる必要があるかなぁと思ってます。

  • Footerの実装
  • 写真表示用のライブラリの選定(現在のものはjQueryに依存している)
  • どこまで移すか決める

/about以下を全部移すのかどうかといったところもまだ決めかねてるのでゆっくりやるつもりです。どうせ自己満足の世界ですしお寿司。

所感


以下今回やってみて抱いた雑な感想シリーズ。

Nuxt.jsについて

日本語のドキュメントがあるというのは強いなぁ。と思いました。また、今回レベルのものであればドキュメントを一通り読めばまあだいたいなんとかなるので楽でしたね。そのドキュメントも2時間くらいあれば手を動かして一通りさらえるくらいの分量です。また、Next.jsと違ってなにかやるには何かしらのプラグインがあったりするので、必要に応じてプラグインのドキュメントを読んでゴニョニョすればだいたいOKです。最も認証とかそういうのをやるとなればまた変わってくるとは思いますが…

ただ、個人的にNuxtは盛り上がってるのかなぁと思っていたのですが(盛り上がってますよね?たぶん)少なくとも外から見ている分の盛り上がりに反して、公式とプラグイン提供してるコミュニティの開発がそこまで活発でもなくない??という疑問があって、大丈夫なんかなぁ?と思いました。

どうもざっと見た感じ数人のメンテナの方がまわしてるようにしか見えなくて、プラグインの中にも全くコミット入ってないやつとか、そんなプラグイン要るんか?みたいなのもあったり…まあ、OSSってどこもこんな感じなんだろうなぁ…というのを感じますね。だいたい、どこもやる気のある一部の人が多少無理して引っ張ってるんじゃないかと思いました(雑に外から見た個人の感想なので実態はわかりませんが…)

また、今回やった範囲では特にこれができるようになったからといってなんかアドバンテージがあるかといわれると、フロントをメインではない人間からすればそんなこともないオーラしかなく、昨今のはこういうのがあるんか。ふ~んくらいのアレで、別に流行ってそうだからといって無理やりやる必要があるようなものではないと思いました。

この周辺に関して別にやる必要ないと判断する材料になったのは良かったと思います。もちろん、フロントの構築のためには今後も使うかもしれませんが、深追いする必要がないという意味です。(非フロントエンドエンジニア感)

デザインについて

始めnuxt-buefyというBulmaをVue向けにしたやつをさらにNuxt向けにしたので開発を始めたのですが「いらんくない??」と思ったので@nuxtjs/bulmaに切り替えたものの、これも「いらんくない??」と思ったのでBulma単体でやることにしました。

以前も書いたのですが、こういうやつはできるだけおおもとを使うのが個人のポリシーなので、そんな感じです。また、Vueだとvueifyというのが有名なようですが、今回作るもののイメージとあわなかったのと、個人的にマテリアルデザインは冷蔵庫みたいなイメージがあってあんまり好きくないのでやめました。

ただ、Bulmaはテキストのデコレーションが個人的な好みと乖離していたので、Markdownをレンダリングした部分の装飾についてはgithub-markdown-cssを使うことにしました。

AWSでのデプロイやホスティングについて

思ったよりめんどくさかったです。めんどくさかったといいつつも1時間くらいでは終わったんですが、めんどくさかったです。特にパーミッション周りとかめんどくさくてダルダルダルメシアンでした。AWSにあまり関係ない話なんですが、以前はCI/CDとかできたときのあの「自動化カッコええ!!」感が好きだったんですが、基本的にどれも概念とかやり方は同じような感じで最近はもう組むのがめんどくさくてダルメシアンの意でした。人はこうやっていろんなものに飽きていくんだね…悲しい…

おわり。