search
LoginSignup
104
Help us understand the problem. What are the problem?

ateam-life-designAteam Hikkoshi Samurai Inc. & Ateam Connect Inc.(エイチーム引越し侍、エイチームコネクト) Advent Calendar 2019 Day 10

posted at

updated at

Organization

【Nuxt.js】create-nuxt-appのすすめ 〜create-nuxt-appの質問に負けたくないあなたへ〜

この記事はエイチーム引越し侍 / エイチームコネクト Advent Calendar 2019の10日目の記事です。

前日は、こぼさん(@anneau)の『Vueを使ってサイトを1ヶ月で作った話。そして、それを、1ヶ月使ってリプレイスした話。』でした!
私も身近で引越し侍 まるごとスイッチを開発している姿を見ていたのですが、膨大な仕様のサービスを、2ヶ月という限られた期間で、スピード感もって開発していることがひしひしと伝わりました。
尊敬する大先輩の記事です。ぜひ読んでみてください!

本日はぴかぴかの新卒1年生のちーずが担当いたします!
QiitaがPWAに対応していることに最近気づき、以前より記事を読むようになりましたが、投稿は久しぶりになってしまいました:cry:
アイコンのQiitanのシルエットがかわいいので、スマホのホーム画面にQiitaを追加することをおすすめします:slight_smile:

はじめに

Nuxt.jsを勉強し始めたときに、いちばん最初にcreate-nuxt-appをしてみました。
すると、すごい勢いで大量な質問されて、:thinking: ってなっちゃいました。
そんな人が他にもいるかな?と思い、create-nuxt-appしたときに迷わないように選択の手がかりになるような記事にしてみました!

こんな記事です

  • Nuxt.js 初学者向けの記事です
  • create-nuxt-appのしくみとはじめかたがわかります。
  • 8つの質問に答えて、最適な環境づくりをしよう! (※2019年12月現在)

1. create-nuxt-appとは?

公式ドキュメントみると、Create Nuxt.js App in seconds.と書いてありますが、まさにその通りで、1つのコマンドだけでNuxt.jsのwebアプリをぱっとつくれちゃうツールです。

Nuxtでよく使われるフレームワークや、モードを選択して、環境が整った状態で始められるのが最大のメリットです。

どんな仕組みでできてるの?って思った人は、 公式ドキュメントをもくもくと読むとよくわかると思いますが、テンプレートとなるpackage.jsonをみるだけでも、なるほどね〜ってなります。

create-nuxt-app/template/_package.json

2. create-nuxt-appのはじめかた

create-nuxt-appは2通りの方法ではじめることができます。

npxではじめる

npm 5.2.0以上からはデフォルトで入っているnpxを用いてcreate-nuxt-appする場合は、下記コマンドでできます。

$ npx create-nuxt-app <project-name>

npxには、インストールしていないパッケージを一度だけ実行できる機能があります。
コマンドの実行が完了次第、グローバルから削除されるため、おすすめです。

npxに関しては、こちらの記事がわかりやすかったので、是非よんでみてください。

npm 5.2.0の新機能! 「npx」でローカルパッケージを手軽に実行しよう

yarnではじめる

yarnを用いてcreate-nuxt-appする場合は、下記コマンドでできます。

$ yarn create nuxt-app <project-name>

このコマンドは、下記コマンドと全く同じであるため、create-nuxt-appのパッケージをグローバルに追加し、create-nuxt-appを実行してることがわかります。

$ yarn global add create-nuxt-app
$ create-nuxt-app <project-name>

yarn createに関する詳しい情報はこちら。

yarn create | Yarn

3. 8つのQuestion

プロジェクト名や、筆者などありきたりなことを聞かれたあとに、質問責めが始まります。
初create-nuxt-appの方は少しびっくりしちゃうかもですが、この記事では一つずつ説明していきます。

(1) パッケージマネージャー

Nuxt.jsでアプリを作成する際に、Node.jsパッケージを管理するシステムであるパッケージマネージャーが必要です。
パッケージマネージャーには以下の二つの選択肢があります。

? Choose the package manager (Use arrow keys)
❯ Yarn
  Npm

正直、止むを得ない場合以外はYarn一択だと思います。
Yarnの方が早くて、出力が簡潔です。

パッケージマネージャーって?ってなった方には、私の過去の記事を紹介いたします。笑

パッケージ管理ツール(パッケージマネージャー)

(2) vue.jsのUIフレームワーク

UIフレームワークは、CSSのフレームワークをVue.jsに拡張したものがほとんどです。
現在(2019/12/10)では、下記フレームワークから選択することができます。

 Choose UI framework (Use arrow keys)
❯ None
  Ant Design Vue
  Bootstrap Vue
  Buefy
  Bulma
  Element
  Framevuerk
  iView
  Tachyons
  Tailwind CSS
  Vuetify.js

Ant Design Vue

Ant_Design_Vue.png

シンプル且つ、ユーザビリティが良さそうな印象のフレームワーク。
元は、ReactのUIフレームワークであり、APIもそこそこ充実しています。

github star 8.8k
コンポーネント、APIの充実度 ★★★☆☆
難易度
適切なデバイス PC

Bootstrap Vue

bootstrap.png
BootstrapをVueのUIコンポーネントとして拡張してるため、もろBootstrapな見た目のフレームワークです。
ちょっとドキュメント読みづらいかなと感じました。

github star 10.5k
コンポーネント、APIの充実度 ★★★★☆
難易度
適切なデバイス PC/SP

Buefy

Buefy.png

BulmaをVueのUIコンポーネントとして拡張してるため、もろBulmaな見た目のUIフレームワーク。
APIのドキュメントが読みやすく、シンプルで汎用性が高い印象。

github star 6.7k
コンポーネント、APIの充実度 ★★★★☆
難易度
適切なデバイス PC(SPもいけなくはない)

Bulma

bulma.png
シンプル且つ軽量なCSSフレームワーク。
機能は自分で実装したい!って人におすすめ。

github star 37.7k
コンポーネント、APIの充実度 ★★☆☆☆
難易度
適切なデバイス PC(SPもいけなくはない)

Element

Element.png

見た目はシンプルだが、高機能なコンポーネントが多い。
数も充実しており、使ってる人も多い印象。

github star 42.7k
コンポーネント、APIの充実度 ★★★★★
難易度
適切なデバイス PC

Framevuerk

Framevuerk.png
とてつもなくシンプルで最低限にコンポーネントが用意されているUIフレームワーク。
ただ、更新頻度も低く、汎用性も低いためおすすめはしません。

github star 194
コンポーネント、APIの充実度 ★☆☆☆☆
難易度
適切なデバイス PC...?

iView

iView.png
component数や機能面において過不足なくちょうどよい感じのUIフレームワーク。
ただ、日本人にユーザーが少なそう。。。

github star 900
コンポーネント、APIの充実度 ★★★☆☆
難易度
適切なデバイス PC

Tachyons

Tachyons.png

マルチクラスで元のcomponentをアレンジしていく感じ。
ドキュメントがギャラリーになっており、自分の実現したいデザインを探しやすいかも?

github star 9.4k
コンポーネント、APIの充実度 ★★★☆☆
難易度
適切なデバイス PC/SP

Tailwind CSS

Tailwind.png
元のcomponentにマルチクラスをあててアレンジしていくCSSフレームワーク。
拡張性が高く、レイアウトも自由が効き、デザイン製も美しい。

github star 17.4k
コンポーネント、APIの充実度 ★★★☆☆
難易度
適切なデバイス PC/SP

Vuetify.js

Vuetify.png
マテリアルデザインのUIフレームワークで、アニメーションが美しい。
高機能かつ充実したcomponent量だが、ドキュメントだけ読みづらい。

github star 22.8k
コンポーネント、APIの充実度 ★★★★★
難易度
適切なデバイス PC/SP

※ 難易度は、「どれくらい簡易に動く機能が実装できるか」という基準で評価しているため、CSSのみのフレームワークは「高」とさせていただきます。
※ star数は、12月10日現在の数です。

つくりたいものによって、使い分けるのがベストだとおもいますが、個人的におすすめなのが、BuefyVuetify.jsです。
どちらともcomponentのAPIの機能性が高く、拡張性があるため、使いやすいなと感じました。

ここで筆者がつまづいたtips

フレームワークのConfigurationなどから変えられず、やむなく上書きしたい時は、ディープセレクタである必要があります。

  • styleタグにscopedを付与
  • class名の前に >>>

することで上書きができます。

<style scoped>
>>> .theme--light.v-application {
  background-color: #f3f3f3;
}
</style>

(3) サーバーサイドのフレームワーク

SSRモードの際に用いられるサーバーサイドのフレームワークを指定することができます。
(基本的には、フレームワークを用いることは滅多にないと思われます。)
現在(2019/12/10)では、下記フレームワークから選択することができます。

? Choose custom server framework (Use arrow keys)
❯ None (Recommended)
  AdonisJs
  Express
  Fastify
  Feathers
  hapi
  Koa
  Micro

AdonisJs

Laravelっぽく書けるフレームワーク。
github star: 7.4k

adonis-framework - Github

Express

Node.js製のWebフレームワークといえば...ってくらい有名なフレームワーク。
REST APIの開発によく使われてるイメージです。

github star: 46.4k

express - Github

Fastify

名前の通り、最速を目指してるwebフレームワークです。
github star: 12.7k

fastify - Github

Feathers

リアルタイムアプリケーションとREST APIに特化したフレームワークです。
クライアントのみでも使えるみたい。
github star: 11.9k

feathers - Github

hapi

軽量で拡張性の高いNode.jsフレームワーク。
github star: 11.8k

hapi - Github

Koa

expressを開発したチームが、よりわかりやすく、軽量に作ったwebフレームワークです。
github star: 28k

koa - Github

Micro

高速かつわかりやすいフレームワーク。
下記記事がわかりやすかったです。
github star: 8.9k

Node.js でちょっとしたサーバーサイドやるなら、 Micro が良いかも

micro - Github


※ star数は、12月10日現在の数です。

Node.jsのフレームワークがこんなにもあるのに驚きました。
個人的には、REST APIを作成するにはFeathersが書きやすそうだなと感じました。
また、サーバーサイド言語での開発が多い人は、AdonisJsがディレクトリ構造や書き方など、馴染みやすい印象を受けました。

(4) Nuxt.jsが提供するモジュール

nuxt-communityが提供する、便利でよく使われるモジュールを選択できます。
上3つと違い、複数選択し導入することが可能です。

? Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to invert sele
ction)
❯◯ Axios
 ◯ Progressive Web App (PWA) Support
 ◯ DotEnv

今回は関連性がないため、一つずつ説明していきます。

Axios

Axiosは、非同期通信を用いて簡単に外部APIを叩くことができるツールです。
jQueryでいう、$.ajaxのようなものです。
非同期処理を行うPromiseベースであり、非常に書きやすいです。
APIを叩くNuxtアプリを作成する際は、ほぼ必ず必要になるため、入れておくとよいでしょう。

Introduction - Axios Modul
GitHub - nuxt-community/axios-module

PWA

PWA(Progressive Web Apps)は、webアプリをモバイルアプリのように使うことのできる仕組みです。
ホームに追加すると、アドレスバーがなくなり、プッシュ通知やオフライン利用などができたりします。すごい。
そのため、今後モバイルでの展開を考えてるサービスを作る際には、この項目をチェックすると良いと思います。

今回インストールされるのは、nuxt pwaという、nuxtで簡単にPWAに対応したwebアプリを作れるパッケージです。

⚡ Nuxt PWA

PWAを理解するのは難しいですが、下記記事がわかりやすいと思います。

いまさら聞けないPWAとAMP

また、Googleが提供するチェックリストもあるため、参考になるかも...?

Progressive Web App Checklist | Google Developers

DotEnv

DotEnvは、環境変数を管理するモジュールです。
環境依存の設定やを管理する際に使えます。
(そのため、設定ファイルはgitignoreしましょう。)

GitHub - nuxt-community/dotenv-modul

他にも、nuxt-communityが提供するモジュールを見てみると、便利そうなものがたくさんあるので、網羅的に見てみることをおすすめします。

(5) ソースを美しく保つためのツール

Lint(linter)とは、ソースコードのルールをチェックしてくれるツールです。
共同開発する際に、ソースコードのルールがないと、長期的に見たソースの品質が悪くなる可能性があります。
それを監視してくれるのが、Lintです。
こちらも言語によってツールが違うため、複数指定することができます。

? Choose linting tools (Press <space> to select, <a> to toggle all, <i> to invert select
ion)
❯◯ ESLint
 ◯ Prettier
 ◯ Lint staged files
 ◯ StyleLint

ESLint

ESLintは、JavaScriptのソースチェッカーです。
クォーテーションの種類やconsole.logを許すかなど、様々なルールを設定し、
そのルールにあってるかをチェックしてくれます。

ESLint - 公式サイト
ESLint - ルール一覧

Prettier

Prettierは、ルールに合ったコードに整形してくれるコードフォーマッタです。
Linterと親和性が高く、Linterに設定したルールに自動的に書き換えてくれたりします。

Prettier · Opinionated Code Formatter

また、ESLintとPrettierに関してはNuxt.jsの公式ドキュメントにも詳しく書いてあります。

また、下記記事がわかりやすかったため、参考にしてみてください。

Prettier 入門 ~ESLintとの違いを理解して併用する~

Lint staged files

この項目を選択すると、huskylint-stagedというモジュールが追加されます。
huskyは、gitコマンドをhookにして、指定したコマンドを叩くことができるモジュールで、
lint-stagedは、コミット前のファイルに強制的にlintingさせることができるモジュールです。
これらを組み合わせることで、lintの通ったソースコードのみしかcommitできない環境が出来上がります。

GitHub - typicode/husky
GitHub - okonet/lint-stagedy

StyleLint

StyleLintはその名の通り、スタイルシートのコードをチェックしてくれるツールです。
この項目をチェックすると、下記モジュールが入れられます。

GitHub - nuxt-community/stylelint-module

共同開発する場合は、なるべく上記のLintをチームでカスタマイズして使っていくことをおすすめします。

(6) テストフレームワーク

この項目では、Unitテストフレームワークを実行してくれるテストランナーを指定することができます。
自分はまだテストランナーを使ったことがないです...
本当に知見がないため、さらっと調査し、紹介します...
(大反省しております。。。)

? Choose test framework (Use arrow keys)
❯ None
  Jest
  AVA

Jest

Facebook製のユニットテストツール
github star: 28.6k

jest - Github

AVA

早い・軽い・簡単が売りのテストツール
github star: 17.1k

ava - Github

※ star数は、12月10日現在の数です。

(7) レンダリングモード

Nuxtの最大の特徴である、レンダリングモードの指定ができます。
(心のなかで、なぜ最後のほうに聞いてくるんだ?って思ってます。最初に聞いてほしい...)

? Choose rendering mode (Use arrow keys)
❯ Universal (SSR)
  Single Page App

Universal (SSR)は、初回リクエストやリロードの際にサーバーサイドでレンダリングを行い、
Single Page App(SPA)では、クライアント側でjavascriptをレタリングします。

どちらを選ぶべきかに関しては、下記記事がとってもわかりやすいです。

Nuxt.jsを使うときに、SPA・SSR・静的化のどれがいいか迷ったら

(8) 開発ツール

開発時に使うツールを選択することができます。

? Choose development tools
❯◯ jsconfig.json (Recommended for VS Code)

jsconfig.jsonを設定することで、エディタ(VS Code)にこのコードはES6で書かれてますよということを伝えることができ、正しくシンタックスエラーがでたりハイライトしたりします。

jsconfig.json Reference

以上でcreate-nuxt-app時の質問の解説をおわります。
この質問は日々アップデートされているため、項目が変化したりしますのでご注意を。。。

4. スクラッチからはじめることもできる

Nuxt.jsのアプリ開発に慣れてきたら、スクラッチからはじめることをおすすめします。
ご紹介したモジュールや設定等を自分で一から追加、設定していくと、より自分に合ったNuxtアプリを作ることができます。
ハッカソンや短期開発の時は、create-nuxt-appの方がおすすめです。

公式ドキュメント - スクラッチから始める

終わりに

ここまで書いた感想

正直なところ、物量が多くてすごく疲れました。笑
しかし、記事を書いていくうちに発見も多かったし、自分自身とても勉強になりました。
サーバーサイドのフレームワークなんて、express以外全く知らなかったため、調べるのが楽しかったです。
まだ使えてないものも多いので、この機会にcreate-nuxt-appしまくろうと思います!笑

また、私と同じように、create-nuxt-appの質問に圧倒され、 :thinking: ってなる人もいると思います。
そんな方にこの記事が届くといいなぁって思います。

めっちゃ参考にした文献

お知らせ

エイチームグループでは一緒に活躍してくれる優秀な人材を募集中です。
興味のある方はぜひともエイチームグループ採用ページWebエンジニア詳細ページ)よりお問い合わせ下さい。

フロントエンンドエンジニアも募集しております
https://www.a-tm.co.jp/recruit/requirements/career/lifestylesupport-frontenddesigner/

明日

明日のエイチーム引越し侍、エイチーム コネクトアドベントカレンダーの担当は、@Ingwardさんです!
どんな技術領域の記事なのか楽しみです...!

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
104
Help us understand the problem. What are the problem?