Kumanote LLC.

2020/05/23

[第２回]Nuxt.jsでHello World

nuxtjsmaterial-designvuetify

プロジェクトのディレクトリ構成

始める前に、今回開発するアプリのディレクトリ構造のOverviewをみてみましょう。

以下のような感じになります。

gdrive-manager
├── client
│   ├── README.md
│   ├── assets
│   ├── components
│   ├── layouts
│   ├── nuxt.config.js
│   ├── package.json
│   ├── pages
│   ├── plugins
│   ├── static
│   └── store
└── server
    ├── README.md
    ├── alembic
    ├── alembic.ini
    ├── app
    │   └── api
    │       └── v1
    │           └── endpoints
    └── pyproject.toml
  • 一番topのディレクトリ（gdrive-manager）の下に client と server のディレクトリを作成します。
    • clientディレクトリの中には Nuxt.js のアプリ関係のファイルを配置します。
    • serverディレクトリの中には FastAPI のアプリ関係のファイルを配置します。
      • serverディレクトリの中にはもっと多くのディレクトリができますが、今回は省略しています。

事前準備

まえがき

  • 筆者はMac OSX Catalinaで作業しています。WindowsやLinuxユーザーの方はコマンドを適時読み替えてください。

nodejs/yarnのインストール

おすすめのインストール方法

筆者は nodenv というツールをお勧めします。
nodenvというのは、nodejsのバージョンをディレクトリ毎に管理するのに適しています。

例えば、Aというプロジェクトでは、v10をBというプロジェクトでv12のnodejsを使っているとします。そうすると、PCにv10をインストールしてしまうと、プロジェクトBの作業をしたい時に、v10をアンインストールしてv12をインストールするような作業が発生してしまいます。
なので、v10とv12を別々のディレクトリにインストールして、PATH環境変数を書き直すような作業をするのが一般的なのですが・・それをツール化したものが nodenv となります。

この nodenv は nodejs の管理ツールなのですが、他にも pyenv (python用)やrbenv (ruby用)など
様々な言語に対応するツールが出ています。その XXenvを管理することができる anyenv というツールがあるので、筆者はこちらも使っています。
anyenvを使うと、nodenvやpyenvなどのツールをanyenvのコマンドを使ってインストールすることができるようになります。

また、nodenvで、nodeの特定のバージョンをインストールすると、勝手にyarn（nodejsのパッケージマネージャー）をインストールしてくれるnodenv-yarn-installというツールもあり、こちらもとても便利で使っています。

まとめると以下のような感じになります。

  1. nodenvをインストール（管理する）ために anyenv をインストールする
  2. anyenvを使って、nodenvをインストールする
  3. nodenv-yarn-installをインストールする
  4. nodenvを使って、特定のnodejsのバージョンをインストールする
  5. nodenvを使って、本プロジェクトのnodejsのバージョンを固定化する

本稿の主旨とは外れるので、それぞれのツールのインストール方法割愛させていただきます。
基本的にはgithubのReadmeに書かれている内容に沿ってインストールしてください。

nodejsのインストール

nodejsをインストールしてください。筆者はv13.12というバージョンをインストールしました。
動作確認はしていないですが、多少バージョンが前後しても動作すると思います。

おすすめのインストールではなくてもNode.js 本家のサイトからも、もちろんインストール可能です。

% node -v
v13.12.0

yarnのインストール

おすすめのインストールではなくてもこちらのサイトからも、もちろんインストール可能です。

% yarn -v
1.22.4

はじめてみましょう

まえおきが長くなりましたが、早速Nuxt.jsアプリの開発にとりかかりましょう。

TOPディレクトリの作成

まずはプロジェクトのtopのディレクトリを作成します。“gdrive-manager” という名前で作成します。（名前はなんでも大丈夫です。）

% mkdir gdrive-manager

アプリの雛形を作成

次にTOPディレクトリに移動して、Nuxt.jsのアプリを作成するコマンドを実行します。

% cd gdrive-manager
% yarn create nuxt-app client
yarn create v1.22.4
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Installed "[email protected]" with binaries:
      - create-nuxt-app
[###################################################################################################################################################] 339/339
create-nuxt-app v2.15.0
✨  Generating Nuxt.js project in client
? Project name gdrive-manager-client
? Project description gdrive-manager nuxt.js based client app 
? Author name Hiroki Tanaka
? Choose programming language JavaScript
? Choose the package manager Yarn
? Choose UI framework Vuetify.js
? Choose custom server framework None (Recommended)
? Choose Nuxt.js modules Axios, Progressive Web App (PWA) Support, DotEnv
? Choose linting tools ESLint, Prettier, Lint staged files, StyleLint
? Choose test framework None
? Choose rendering mode Universal (SSR)
? Choose development tools Semantic Pull Requests
yarn run v1.22.4
$ eslint --ext .js,.vue --ignore-path .gitignore . --fix
✨  Done in 1.90s.

🎉  Successfully created project gdrive-manager-client

  To get started:

	cd client
	yarn dev

  To build & start for production:

	cd client
	yarn build
	yarn start

✨  Done in 152.84s.

実行後にいくつか選択肢に答える箇所が出てくるので、以下のように選択しましょう。

項目名 選択する内容 メモ
Project name gdrive-manager-client Nuxt.jsアプリの名前、適当でOK
Project description gdrive-manager nuxt.js based client app Nuxt.jsアプリの詳細、適当でOK
Author name Hiroki Tanaka 制作者の名前、適当でOK
programming language JavaScript TypeScriptというのも選べるけれど、難しいので、JavaScriptにしました
the package manager Yarn
UI framework Vuetify.js Material Designベースのフレームワークです。かなりオススメ
custom server framework None (Recommended)
Nuxt.js modules Axios, Progressive Web App (PWA) Support, DotEnv スペースキーを使って全部選択
linting tools ESLint, Prettier, Lint staged files, StyleLint スペースキーを使って全部選択
test framework None Unit Testは今回使わないです
rendering mode Universal (SSR) Server Side Renderingを指定しましょう
development tools Semantic Pull Requests 任意です。選んでおくと、gitのコメントに気をつけるようになります。

これを実行すると、TOPディレクトリに下に client というディレクトリが作成され
その配下に、Nuxt.jsのテンプレートプロジェクトのファイルが自動で出来上がります。

初回起動

これでもうNuxt.jsアプリを起動する準備が整ってしまいました。

作成した client ディレクトリに入って、以下を実行してみましょう。

% yarn run dev
yarn run v1.22.4
$ nuxt

   ╭─────────────────────────────────────────────╮
   │                                             │
   │   Nuxt.js v2.12.2                           │
   │   Running in development mode (universal)   │
   │                                             │
   │   Listening on: http://localhost:3000/      │
   │                                             │
   ╰─────────────────────────────────────────────╯

実行すると、 http://localhost:3000/ で起動している旨のメッセージが出ますので、
ブラウザを使って、http://localhost:3000/にアクセスしてみましょう。

次のような画面が見えれば成功です。

hello-world-min.png

今回作成したファイルは GithubのPull Request からもご覧いただけます。

今回はこれで以上になります。
次回以降は、clientアプリのレイアウトを整える作業を実施したいと思います。

関連する記事

[第１回]本シリーズの概要

NuxtJSとFastAPIの入門シリーズです。まずは、開発するアプリの概要を説明します。

[第２回]Nuxt.jsでHello World

Nuxt.jsを使い、Vuetifyというデザインフレームワークを使って、topページを表示します

[第３回]Nuxt.js＋Vuetifyでレイアウトを整える

Nuxt.jsベースのWebクライアントアプリのlayoutをきれいに整えます

[第４回]Nuxt.js＋Auth Moduleでログイン画面を作り込む

Nuxt.jsベースのWebクライアントアプリのGoogleログイン画面を作ります