nuxt.js + buefyでいい加減にHELLO WORLDする




株式会社entershareのなつきです！
最近プロジェクトでnuxt.jsを使う機会に恵まれました。

BuefyというUIのライブラリを使ってプロダクトの高速ローンチを目指しています。
それまでの手順をチームとの共有もかねて記録していきます。

#Nuxt.jsって何？
Vue.jsのフレームワークです。RubyでいうところのRailsのような存在だと聞いてこともあります。
様々な機能がありますが、公式ドキュメントから引用すると下記のような感じです。

- Vue ファイルで記述できること（*.vue）
- コードを自動的に分割すること
- サーバーサイドレンダリング
- 非同期データをハンドリングするパワフルなルーティング
- 静的ファイルの配信
- ES6/ES7 のトランスパイレーション
- JS と CSS のバンドル及びミニファイ化
- <head> 要素（<title>、<meta> など）の管理
- 開発モードにおけるホットリローディング
- プリプロセッサ: Sass, Less, Stylus など
- HTTP/2 push headers ready
- モジュール構造で拡張できること

nuxt.jsの公式ページ
https://ja.nuxtjs.org/guide/

通常vue.jsのプロジェクトでは、ルーター(vue-router)や状態管理(vuex)を行うために、外部のライブラリを導入しながら開発を進めます。
nuxt.jsでは、そのへんの必須機能を最初から導入した状態でプロジェクトを始められるのでとても便利です。

サーバサイドレンダリングを行うためにも、よく使われます。

#create nuxt-appしてみる

早速HELLO　WORLDしていきましょう。
プロジェクトを作成したい場所に移動して、下記のコマンドを実行します！

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

もしくは yarn を使ってください:
公式では、yarnが推奨されています。

```
$ yarn create nuxt-app <my-project>
```


そうするといろんな設定を求められます。
一個づつ見ていきます。


###プロジェクトの名前　

![スクリーンショット 2019-04-14 16.28.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224974/e719ece9-abf3-78eb-419c-05bc491c7dd3.png)


###プロジェクトの説明
あとからも編集できるので、適当でOK
![スクリーンショット 2019-04-14 16.28.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224974/46a7af12-ca68-cd25-bf15-afa6d2ea7016.png)

###jsのバックエンドを選択します。
今回は、APIをRailsで構築する＋SSRはしない予定なので、noneを選択

![スクリーンショット 2019-04-14 16.29.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224974/959141bf-85f7-a37d-bbb7-9237e12b76e0.png)

###その他の細かいオプション
PWAやlinter, prettierなどは割と好みがあると思いますが、
Axiosは、httpリクエストを送るのに定番なツールなので、選択するといいことあります。

ちなみに今回は全部入れました。
![スクリーンショット 2019-04-14 16.30.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224974/505517a2-9aa9-7e16-ce72-9ecb9874b389.png)

###CSSのライブラリを導入
結構たくさんの種類があります。
今回は、色々見ていた結果、Buefyを選択しました。
Buefyは、Bulmaで作られたモダンなUIコンポーネントをvue.jsで使うためのライブラリです。
今時の見せ方をしたアプリをペタペタコピペしながら作成できます。
詳しくは違う記事で説明します。

![スクリーンショット 2019-04-14 16.31.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224974/3fd10d7c-9404-8bb6-79c0-bc8d73258f63.png)
![スクリーンショット 2019-04-14 16.31.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224974/0fccb468-8bc7-27f8-b954-9360ab4d5c69.png)


###HELLO　WORLD
これでプロジェクトフォルダーを作成できました。果たしてHELLO　WORLDはうまくいくのだろうか？
最後画面に出てきたこのコマンドが重要です。

```
  To get started:

	cd <my-project>
	yarn run dev

  To build & start for production:

	cd <my-project>
	yarn run build
	yarn start

  To test:

	cd <my-project>
	yarn run test
```

ウェブサーバーの立ち上げに下記のコマンドを実行

```
cd <my-project>
yarn run dev
```

こうなったら成功
![スクリーンショット 2019-04-14 16.53.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224974/388da08c-eb27-3e96-7e57-71e86e369032.png)

localhost:3000にアクセス

![スクリーンショット 2019-04-14 16.57.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224974/478b0030-87f9-8c00-e829-7970e2896102.png)

WOW!
全然nuxt感がない。
Buefyの色が強い。

まあ画面を表示できたのでHELLO　WORLD成功！？

###ディレクトリ構成

![スクリーンショット 2019-04-14 17.03.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224974/2cb07330-c9be-3dc3-f5f5-f844193408d6.png)

詳しい内容は公式ドキュメントを参考にしてください。
特に、ルーティングを機能させるための構成とファイルの命名が重要です。

#Buefyのテーマカラーを上書きして行く
Buefyの紫色って結構特徴的ですよね。
この色がテーマになるケースってあんまりないと思います。
と言うことで、テーマカラーを上書きしていきます。
やり方は、公式に書いてあります。

https://buefy.org/documentation/customization


この記事も日本語でわかりやすい。
nuxt.js(v2)へBuefyを入れた。全部入れでOKだった…嬉しい。
https://qiita.com/amishiro/items/eefc858539bc9af2a60a


assetフォルダー以下にcss/buefy.scssを作成する。
このprimaryの部分をorangeに変えてみる。

```
// Import Bulma's core
@import "~bulma/sass/utilities/_all";

// Set your colors
$primary: orange;
$primary-invert: findColorInvert($primary);
$twitter: #4099FF;
$twitter-invert: findColorInvert($twitter);

// Setup $colors to use as bulma classes (e.g. 'is-twitter')
$colors: (
    "white": ($white, $black),
    "black": ($black, $white),
    "light": ($light, $light-invert),
    "dark": ($dark, $dark-invert),
    "primary": ($primary, $primary-invert),
    "info": ($info, $info-invert),
    "success": ($success, $success-invert),
    "warning": ($warning, $warning-invert),
    "danger": ($danger, $danger-invert),
    "twitter": ($twitter, $twitter-invert)
);

// Links
$link: $primary;
$link-invert: $primary-invert;
$link-focus-border: $primary;

// Import Bulma and Buefy styles
@import "~bulma";
@import "~buefy/src/scss/buefy";
```

nuxt.config.jsを編集

```
  /*
   ** Global CSS
   */
  css: ['~/assets/css/buefy.scss'],
```

##注意点
ここでの注意点は２つあります。

1.サーバーの再起動
nuxt.config.jsをいじったあとは、serverを再起動しないと正常に機能しないことがあります。
開発中は変更に応じて画面が勝手にリロードしていくので、再起動は必要ないものだと思ってました。
しかし、勝手にビルドされるのは、クライアント側のみでサーバー側はそうでもないみたいです。

2.sass-loaderのインストール
このパッケージが入っていないとscssファイルを読み込んでくれません。

```
yarn add node-sass sass-loader
```

で入ります。


##確認
もう一度ウェブサイトを確認します。
このように表示されていれば成功です。

![スクリーンショット 2019-04-14 19.44.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224974/7392b4cd-3351-c0ae-0feb-d69fed3e63db.png)

#まとめ

今回は、nuxt.jsとBuefyでHello Worldをしてみました。
もっと気になる人は、vue,nuxt,Buefyの公式ドキュメントを一通り読んでみるのもいいと思います。わかりやすいです。

#おまけ

entershareは、一緒に開発を進める仲間を募集しています！
もくもく会もやってるので是非遊びに来てください！！

イベントの例
https://www.wantedly.com/projects/301269

![e286179e-59de-45bd-bb09-9ff774e76308.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224974/e48e7582-dac4-23ae-fff0-ef9192741ed5.jpeg)