◆当ページにはプロモーションが含まれています

JavaScript

【2020年10月】create-nuxt-app で聞かれる項目の意味をまとめました【v3.4.0】

皆さん、こんにちは。どんぶラッコです。

最近 Nuxt.js で実装する機会が減っていたのですが、久々に立ち上げたところ、 create-nuxt-app で聞かれる項目が増えていました!

折角なので、これからNuxt.jsを触り始める皆様に向けて、どういうことが聞かれているのかをまとめてみたいと思います

どんぶラッコ
どんぶラッコ
今回は v3.4.0 を基に進めるよ!
グランくん
グランくん
すぐに変わってしまうと思うから、更新されていたらコメントください!

create-nuxt-app

Nuxt.jsのアプリを作るときに使う便利コマンドです。

yarn create nuxt-app <project-name>
# または
npx create-nuxt-app <project-name>

コマンドを叩くことで実行できます。

例えば、 sample というディレクトリにプロジェクトを展開したい場合は

npx create-nuxt-app sample

とコマンドを実行します。

ProjectName

? Project name: sample

このプロジェクトの名前です。特に指定しなければコマンドを叩いた時の <project-name> 部分が適用されます。

Programming language

? Programming language: (Use arrow keys)
❯ JavaScript
  TypeScript

TypeScript対応についてです。TypeScriptを選択すると、TypeScript用のモジュールをセットアップしてくれます。

Package manager

? Package manager: (Use arrow keys)
❯ Yarn
  Npm

Yarn を使ってパッケージ管理するか、 Npm を使ってパッケージ管理するかを選択します。特にこだわりがなければ Yarn を選択しておけば大丈夫です。

UI framework

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

CSSフレームワークを選択できます。かなり増えましたね!

私は Vuetify.js をよく使っています。 周囲のエンジニアは Tailwind CSS を 使ってる人も多いですね。

Nuxt.js modules

? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◯ Axios
 ◯ Progressive Web App (PWA)
 ◯ Content

一緒にインストールしたいモジュールを選択することができます。

Axios は APIを叩いて情報取得する上では必須のモジュールなのでインストールしておくべきです。

その他については、必要に応じてのインストールで大丈夫です。

PWAとは、Webページをスマホアプリみたいに使うことができる仕組みです。実はこのブログサイトも対応しています。

https://proglearn.com/2020/01/21/%e3%80%90%e3%82%b9%e3%83%9e%e3%83%9b%e3%82%a2%e3%83%97%e3%83%aa%e3%81%ab%e3%81%aa%e3%81%a3%e3%81%9f%e3%82%88%e3%80%91proglearn%e3%82%b5%e3%82%a4%e3%83%88%e3%81%8cpwa%e5%af%be%e5%bf%9c%e3%81%97/

Contentとは、Markdown形式でページを構築することができるモジュールです。ヘルプページを作るときに便利ですね!

Linting tools

? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◯ ESLint
 ◯ Prettier
 ◯ Lint staged files
 ◯ StyleLint
 ◯ Commitlint

コード整形ツールをインストールできます。一番最初は ESLint と Prettierを使っておけばOKです。

Testing Framework

? Testing framework: (Use arrow keys)
❯ None
  Jest
  AVA
  WebdriverIO

テストをするためのフレームワークです。私はよくJestを使っています。

https://proglearn.com/2020/06/13/%e3%80%90jest%e3%80%91nuxt-js%e3%81%a7%e3%83%86%e3%82%b9%e3%83%88%e3%82%b3%e3%83%bc%e3%83%89%e3%82%92%e6%9b%b8%e3%81%84%e3%81%a6%e3%81%bf%e3%82%88%e3%81%86%ef%bc%81%e3%80%90%e5%ad%a6%e7%bf%92%e6%96%b9/

Rendering mode

? Rendering mode: (Use arrow keys)
❯ Universal (SSR / SSG)
  Single Page App

SSRとはサーバサイドレンダリングの略です。どちらを選んでいいかわからないということであれば、最初は Universalモードを選んでおけば大丈夫です。後からでも設定は変更できます!

github username

? What is your GitHub username? hoge

githubアカウントのユーザネームを入力します

version control systems

? Version control system: (Use arrow keys)
❯ Git
  None

バージョンコントロールの方法です。特に理由がなければGitを選択しましょう。


かなり色々なカスタマイズができるようになった分、初心者には使いづらくなってしまった印象があります。

初めてNuxt.jsに挑戦する皆様の助けになれば幸いです!

エンジニアにおすすめ転職サイト

マイナビIT AGENT
迷ったらまずはココ。求人数が多いため希望や条件にマッチする求人が見つかる!

レバテックキャリア
担当者のレベルが高い。エンジニア特化で15年の実績がある実績で初回提案での内定率驚異の90%!

JOIN
副業やフリーランスとして高額報酬案件を見つけるならJOIN。未経験者でも案件獲得実績豊富が強み!

\面白いと思ったら/

記事のシェア & Twitter のフォロー をお願いします!

@proglearn
一緒によく読まれている記事

COMMENT

メールアドレスが公開されることはありません。 が付いている欄は必須項目です