素敵なサムシングを独断と偏見で一方的に紹介するブログ(´・ω・`)

IT

投稿日: 2019年6月15日
最終更新日:

【Nuxt.js】vueファイルからJavaScript(TypeScript)/CSS(Sass)/Template(Pug)を外部ファイル化して読み込む方法【ベストプラクティス?】

ねこじゃすり

created by Rinker
PEPPY(ペピイ)
¥3,850 (2025/01/05 12:56:12時点 Amazon調べ-詳細)

猫を魅了する魔法の装備品!

Anker PowerCor

created by Rinker
Anker
¥3,990 (2025/01/05 12:09:11時点 Amazon調べ-詳細)

旅行には必須の大容量モバイルバッテリー!

ペヤング ソースやきそば 120g×18個

created by Rinker
ペヤング
¥3,280 (2025/01/05 12:33:38時点 Amazon調べ-詳細)

とりあえず保存食として買っておけば間違いなし!

モンスターエナジー 355ml×24本 [エナジードリンク]

created by Rinker
モンスター
¥4,718 (2025/01/05 12:33:40時点 Amazon調べ-詳細)

脳を活性化させるにはこれ!

ドラゴンクエスト メタリックモンスターズギャラリー メタルキング

created by Rinker
スクウェア・エニックス(SQUARE ENIX)
¥3,940 (2025/01/05 12:41:47時点 Amazon調べ-詳細)

みんな大好き経験値の塊をデスクに常備しておこう!

BANDAI SPIRITS ULTIMAGEAR 遊戯王 千年パズル 1/1スケール

created by Rinker
BANDAI SPIRITS(バンダイ スピリッツ)
¥10,429 (2025/01/05 12:09:13時点 Amazon調べ-詳細)

もう一人の僕を呼び覚ませ!!

サンディスク microSD 128GB

スマホからSwitchまで使える大容量MicroSDカード!

スポンサーリンク

336×280




ファイルを細分化しよう

皆さんはNuxt.jsを使って開発をしていますか?

Nuxt.jsを使ってWebアプリケーションを開発していると、デフォルトでは一つのvueファイルの中に様々な記述をすることになると思います。

基本的には、コンポーネントやページ単位で例として以下のような記述でテンプレートが作成されます。

よく見ると、<template>タグのHTML部分<script>タグのJavaScript部分<style>タグのCSS部分3構成になっていますね。

もちろん、このまま手を加えていっても良いのですが、DDD(ドメイン駆動設計)脳としては、コンテキスト単位でファイルを分けたくなってしまいます。。。orz
今回で言うと、HTML/JavaScirpt/CSSの言語単位がコンテキスト境界線ですかね。

細分化は正義。(脳死)

しかしご安心を。

Nuxt.jsでは簡単にそれぞれをファイル分割して読み込むことが可能です。

公式でもこの手法が紹介されています。

ソースのインポート
もし *.vue コンポーネントを複数のファイルに分割したい場合は、src 属性を使って言語ブロック用の外部ファイルをインポートすることが出来ます:Vue Component の仕様 · vue-loader

今回はそのやり方と筆者のサンプルをご紹介しようと思います。

手順

それぞれを外部ファイル化

まずはそれぞれを外部ファイル化していきましょう。

HTML(pug)

まずはHTML部分を外部ファイル化していきましょう。

今回はindex.pugと言う名前で外部ファイル化します。

JavaScript

次にJavaScript部分index.jsと言う名前で外部ファイル化します。

CSS(Sass)

次にCSS部分を外部ファイル化しましょう。
今回はscss記法を使っているので、index.scssとして外部ファイル化します。

それぞれの外部ファイルを読み込む

HTML/JavaScript/CSSの外部ファイル化が出来たらそれぞれをindex.vueから読み込みましょう。

かなりスッキリですね!

確認

では、この状態でサーバーを起動して表示確認をしてみましょう。

正常に読み込まれて表示されましたね♪

終わりに

以上のように、細分化して管理することで、修正範囲や影響範囲を絞る事が出来ました。

一つのファイルにすべて詰め込むのも悪いとは言いませんが、細かく分けた方が保守や開発がしやすくなるので、興味のある方は試してみてください♪

336×280




336×280




CATEGORIES & TAGS

IT, , , , , , , , , , ,

blogenist

Author: blogenist

関連記事

YouTubeも見てね♪