Nuxt.js で CoffeeScript を使う

📌 はじめに

AltJS の中でも CoffeeScript はオワコン（オワコンがオワコン）と言われていて、 現代の主流は TypeScript かと思います。

VanillaJS も今や良い感じになってきていて、 AltJS を利用しなくても良い程です。

しかし、 Vue.js で JavaScript を書くと , や {} だらけになったり return や改行が多くなったり、私は発狂しそうになります。

そんな時に、私の発狂を収めてくれたのが CoffeeScript です。

参考程度に、Vue.js で扱う JavaScript を CoffeeScript で書いたらどんな感じになるのか載せておきます。

📝JavaScript

import AppLogo from '~/components/AppLogo.vue';

export default {
  name: 'index',
  data: function() {
    return {
      textNuxt: 'Nuxt.js',
      textCoffee: 'CoffeeScript'
    };
  },
  methods: {
    exclamationMarkText: function(text) {
      return text + '!!';
    }
  },
  components: AppLogo
};

☕️CoffeeScript

import AppLogo from '~/components/AppLogo.vue'

export default
  name: 'index'
  data: ->
    textNuxt: 'Nuxt.js'
    textCoffee: 'CoffeeScript'
  methods:
    exclamationMarkText:(text) -> text + '!!'
  components:
    'app-logo': AppLogo

超スッキリ！！！！！！

というわけで、私が最近お気に入りの Nuxt.js で CoffeeScript を使うための方法をご紹介したいと思います。

📌 前提条件（環境情報）

対象	バージョン
Node.js	11.2.0
Vue CLI	2.9.6
yarn	1.5.1
Nuxt.js	2.0.0
CoffeeScript	2.3.2

※ Node.js と Vue CLI は事前にインストールしておいてください。
※ Vue CLI が v3 の場合、 @vue/cli-init のインストールも必要です（ vue init コマンドの実行に必要）。
※ yarn は npm でもかまいません。

📌 Nuxt.js に CoffeeScript を導入

プロジェクトの作成

まずは、 Nuxt.js のスターターテンプレートからプロジェクトを作成します。

vue init nuxt-community/starter-template use-coffee-in-nuxt

※プロジェクト名はお好きにどうぞ

作成したプロジェクトディレクトリに移動します。

cd use-coffee-in-nuxt

CoffeeScript と loader をインストール

ここで CoffeeScript をプロジェクトに導入します。
合わせて、 CoffeeScript を CoffeeScript と解釈してもらえるように loader も入れます。

yarn add --dev coffeescript coffee-loader

※開発環境にのみ追加

CoffeeScript のビルド設定

nuxt.config.js ファイル内の下記をコメントアウトします。

// loader: 'eslint-loader',

nuxt.config.js ファイル内に下記を追加します。

config.module.rules.push({
  test: /\.coffee$/,
  use: 'coffee-loader',
  exclude: /(node_modules)/
})

build 部分がこんな感じになればOKです。

build: {
  /*
  ** Run ESLint on save
  */
  extend (config, { isDev, isClient }) {
    if (isDev && isClient) {
      config.module.rules.push({
        enforce: 'pre',
        test: /\.(js|vue)$/,
        // loader: 'eslint-loader',
        exclude: /(node_modules)/
      })
    }
    config.module.rules.push({
      test: /\.coffee$/,
      use: 'coffee-loader',
      exclude: /(node_modules)/
    })
  }
}

CoffeeScript で書いたコードが動くか確認

では、実際に CoffeeScript を書いてみて、動作するか確認してみましょう。

まず、index.vue 内の script タグ に言語を指定します。

<script lang="coffee">
．．．
</script>

CoffeeScript のコードを書いてみます。
例として template タグと script タグ内のコードを記載しておくので、まるまるコピペしてもOKです。

<template>
  <section class="container">
    <div>
      <app-logo/>
      <h1 class="title">
        use-coffee-in-nuxt
      </h1>
      <h2 class="subtitle">
        {{ textNuxt }} + {{ exclamationMarkText(textCoffee) }}
      </h2>
      <div class="links">
        <a
          href="https://nuxtjs.org/"
          target="_blank"
          class="button--green">Documentation</a>
        <a
          href="https://github.com/nuxt/nuxt.js"
          target="_blank"
          class="button--grey">GitHub</a>
      </div>
    </div>
  </section>
</template>

<script lang="coffee">
import AppLogo from '~/components/AppLogo.vue'

export default
  name: 'index'
  data: ->
    textNuxt: 'Nuxt.js'
    textCoffee: 'CoffeeScript'
  methods:
    exclamationMarkText:(text) -> text + '!!'
  components:
    'app-logo': AppLogo
</script>

そしたら、開発環境を立ち上げて実際の画面で確認してみましょう！

yarn run dev

http://localhost:3000 にアクセスして、画面が表示されれば成功です🎉

📌coffee ファイルの様々な利用方法

せっかく CoffeeScript を導入できたので、 vue ファイル以外も CoffeeScript で書きたいですよね。
そこで、Nuxt.js （Vue.js） が提供する様々な機能で、 CoffeeScript を利用する例をご紹介します。

mixin

mixin として提供したいコンポーネントを coffee ファイルで作成し、利用したいコンポーネントで import するだけです。
js ファイルが coffee ファイルになっているだけで、やり方は変わりませんね。

一応、実装例を載せておきます。

まず、 mixin で使うコンポーネントを実装します。 /components/LinksMixin.coffee

export default
  data: ->
    links: {
      nuxtjs: 'https://nuxtjs.org/'
      github: 'https://github.com/nuxt/nuxt.js'
    }
  methods:
    getLink:(type) -> @links[type]

index.vue で mixin を読み込みます。

<script lang="coffee">
import AppLogo from '~/components/AppLogo.vue'
import LinksMixin from '~/components/LinksMixin.coffee' # ← 追加

export default
  name: 'index'
  mixins: [ LinksMixin ] # ← 追加
  data: ->
    textNuxt: 'Nuxt.js'
    textCoffee: 'CoffeeScript'
  methods:
    exclamationMarkText:(text) -> text + '!!'
  components:
    'app-logo': AppLogo
</script>

template タグ内にある ボタン部分を mixin で定義してあげた内容に置き換えます。

<div class="links">
  <a
    :href="getLink('nuxtjs')" // ← 修正
    target="_blank"
    class="button--green">Documentation</a>
  <a
    :href="getLink('github')" // ← 修正
    target="_blank"
    class="button--grey">GitHub</a>
</div>

後は画面で確認すれば、それぞれのボタンにリンクが設定されているはずです。

plugin

こちらも基本的には js ファイルでやる時と変わらないですが、一つだけ注意点があります。
plugin を利用する際は、 nuxt.config.js ファイルに読み込む plugin を記載すると思いますが、 coffee ファイルの場合は 拡張子の記載も必要になります。

nuxt.config.js ファイルの設定例です。
js ファイルを読み込む場合

plugins: [
  '~plugins/element-ui',
  '~plugins/datastore',
  '~plugins/service',
],

coffee ファイルを読み込む場合

plugins: [
  '~plugins/element-ui.coffee',
  '~plugins/datastore.coffee',
  '~plugins/service.coffee',
],

store

Nuxt.js での store 利用方法は、「クラシックモード」と「モジュールモード」の2種類ありますが、どちらも js 拡張子のファイルしか認識してくれません。

なので、残念ながら coffee ファイルでの実装は厳しそうです😭
※実際にやってみましたがやっぱダメでした…。
※ js ファイルで実装すれば普通に動く

ja.nuxtjs.org

事前に coffee ファイルを js ファイルにトランスパイルしておけばいけそうですが、 それはまた別の機会にやってみようと思います。

📌 さいごに

サーバーサイドで Ruby を使っていたりすると、 CoffeeScript は書きやすいと思います。
また、 Pug や Sass などと組み合わせれば、統一感が出てより一層スッキリしたコードが書けそうです。

コードの見栄えが気になる…。
記号をいっぱい書きたくない…。
って方は是非使ってみてください！

最後に、サンプルとして作ったソースを載せておきます。

github.com