【Vue.js】文章冒頭の指定文字数だけ表示し、残りを省略する方法（テキスト末尾を…にする）をわかりやすく解説（read more もっと見る機能の実装方法）

vue-js-prograshi（プロぐらし）-kv Vue.js
2023/10/18
記事内に広告が含まれていることがあります。
[PR]

よくブログ一覧ページなどで見かける、本文の最初の100文字程度を表示して、残りを「…」として省略する方法について実例で紹介しています。

いわゆる「もっと見る」「Read more」機能です。


指定文字数のみ表示し、末尾に「…」をつける方法

Vue.jsで文章の指定文字数のみ表示し、末尾を省略するにはフィルター機能を使います。

フィルターって何？という方は、次章をご参照ください。ここでは先にタイトル結論のフィルターの設定例を紹介します。

フィルターで複数の引数を使う

フィルターで複数の引数を使う記述は次のようになります。

{{ dataプロパティ名 : フィルタ名(引数１, 引数２,,,)}}


指定文字数のみ表示し、末尾に「…」をつける

指定文字数のみ表示して、末尾に「…」をつけるフィルターは以下のようになります。

Vue.filter('readmore', function(text, length, suffix){
    return text.substring(0, length) + suffix
})

フィルター名がreadmoreで、引数にtext, length, suffixの３つをとります。

textが元の文章、lengthが表示させたい文字数、suffixが省略した末尾につける文字列です。

substringメソッドは開始文字の桁数と終了文字の桁数を指定して、指定した箇所の文字だけを抜き出すメソッドです。

substring(0, length)とすると、0文字目から指定した文字数までを抜き出します。（指定した番号は入りませんが、0スタートなので、指定した文字数を抜き出せることになります。）

なお、フィルターに柔軟性をもたせるため、あえて文字数や「…」などは指定していません。HTML側でフィルターを適用するときに指定します。

補足

関数の中に直接文字列や数値などを記載せず、柔軟に変更できるようにしておくことを、ソフトコーディングといいます。

逆に、関数の中に文字列などを直接埋め込むことをハードコーディングといいます。柔軟性がないため、極力ハードコーディングは避けるべきです。


実例

Vue.filter('readmore', function(text, length, suffix){
    return text.substring(0, length) + suffix
})

var app = new Vue({
    el:"#app",
    data: {
        text:  'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
    }
})


HTMLのコード例

<body>
    <div id="app">
        {{ text | readmore(20, '...') }}    
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
    <script src="js/main.js"></script>
</body>

ブラウザの表示

「…」の部分を「…もっと見る」や「… read more＞」とすれば、そのように表示されます。


（参考）substringメソッドとは何か？

指定した文字数だけ抜き出す。
文字列.subtsring(int1, int2)
　┗ int1: 開始の文字数
　┗ int2: 終了の文字数（省略可）


フィルターの作り方

初めにフィルターの作り方と呼びだし方についてまとめておきます。数値の1000桁区切り、円マーク(￥)、ドルマーク($)の設定など答えだけが欲しい場合は読み飛ばしてください。

ローカルフィルタとグローバルフィルタの違いとは何か？

Vue.jsではフィルターを作成するときに、ローカルフィルタとグローバルフィルタという2種類の設定方法があります。

ローカルフィルタは指定したVue.jsのインスタンスでのみ使用できるフィルタです。例えば、テンプレートの指定がel:"#app"のVueインスタンスの中でフィルターを定義した場合、そのフィルターを呼び出せるのは、id=appとなっているVueと紐づいた領域のみです。

それぞれVueファイルのどこに記述するかが異なります。

ローカルフィルタ

特定のインスタンス（ルートテンプレート）内で定義するフィルタ。
filtersオブジェクトとして記述します。

▼jsファイルの記述
filters:{フィルタ名: function(value){return 処理}}

適用例

var app = new Vue({
    el:"#app",
    data: {
        price: 2240000000000        
    },
    filters:{
        numberFormat: function(num){
            return num.toLocaleString()
        }
    }
})

ローカルフィルタを使って作成するのが一般的です。

グローバルフィルタ

グローバルで呼び出せるフィルタ。特定のインスタンスによらず、アプリケーションの中ならどのテンプレートでも呼び出すことができます。

Vueインスタンスに対して、filterメソッドで記述します。

▼jsファイルの記述
Vue.filter(‘フィルタ名’, function(value){return 処理}}

適用例

Vue.filter('numberFormat', function(num){
    return num.toLocaleString()
})

var app = new Vue({
    el:"#app",
    data: {
        price: 2240000000000        
    }
})


HTMLでの呼び出しは同じ

ローカルフィルタもグローバルフィルタもHTMLで呼び出す方法は同じです。次の２つの方法が一般的です。

タグの間で呼び出す場合

<p> と </p>の間でテキストとして呼び出す場合は、Mustache展開（二重の波カッコで囲む）を使います。

{{式 | フィルタ名}}

属性として呼び出す場合

class名など開始タグの中で属性として呼び出す場合は v-bindを使います。

<要素 v-bind:属性="プロパティ名 | フィルタ名">



参考

・Vue.js公式ページ
https://jp.vuejs.org/v2/guide/filters.html



タイトルとURLをコピーしました