TIS ENGINEER NOTE

ITエンジニアのためのキャリア向上ノウハウブログ

プログラミング

Nuxt.jsで使える便利な設定・書き方をまとめていく

更新日:

存在感と注目度を高めているWebフレームワークであるNuxt.js。

今日はそんなNuxt.jsの開発をスムーズに行うための設定について、紹介していきます。

開発環境の構築は以下の記事で紹介していますので、Nuxt.jsに興味を持っているが、まだ触ったことのない方はこちらの記事を先にご覧になってください。

次世代のWebフレームワークであるNuxt.jsを使ってみる

開発における便利テクニック

ポートの変更

Nuxt.jsの開発環境は基本的にポート3000を使用します。この3000はRuby on Railsなどでも使われている人気のポジションなので、変えておきたいという人も少なくないでしょう。

開発環境におけるポートを変えたい場合は、package.jsonに設定を加えるだけで可能です。

{
    "name": "nuxt-sample",
    "scripts": {
        "dev": "PORT=3333 nuxt"
    },
    "dependencies": {
        "nuxt": "^1.4.1"
    }
}

いじったところはすでに記述してあるscript.devのnuxtの前にPORT=3333を加えた部分です。これだけでyarn(npm) run devを行った時にlocalhost:3000でアクセスできるようになります。

APIリクエストの準備

フロントエンド開発を行っているとほぼ実装することとなるAPIサーバーへのリクエスト処理。大体はaxiosなどのライブラリを使用する箇所で読み込んで使いますが、Nuxt.jsではaxiosのモジュールが用意されているので、そちらを利用することオススメします。こちらを利用することで各種設定や、ヘルパーの設定を柔軟かつシンプルに記載することが可能です。

モジュールのインストールとNuxtのコンフィグファイルに設定を追加するだけで可能です。nuxt.config.jsはスタートテンプレートを使った場合は最初から作成されていますが、フルスクラッチの場合でまだ存在しない場合はプロジェクトディレクトリのトップに作成してから編集して保存しましょう。

yarn add @nuxtjs/axios
module.exports = {
  // 省略
  modules: ['@nuxtjs/axios'],
  axios: {
    // リクエスト先のURLを固定したい場合は以下を設定
    baseURL: 'http://localhost:8888'
  },
  // 省略
};

あとはリクエストするときは以下のように記述することで、効率よくAPI周りの処理を行えるようになります。他にもリクエスト/レスポンスにさいの共通して行いたい処理なども簡単に実装できますので特に強いこだわりがなければNuxtモジュールのaxiosを使用すると開発がスムーズになることでしょう。

GET
this.$axios
      .$get(`user/post`)
      .then(response => {
        // リクエスト成功時の処理
      })
      .catch(error => {
        // リクエスト失敗時の処理
      });
POST
this.$axios
      .$post('usert/post', { title, comment })
      .then(response => {
        // リクエスト成功時の処理
      })
      .catch(error => {
        // リクエスト失敗時の処理
      });
共通処理など
export default function({ store, $axios, redirect }) {
  // リクエスト時にトークンを付与する
  $axios.onRequest(config => {
    if (store.state.user.token) {
      config.headers.common['Authorization'] =
        'Bearer ' + store.state.user.token;
    }
  });

  // 認証エラー時の処理
  $axios.onError(error => {
    if (error.response.status === 401) {
      redirect('/signin');
    }
  });
}

公式ドキュメントでは詳しい設定や使用例を参照することができます。

スタイルシートにsassを使う

vueファイルの中でスタイルを記述する時にcssではなくsassを使いたいということも多いでしょう。そんな時もほとんど手間なく実装可能です。

yarn add -D node-sass sass-loader

上記コマンドを実行すれば、vueファイルにおいて、以下のような記載が可能となります。

<template>
  <h1>Hello world!</h1>
</template>

<style lang="sass">
  h1
    color: red
</style>
<template>
  <h1>Hello world!</h1>
</template>

<style lang="scss">
  h1 {
    color: red;
  }
</style>

fontawesomeを使う

Webフォントとして最も有名どころであり、使いやすさ・種類の豊富さに定評のあるfontawesomeですが、こちらもNuxtで簡単につかうことができます。Nuxtのモジュールにfontawesomeは用意されていますが、そちらが現在バージョン5に対応していないため、通常通りパッケージをインストールする形で導入します。

yarn add @fortawesome/fontawesome-free-webfonts

nuxt.config.jsに以下を記述します。

module.exports = {
    // 省略
    css: [
        '@fortawesome/fontawesome-free-webfonts',
        '@fortawesome/fontawesome-free-webfonts/css/fa-brands.css',
        '@fortawesome/fontawesome-free-webfonts/css/fa-regular.css',
        '@fortawesome/fontawesome-free-webfonts/css/fa-solid.css',
    ],
    // 省略
};

あとはソースコード内で以下のようにアイコンを配置することが可能です。

<template>
  <div>
    <h1>Hello world!</h1>
    <i class="fas fa-check-circle"/>
  </div>
</template>

Normalize.cssを使う

スタイルシートの初期状態をいい感じに調整してくれるNormalize.cssもちょっとした手順で導入することが可能です。

yarn add normalize.css

あとはnuxt.config.jsに以下のように設定を加えることでNormalize.cssの導入が完了します。

module.exports = {
  // 省略
  css: [
    'normalize.css'
  ]
  // 省略
}

まとめ

いかがだったでしょうか。開発を行う前に押さえておきたい設定、プラグインの導入をメインに紹介しました。

この記事で開発の土台はできたかとも思いますので、早速Nuxt.jsでのフロント開発を楽しんでいきましょう。

閲覧いただき、ありがとうございました。

よく読まれている記事

エンジニア入門

2018/8/17

現役エンジニアからみたProEngineerの『エンジニアカレッジ』について

こんにちは、フリーエンジニアのてぃすです。 最近、 どうすればエンジニアになれるのか エンジニアになるためにどんな勉強をしたの? といった質問を受けることが多くなってきました。 エンジニアは高稼働のブラック職業であるという印象も薄れてきて、効率よく稼げる職業としての側面に気付き始めた方が増えてきたということでしょう。 とはいえ全くの未経験からITエンジニアに転向するというのは独学の場合、不可能ではありませんが、かなり難易度の高い挑戦であると言えます。たとえ独学で成し遂げたとしても、よっぽど運がよくない限り ...

続きを読む

エンジニア独立

2019/4/15

ITエンジニアの働き方比較(正社員/派遣/フリーランス)

最近ではITエンジニアの需要が激増し、特にプログラマーを目指す人が増えてきました。 今の時代、プログラマーをはじめとするITエンジニアを仕事として選ぶことは賢明かつ的確な判断と言えるでしょう。 その一方で、世間ではプログラマーの不遇が叫ばれていたり、IT土方などの蔑称で呼ばれていたりします。 それは働き方の選択を誤っているプログラマーがあまりに多いことが原因となっています。 稼げる市場であるということは、依頼主と技術提供者の間に入って、不当に利益を得ようとする存在が増えることに繋がります。そういった存在に ...

続きを読む

エンジニア入門

2018/11/14

○ヶ月でプログラマーになれる vs そんな簡単になれない論争について

こんばんは。フリーエンジニアのてぃすです。 最近TwitterをはじめとするSNSやブログなどで度々繰り返されている 「○ヶ月でエンジニア/プログラマーになれる」という広告や意見に対する、 「エンジニア/プログラマーはそう簡単になれる職業ではない」 という意見から始まる論争。 今日は実際にプログラマーとしてご飯を食べていて、職業エンジニアになるためのノウハウについての記事も投稿している立場から、この一連のやりとりについて意見してみようと思います。 「○ヶ月でエンジニア/プログラマーになれる」という広告・意 ...

続きを読む

エンジニア独立

2019/4/20

【時給2000円以上】経験者が語る派遣エンジニアの魅力

どうも、フリーランスエンジニアのてぃすです。 巷で語られているITエンジニアの働き方といえば、正社員 or フリーランス、というのが主流として語られています。 しかしITエンジニアにとって美味しい働き方がもう1つ存在しています。 それが今回紹介する派遣エンジニアです。 ぼくもフリーランスエンジニアとして独立する前の準備期間に派遣エンジニアを活用しました。 今日はその派遣エンジニアという働き方の魅力と活用方法について紹介していきます。 派遣エンジニアとは 今回紹介する派遣エンジニアという働き方を一言で表すと ...

続きを読む

エンジニア独立

2019/5/30

SIer・SESからWEB系エンジニアにキャリアチェンジする現実的な方法

エクセルで作らされる誰が読むかも分からないドキュメント 月に1回の帰社日 枯れた技術を言われた通りに扱うだけの毎日 スーツ勤務で下級労働者扱い SIer・SES系エンジニアとしての業務経験があり、かつ外の世界を知ったエンジニアから見たSIer・SES系のイメージってこんな感じですよね。 ここで言う外の世界の代表格と言えばWEB系ベンチャーやフリーランス。 カテゴライズの厳密さについては色々と意見はありますが、いわゆる自社サービスで利益を立てている企業と言えば分かりやすいでしょう。 最近ではエンジニアの待遇 ...

続きを読む

-プログラミング
-,

Copyright© TIS ENGINEER NOTE , 2019 All Rights Reserved Powered by AFFINGER5.