📌 はじめに
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 ファイルで実装すれば普通に動く
事前に coffee ファイルを js ファイルにトランスパイルしておけばいけそうですが、 それはまた別の機会にやってみようと思います。
📌 さいごに
サーバーサイドで Ruby を使っていたりすると、 CoffeeScript は書きやすいと思います。
また、 Pug や Sass などと組み合わせれば、統一感が出てより一層スッキリしたコードが書けそうです。
コードの見栄えが気になる…。
記号をいっぱい書きたくない…。
って方は是非使ってみてください!
最後に、サンプルとして作ったソースを載せておきます。