Nuxt.js使ってみた Part2~チュートリアル実践編~

お久しぶり？です、筆者です。

前回はNuxt.jsの概要や小ネタについて見ていきました。
今回は、実践編としてチュートリアル記事をもとにTODOアプリを作って行った中での使用感とかを述べていければと。
((タイトル回収とも言う

ちなみに参考にした記事はこちらです:
www.boel.co.jp

お仕事でNuxt.jsを使った時は、TypeScriptベースで書いていきましたが…。
Nuxt.jsをTypeScript化するのは非常に骨が折れたので、今回はJavaScriptベースでいきます。

それでは行きましょう。

とりあえずチュートリアル通りにコードを実装。

こちらのチュートリアルでは、単一のcomponentの中に全ての処理を書いていく形式でした。
チュートリアルだから簡単にしたのでしょうね。

また、このチュートリアルでは「Vuex」をふんだんに使っており…。
お仕事では色々な理由で触れなかったので、結構嬉しかったり。

そんなこんなでチュートリアルのコードは出来上がりましたが、これだけでは正直面白味もないので。
お次はこのチュートリアルコードを元に、改良を加えていきたいと思います。

アレンジ内容はこんな感じ。

※本当は他にも色々やりたかったのですが、今回はここまで…。

折角なので、このカスタマイズ中に学んだ事を小ネタ形式で書いていければと。

…と思いましたが、小ネタが小ネタに収まりきらない量に膨れあがっちゃったので…。
次回記事に個別にまとめていければ。

今回はチュートリアルを元にNuxt.jsのサンプルコードを書いてみました。
やはり簡単なものでも、実際に触れるというのは重要ですね。
文献を読むだけではわからなかったことが色々分かった気がします。

あと…本当は下記の様なカスタマイズもやってみたかったのですが:

これら項目は「Nuxt.jsを学ぶ」という意図に直接関わってない気がしたのでやめました。
((あとこれら全部やると時間もかかりますしね
個人的には、Tailwind CSSは気になるところですが…それはまた別の機会に。

あとこれは個人の感想ですが、チュートリアル通りに作るのは非常に…何というか退屈だなぁと。
正直、チュートリアル通りに書くよりもその後のアレンジ作業の方が楽しかったです。

次回記事以降では、先にも触れた様にカスタマイズの中で気になった項目:

…についてまとめていければと。
それでは|дﾟ*)

Aikの技術日記