はじめに
フロントエンドの事が全くわかっていない人がとりあえず Nuxt.js を触ってみたいと思います。
Nuxt.jsとは
公式ドキュメントを見た方がわかりやすいかと思います。簡単にいうと、Vue.js に基づいたWebアプリケーションフレームワークです。
とりあえずやってみる
「いやいや、特徴とか知りなよ」となるところですが、性格的に実際に触りながら学んでいこうかなと思います。ここから公式ドキュメントに沿ってやっていきます。
プロジェクト作成
npm や yarn コマンドで作成できるようです。どっちでも良さそうな気はしましたが、yarn の方が高速？らしいのでyarnで作成することにします。
❯ yarn create nuxt-app hello-nuxt
yarn create v1.22.4
[1/4] 🔍 Resolving packages...
warning create-nuxt-app > sao > micromatch > snapdragon > source-map-resolve > resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
warning create-nuxt-app > sao > micromatch > snapdragon > source-map-resolve > urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 🔨 Building fresh packages...
success Installed "create-nuxt-app@2.15.0" with binaries:
- create-nuxt-app
create-nuxt-app v2.15.0
✨ Generating Nuxt.js project in hello-nuxt
? Project name (hello-nuxt)
なんか質問されました。ここからいくつかの質問があるようなので答えていきます。こんな感じで答えていきました。(雰囲気とノリです)
create-nuxt-app v2.15.0
✨ Generating Nuxt.js project in hello-nuxt
? Project name hello-nuxt
? Project description hello-nuxt-rails
? Author name nyankichikun
? Choose programming language TypeScript
? Choose the package manager Yarn
? Choose UI framework Vuetify.js
? Choose custom server framework None (Recommended)
? Choose the runtime for TypeScript @nuxt/typescript-runtime
? Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Choose linting tools (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Choose test framework Jest
? Choose rendering mode Single Page App
? Choose development tools (Press <space> to select, <a> to toggle all, <i> to invert selection)
🎉 Successfully created project hello-nuxt
To get started:
cd hello-nuxt
yarn dev
To build & start for production:
cd hello-nuxt
yarn build
yarn start
To test:
cd hello-nuxt
yarn test
For TypeScript users.
See : https://typescript.nuxtjs.org/cookbook/components/
✨ Done in 953.26s.
作成できました。はじめ方が書いてありますね。 get started してみますか
get started
❯ cd hello-nuxt
❯ yarn dev
yarn run v1.22.4
$ nuxt-ts
╭──────────────────────────────────────────╮
│ │
│ Nuxt.js v2.12.2 │
│ Running in development mode (spa) │
│ │
│ Listening on: http://localhost:3000/ │
│ │
╰──────────────────────────────────────────╯
ℹ Preparing project for development 10:24:42
ℹ Initial build may take a while 10:24:42
✔ Builder initialized 10:24:42
✔ Nuxt files generated 10:24:42
ℹ Starting type checking service... nuxt:typescript 10:24:43
✔ Client
Compiled successfully in 4.98s
ℹ Type checking in progress... nuxt:typescript 10:24:48
ℹ Waiting for file changes 10:24:48
ℹ Memory usage: 343 MB (RSS: 472 MB) 10:24:48
ℹ Listening on: http://localhost:3000/ 10:24:48
ℹ No type errors found nuxt:typescript 10:24:49
ℹ Version: typescript 3.8.3 nuxt:typescript 10:24:49
ℹ Time: 5447 ms
。。。。。サーバが立ち上がった。。。のか？？？とりあえずアクセスしてみましょう。
よくあるWelcomeページなので無視して CONTINUE しました。(いいのかな？)
誰かからのメッセージ？が書いてありますね。とりあえず「コードを書け」とは言われているので次は何かを書いていきたいと思います。
Then. write the code
さて、「どこに？なにを？どうやって？」って感じですね。公式ドキュメントに戻りましょう。
こんな記載がありました。
Nuxt.js は pages ディレクトリ内のファイルの更新を監視します。そのため、新しいページを追加したときにアプリケーションを再起動する必要はありません。
へー。再起動しなくていいのは便利ですね。。。。ではなく今大事なのはそこではないですね。
どうやら pages ディレクトリがあってそこにページを追加すれば良さそうですね。確認してみましょう。
❯ ls
README.md components layouts node_modules package.json plugins store tsconfig.json
assets jest.config.js middleware nuxt.config.js pages static test yarn.lock
ありますね。なので pages ディレクトリの階層も見てみます。
❯ ls pages
README.md index.vue inspire.vue
お、vueファイルが出てきました。これっぽいですね。実際に中身をみるとWelcomeページと誰かのメッセージのソースコードが書かれていました。
- index.vue -> http://localhost:3000 (Welcome)
- inspire.vue -> http://localhost:3000/inspire (誰かのメッセージ)
という事でここにファイルを追加してみると良さそうですね。適当に作成してみます
# pages/hello.vue
<template>
<div class="hello">
Hello, Nyankichikun!
</div>
</template>
作成したのでアクセスしてみます。URLは /hello になります。
まとめ
とりあえず触ってみただけなので、分からない事だらけです。VueもTypescriptも全く分からない状態です。(フロントエンドは難しいですね。。。)
次はNuxt.jsで作成されたディレクトリとか概念的な部分についてまとめたいなと思います。
ではまた次の機会に。。。。