こんにちは、昔はバリバリC+＋プログラマだったと栄光を懐かしむ、たくろーー（悲）です。

昔はＣ++言語とかで開発してましたが、最近のＷｅｂ周りの知識は全然ないけど、Nuxt.js触ってみた話です。

自分が欲しいアプリを開発しようとしたら、紆余曲折してNuxt.jsに流れ着きました。

選択肢としては、FlutterやGoなどもありましたが、悪くはなかったかなと思います。

Nuxt.jsなどのフレームワークを選んで良かったことと、気を付けた方がいいこと、大変だったこと等を書き残しておきます。

◆Nuxt.jsを選んで良かったこと

①日本語のドキュメントや良記事が沢山ある

これ大事かなと思います。特にWeb周りが無知な人間にとっては、何をするにしても勉強・勉強・勉強・・・です。

そうなると日本語で書かれた記事やドキュメントがないと、とっても厳しいです。

学習コストが高い（若くないからね）　☜　日本語の良本や良記事で効率的にクリア、ハマった時も超役にたった

これが出来たのはとっても良かったかなと思います。

似たようなのだとReact系でNext.jsもありますが、Nuxt.jsより日本語記事がちょっと少な目なので、避けてみました。

②SPAや静的ホスティングが出来る

自分が欲しいWebアプリは、現在借りているWordpress用のレンタルサーバです。

Wordpress向けのレンタルサーバは安くてスペック高めなので、相乗りさせたいと考えていました。

こういった、いわゆる共有サーバではnode.jsが大体使えません。

理由は、node.js自体がポートを占有して動作するタイプのソフト
↓
皆で使う共有サーバなのに勝手にポート使うなんてけしからん！
↓
プロセスをkillしてやる！

こんな感じで、無理くりインストールして使ったとしても見つけられるとkillされる可能性が満載です。

その点、Nuxt.jsを選ぶと、node.jsが入っていないサーバでも静的ホスティングが可能です。

何を作りたいかにもよりますが、

SPAモードでとりあえず開発して学習を勧めながら開発していって、いずれSSRやサーバサイドコーディングを視野に入れるのが楽な感じがしました。

③ルーティング、状態管理を楽にするためにNuxt.js

SPAモードでやるなら、VueCLIで作るプロジェクトでRoutingとVuex使えばいいじゃんと言われそうですが、そうは思いませんでした。

Nuxt.jsっていうオールインワンな環境を覚えてみるという楽しさにも触れられますし、慣れればNuxt.jsの方が楽に感じました。

ここは考え方によるかもしれませんが、ある程度長くお付き合いをしていこうと思うと、Nuxt.jsなどのオールインワンにするのが開発コストが低くなるのは見えています。

なんか大変そうだからVueCLIくらいで収まっておこうかなと思いましたが、これに関しては、Nuxt.jsの選択はアタリでした。

おじさんエンジニアになると、すぐに億劫になりますがもう一歩だけ進めてみるとイイ感じです。

◆気を付けた方がいいこと

①TypeScriptを選ばない（まずはJavaScript）

書いていくコード量にもよりますが、難しいことをするわけでもなく協力しあって開発するわけでもないのなら

とりあえずJavaScriptで問題ありません。

TypeScript書いて、俺も今の標準はやっぱTypeScriptだよな！ってイキってみたい気持ちもありますが、

javascriptに慣れてきてからでも全く問題ありません。

昔ながらのレガシーエンジニアには、初期段階でTypeScriptまで行くのはちょっときついかなと思いました。

おじさんエンジニアは学習コストは死活問題であることを念頭に入れた方が良いです。好みかとは思いますが、

②CSSフレームワークを使わない（逆に面倒）

BULMAとか、BootStrap使えば今時な画面になるんだぜ
そして、楽に作れるんだぜ

と思ってトライしてみましたが、

結論からいくと、CCSフレームワークは不要でした。

理由は、簡単でCSSフレームワークを使うと、CSSを直接いじりにくくなるからです。

開発なんて進めていくと、ちょっとした細かい修正など幾らでもしたくなってくるようになります。

その時に、スタイルシートのここだけ変えたいって時にそれに該当するCSSフレームワークのマニュアルと格闘するのがめんどくさすぎます。

それなら、CSS直接いじった方が楽だよね。と思いました。

どうしてもCSSフレームワークを使いたいなら、

CSSフレームワークを使って開発する
↓
CSSフレームワークで出力されたCSSを引っこ抜いておく
↓
ソースをCSSフレームワーク無し＋引っこ抜いたCSS適用
↓
後の細かい修正はすべてCSSを直接いじって修正する
↓
CSSフレームワークの美味しい所だけを頂く

CSSフレームワーク様には失礼かもしれませんが、美味しい所だけを頂こうとするとこれが良いお付き合いの仕方かなと思いました。

ここも考え方1つですが、学習コスト・開発コストはとにかく上げないことが吉です。

◆大変だったこと

①アロー関数やreturnから書き始めるコードが慣れない

慣れの問題もありますが、昔ながらのエンジニアとしては

プログラムというのはつまり

引数と返却値をしっかり定義した関数をつくって
↓
関数内では、まず変数をしっかりと初期化
↓
処理の目的をコメントでしっかりと書いて
↓
処理中にも注意点などはすべてコメントをいれて
↓
みんながメンテしやすいプログラムを作る
↓
これこそが正義

こんな感じでしたが、今のWebのプログラムを見ると、ぞわっとします。

・コメント少ない
・アロー関数だと記号化が進んで可読性が・・
・関数内の処理がいきなりreturnからはじまる

暫くは慣れなかったですが、色んなライブラリを使ったりすることを考えると、自分脳をこれに寄せていく必要がありました。

アロー関数は、覚えると逆に楽になる感じがするので
最初は読み替えて理解して、使ってみて段々と自分になじませるといい感じです。

②Vueのライフサイクルにライブラリを組み込むのが難

大体の開発ってライブラリとか使って、手抜きできる部分はどんどん手抜きしていきますよね。信頼性が怪しいライブラリとかは使いませんが…

そんな時、

npm install … して
↓
importして
↓
ホイ！

ってしたい所ですが、Vueのライフサイクルを意識して組み込んでも動かなかったり、watchで監視させてトリガー引いたりとか…

Vueのしきたりに合わせて、ライブラリを組み込んであげる必要がありました。

これが意外とハマって時間を食います。

こんな時に、Web記事で日本語記事なんかが出てくると

ハマり回避できたりもします。

段々と、Vueのライフサイクルなど癖や攻略法が分かってくるので、経験を積み上げてクリアしていきました。

◆最後に

まだまだ未熟者なんで、誤った表現や理解もあるかもしれませんが、これまでNuxt.jsを触れてみて感じたことをまとめてみました。

Nuxt.js最高！っとはなりませんが、色々試してNext.jsに寝返っていたりするかもしれません。

Flutterでやろうとしたけど、Nuxt.jsに流れ着いた経緯もあるので。

参考になれば幸いです。