マークダウンを外して投稿一覧を表示する

Question

前提・実現したいこと

Qiitaの様なナレッジベースサイトを作っています。すでに、新規のコンテンツ投稿時にマークダウン形式で入力ができる機能を実装できています。

現在、投稿の「一覧」を表示するページを製作中にて、マークダウンを外したテキストを表示させたいのですが、どう実装すれば良いのかわからず、困っています。

以下の、マークダウンをつける方は、無事に実装済みです。

• マークダウンへの変換にはmarked.jsを導入
• 入力時のリアルタイムプレビューも実装
• マークダウンの付いたオリジナルテキストをデータベースへ保存
• 投稿記事の詳細ページでは、データベースから呼び出した後にhtml化して画面に表示させる

発生している問題・エラーメッセージ

現状は、以下の画像の通りで、マークダウンの特殊記号が付いたテキストをそのまま返しています。

マークダウンを外すモジュールには、remove-markdown.jsを使用しており、jsファイルに直打ちでマークダウンの付いたテキストを入れると、マークダウンが外れた状態で表示されるので、モジュール自体は問題なく動作しています。

必要なのは、投稿の一覧を表示するviewファイルから、モジュールのコードのあるjsファイルまでテキストを投げてあげて、マークダウンを外したテキストを、再び一覧のviewファイルに戻してあげるということだと思うのですが、実装の方法がよくわかりません。

該当のソースコード

一覧を表示させるページです。 @foreach ($posts as $post)で、投稿毎にボディテキスト、タイトル、投稿日時などを表示させています。

この投稿一件ごとの処理の間（ @foreach の中）で、ボディテキストを取得して、マークダウンを外す処理を入れてあげる様なイメージをしているのですが、この途中でスクリプトを書き込む（インナースクリプト？）ことは問題ないのでしょうか？　

全く別のやり方、例えば文章全体をロードした後に、全部からマークダウンを外す処理を全部にかける？とかがあるでしょうか。教えていただけると嬉しいです。

@extends('layouts.app')

@section('content')
    <div class="container mt-4">

        <div class="mb-4">
            <a href="{{ route('posts.create') }}" class="btn btn-primary">
                投稿を新規作成する
            </a>
        </div>

        @foreach ($posts as $post)
            <div class="card mb-4">
                <div class="card-header">
                    タイトル: {{ $post->title }}
                    投稿者: 
                    <a href="{{ route('users.show', ['username' => $post->user->name]) }}">
                        {{ $post->user->name }}
                    </a>
                </div>

                <div class="card-body">
                    <p class="card-text">
                        {{-- 投稿のボディテキストの一部を表示させている --}}
                        <li> {{ \Illuminate\Support\Str::limit($post->body, 140) }}
                    </p>

                    {{-- <script>
                        ここら辺で、remove-markdown.jsを呼び出しているjsファイルへテキストを投げて、結果を受け取る処理を入れるイメージでしょうか？
                    </script> --}}

             
                    <a class="card-link" href="{{ route('posts.show', ['post' => $post]) }}">
                        続きを読む
                    </a>
                    <p class="card-text">
                        @foreach ($post->tags as $tag) 
                            <a href="{{ route('tags.show', ['id' => $tag]) }}">
                                #{{ $tag->name }}
                            </a>
                        @endforeach 
                    </p>
                </div>

                <div class="card-footer">
                    <span class="mr-2">
                        投稿日時 {{ $post->created_at->format('Y.m.d') }}
                    </span>
                    @if ($post->comments->count())
                        <span class="badge badge-primary">
                            コメント {{ $post->comments->count() }}件
                        </span>
                    @endif
                </div>

            </div>
        @endforeach

        {{-- ページネーション --}}
        <div class="d-flex justify-content-center mb-5">
            {{ $posts->links() }}
        </div>

    </div>
@endsection


@section('javascript-footer')
  {{-- この場所に画面毎(フッタ位置)のjsを記述する --}}
@endsection

補足情報（FW/ツールのバージョンなど）

Laravel6のフレームワークを使用しています、表側はjQuery(javascript)で実装しています。マークダウンとリマークダウンでは以下のモジュールを使用しています。

• marked.js
• remove-markdown.js

どうぞよろしくお願いします。

Answer 1

いったんマークダウン記法をパーサでHTMLにした後、PHP の strip_tags() で html を取り除けば良いと思います。

https://www.php.net/manual/ja/function.strip-tags.php

Comments

[AkiYanagimoto]

なるほど！そういう発想もあるんですね。strip_tags()知りませんでした、ありがとうございます！

Answer 2

この投稿一件ごとの処理の間（ @foreach の中）で、ボディテキストを取得して、マークダウンを外す処理を入れてあげる様なイメージをしているのですが、この途中でスクリプトを書き込む（インナースクリプト？）ことは問題ないのでしょうか？　

ビューの中でロジックをガリガリ書くのは可読性が悪くなるので
データ取得時、コントローラ内で置換しては如何でしょうか。
ただ、確かに2回回すことになるのでパフォーマンス面が気になるのは分からなくもないですが、
一覧取得だけであればそう一気に何万件も表示させるわけではないでしょうし。
（いずれにしても共通の処理関数作ることになりそうなので、ビューのループ内でその関数通すのもありと言えばあり）

teratailも20件ずつの表示ですし、何なら同じようにタイトルだけ表示にして
そもそも置換するという作業をしなくても良いようにする、、、、というのも
設計段階で考えても良いように思います。
要は「一覧で中も表示させてどれだけのメリットがあるか」というのを突き詰めることですね。
teratailは「タイトルだけでどういう要件が伝わるようにしよう」というのがガイドラインにあるので
表示させないようになってると思います。（正確には”なった”。以前は質問本文冒頭が表示されていた）

Comments

[AkiYanagimoto]

// 一覧取得だけであればそう一気に何万件も表示させるわけではないでしょうし。
（いずれにしても共通の処理関数作ることになりそうなので、ビューのループ内でその関数通すのもありと言えばあり）
心配していた、パフォーマンスへの影響に付いてアドバイス頂けたので、ホッとしました。view内で外部ファイルに書いた処理関数を呼び出す形で実装しようと思います。

// 要は「一覧で中も表示させてどれだけのメリットがあるか」というのを突き詰めることですね。
そうですね、その辺りから、必要性は考えてみたほうがいいかもしれませんね。俯瞰的なアドバイスをありがとうございました！！

[m.ts10806]

> view内で外部ファイルに書いた処理関数を呼び出す形で実装しようと思います。
「ありといえばあり」という表現の裏側を伝えてなかったのでこちらも悪いのですが、
「やりやすそうだからと安易に選択しない方が良い」という意味合いもあります。
結局のところ、あまりviewにロジックを書くのは悪手です。

[AkiYanagimoto]

そういうことでしたか・・・勘違いしてしまいました。
＞コントローラー内で置換するとは、どういうことでしょうか？コントローラーから直接jsファイルにデータを投げて処理、その後viewへ渡す、みたいなことですか？

[AkiYanagimoto]

一度、解決済みとしてしまいましたが、全くできていませんでした。

一覧表示のviewファイル(index.blade.php)の冒頭にて、一度に表示させる１０件分の投稿データ($posts)をjson形式でjsファイル(jquery.plaintext.js)へ渡し、jsファイル内でマークダウンを外す処理をした後、再びviewファイルへ戻すというやり方でトライしています。コードは以下の様な形です。

// index.blade.php
@section('javascript-head')
{{-- この場所に画面毎(ヘッダ位置)のjsを記述する --}}
<script>
const markdown = @json($posts);
</script>
<script src="{{ asset('js/assets/jquery.plaintext.js') }}" defer></script>
@endsection

//jquery.plaintext.js'
const removeMd = require('remove-markdown'); //remove-markdown.jsの呼び出し

// postsからpostを取り出し、bodyにremoveMdをかけて加工し、再びpostオブジェクトに戻す
$(function () {
const posts = markdown.data; // index.blade.phpから10件分の投稿データを受け取る
posts.forEach(function (post) {
post.body = removeMd(post.body);
});
console.log(posts);
// ここから、index.blade.phpへ配列を戻す方法がわからない
})

console.log(posts);で、マークダウンを外したplain textまで戻せているんですが、ここから、index.blade.phpへ配列を戻す方法がよくわかりません・・・。

[m.ts10806]

ひとまず「受付中」に戻しておいてください。

[AkiYanagimoto]

すみません。teratailに質問するのも初めてなど素人なもので。「受付中」に戻す方法がわからず・・・。必要であれば、別立てで質問を投稿し直します。