arcanum_jp’s blog

おっさんの日記

5374のnuxt版触ってみた

さて無職で何もすることがないと言うところに仙台のランドマークこと小泉さんが5374のNuxt版を作ったとのことでちょっとだけ触ってみた。正直僕はNuxtなに?って状態なのだが、、、

5374プロジェクト自身はこちら

github.com


今回の5374Nuxt版のリポジトリはこちら。

github.com


オリジナルの5374プロジェクトはもともとUI部分にjQueryを使っていたのですが、もうjQueryオワコン!とのことでトレンドであるVue, Nuxtで構築したとのこと。Vueは以前業務でシステム1つスクラッチで作った際に使ったことがあったので知っているがNuxtって何よ!

Vueそのものがクライアントサイド(ブラウザ上)でUIを構築するフレームワークなのですが、この構築する部分をサーバー側で行うというのがNuxtの特徴みたいです。Vueを使ったSPAはたまに一瞬UI構築の時間がありイラっとさせられますがサーバー上で構築して返すため高速で表示する(ように見える)ことができます。サーバーサイド上で描画を行うのでSEO上でも完全に描画されたDOMを解析できると言う利点があります。またVueを使う際、用途に応じてルーティングなどのパッケージが色々ありますが、Nuxtを使うと初めから入っているので楽なんでしょうね。

Nuxtで構築されたサービスといえば例えばnoteなんかですね。

note.com


さてさわりしか知らない僕の解釈はこの辺にして実際に動かしてみたいと思います。githubのドキュメントを見るにこれしか書いていない。とりあえずこれでローカルホストで動く環境ができるみたいですね。

# install dependencies
$ yarn install

# serve with hot reload at localhost:3000
$ yarn dev


yarnってなんだよ!yarnって!!最近初めに覚えるのが多くてやーん!って嫌になっちゃうっすよ!おっさんに学習は苦痛なのです。yarnはJsで使うパッケージなどの依存関係を管理するもので、package.jsonに記述された依存関係にしたがってローカルにキャッシュして管理します。最近のJsを使ったものは古式ゆかしくライブラリを自分でダウンロードしてリンク張って依存関係を管理するんじゃなくてもうMavenみたいに依存関係の管理は人間がせずにソフトに任せるってのが主流みたいですね。楽になったもんだ。

classic.yarnpkg.com


yarnはnode.js上で動きますので次のコマンドは、node.jsをインストール後、yarnのインストールが前提となっています。ちなみに自分の端末のyarnは1.22.1です。

$ yarn -v
1.22.1

んで、、yarn installでyarn devでとりあえず環境ができるみたい。やーん!エラーちょっと出るけどとりあえずlocalhost:3000で動きます。終了!
f:id:arcanum_jp:20201211193853p:plain

$ yarn install
yarn install v1.22.1
info No lockfile found.
[1/4] 🔍  Resolving packages...
warning bootstrap-vue > popper.js@1.16.1: You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1
warning nuxt > @nuxt/webpack > @nuxt/babel-preset-app > core-js@2.6.12: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
warning nuxt > @nuxt/webpack > webpack > watchpack > watchpack-chokidar2 > chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
warning nuxt > @nuxt/webpack > webpack > watchpack > watchpack-chokidar2 > chokidar > fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
warning nuxt > @nuxt/webpack > webpack > micromatch > snapdragon > source-map-resolve > urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
warning nuxt > @nuxt/webpack > webpack > micromatch > snapdragon > source-map-resolve > resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning " > bootstrap@4.5.3" has unmet peer dependency "jquery@1.9.1 - 3".
warning " > bootstrap@4.5.3" has unmet peer dependency "popper.js@^1.16.1".
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
warning Your current version of Yarn is out of date. The latest version is "1.22.5", while you're on "1.22.1".
info To upgrade, run the following command:
$ brew upgrade yarn
✨  Done in 43.50s.
$ yarn dev
yarn run v1.22.1
$ nuxt

 WARN  mode option is deprecated. You can safely remove it from nuxt.config                                                18:18:14


ℹ NuxtJS collects completely anonymous data about usage.                                                                   18:18:15
  This will help us improving Nuxt developer experience over the time.
  Read more on https://git.io/nuxt-telemetry

? Are you interested in participation? Yes


   ╭───────────────────────────────────────╮
   │                                       │
   │   Nuxt @ v2.14.11                     │
   │                                       │
   │   ▸ Environment: development          │
   │   ▸ Rendering:   server-side          │
   │   ▸ Target:      server               │
   │                                       │
   │   Listening: http://localhost:3000/   │
   │                                       │
   ╰───────────────────────────────────────╯

ℹ Preparing project for development                                                                                        18:18:26
ℹ Initial build may take a while                                                                                           18:18:26
✔ Builder initialized                                                                                                      18:18:26
✔ Nuxt files generated                                                                                                     18:18:26
ℹ Starting type checking service...                                


  ・・・後略

f:id:arcanum_jp:20201211193736p:plain



動かしてみてこのケースの場合UI構築がサーバーで動くってことで、Webサーバーは何が動いているんだろうとかふと疑問はあるのだがまぁ、、、今回は動かすのが目的なのでそっと閉じる・・・