【JavaScript】モジュールのimportとexport

※本サイトで紹介している商品・サービス等の外部リンクには、アフィリエイト広告が含まれる場合があります。

目次表示

モジュールとは
ファイルに切り分ける

目次へ

モジュールとは

ソースコードは長くなりがち。。

長くなったソースコードの中からメソッドを切り分けたり、ファイルを分割する

それを読み込むためにモジュールを使う

ファイルに切り分ける

app/javascript/modulesの中に、handle_heart.jsのファイルを作る

「いいね」するとアイコン表示が切り替わるコードを、ファイルに切り分ける

const listenInactiveHeartEvent = (articleId) => {
  $('.inactive-heart').on('click', () => {
    axios.post(`/articles/${articleId}/like`)
      .then((response) => {
        if (response.data.status === 'ok') {
          $('.active-heart').removeClass('hidden')
          $('.inactive-heart').addClass('hidden')
        }
      })
      .catch((e) => {
        window.alert('Error')
        console.log(e)
      })
    })
}

const listenActiveHeartEvent = (articleId) => {
  $('.active-heart').on('click', () => {
    axios.delete(`/articles/${articleId}/like`)
      .then((response) => {
        if (response.data.status === 'ok') {
          $('.active-heart').addClass('hidden')
          $('.inactive-heart').removeClass('hidden')
        }
      })
      .catch((e) => {
        window.alert('Error')
        console.log(e)
      })
    })
}

その際、ふたつのメソッドが定義される

listenInactiveHeartEvent
listenActiveHeartEvent

exportして使えるようにする

もとのarticle.jsで使いたいので、handle_heart.jsの最下部にexportしたいメソッドを書く

export {
  listenInactiveHeartEvent,
  listenActiveHeartEvent
}

jsのバージョンによっては以下のように書かないと動かない

export {
  listenInactiveHeartEvent: listenInactiveHeartEvent,
  listenActiveHeartEvent: listenActiveHeartEvent
}

プロパティ名＝値の場合、基本は省略できる

railsだと省略して書いても大丈夫らしい

importして使う

article.jsにて、使いたいところにメソッドを書く

  axios.get(`/articles/${articleId}/like`)
  .then((response) => {
    const hasLiked = response.data.hasLiked
    handleHeartDisplay(hasLiked)
  })

  listenInactiveHeartEvent(articleId)
  listenActiveHeartEvent(articleId)

引数をちゃんと渡すこと

export default ●●

以下のコードはhandle_heart.jsにも必要

import $ from 'jquery'
import axios from 'axios'
import { csrfToken } from 'rails-ujs'

axios.defaults.headers.common['X-CSRF-Token'] = csrfToken()

ただarticle.jsにもhandle_heart.jsにも同じコードが書いてあるので、新たなファイルaxios.jsを作る

import axios from 'axios'
import { csrfToken } from 'rails-ujs'

axios.defaults.headers.common['X-CSRF-Token'] = csrfToken()

export default axios

このとき、import $ from 'jquery'は切り分けずに残しておく

handle_heart.jsとarticle.jsには以下のように書く

import $ from 'jquery'
import axios from 'modules/axios'

import axios from 'modules/axios'だけで、axios.jsのファイルがすべて読み込まれる

defaultと書いてあるものをimportするとき、{}が不要になる

#DAY8