Hello ~ Nuxt.js ~

はじめに
===
フロントエンドの事が全くわかっていない人がとりあえず **Nuxt.js** を触ってみたいと思います。

Nuxt.jsとは
===
[公式ドキュメント](https://ja.nuxtjs.org/guide/)を見た方がわかりやすいかと思います。簡単にいうと、**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
```

。。。。。サーバが立ち上がった。。。のか？？？とりあえずアクセスしてみましょう。
<img width="1416" alt="スクリーンショット 2020-05-02 10.28.21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527997/a50bd56c-4012-8980-b9e1-96d4cfc9facc.png">
よくあるWelcomeページなので無視して CONTINUE しました。(いいのかな？)
<img width="1430" alt="スクリーンショット 2020-05-02 10.30.27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527997/c9d5f3e0-4d44-baf6-8034-8732c6395f0d.png">
誰かからのメッセージ？が書いてありますね。とりあえず「コードを書け」とは言われているので次は何かを書いていきたいと思います。

### 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 になります。
<img width="312" alt="スクリーンショット 2020-05-02 11.21.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527997/d628a027-fb0e-e115-110c-e94de8ce602f.png">

まとめ
===
とりあえず触ってみただけなので、分からない事だらけです。VueもTypescriptも全く分からない状態です。(フロントエンドは難しいですね。。。)
次はNuxt.jsで作成されたディレクトリとか概念的な部分についてまとめたいなと思います。

ではまた次の機会に。。。。