Vue.jsとmarked.jsでリアルタイムプレビューできるマークダウンエディタの作成

: 2019-05-01 | : 2021-03-10

次の案件でVue.jsかAngularのどちらかを使うことになりそうなので、GW中にキャッチアップしようと思い、学習コストが低そうなVue.jsから取り組むことにしました。

さっそく簡単なアプリを作ったので記事にまとめます。

制作物の概要

下図のようなマークダウンエディタを作成しました。

画像で確認すると一見スゴそうに見えますが、Vue.jsとmarked.jsに頼った実装なのでコーディング量も少なく、まったく大したことはしていません。むしろこんな簡単に実装できるのかという驚きがあります。Vue.jsおそるべし。。

ディレクトリ構成

markdown_editor
├── index.html
├── script.js
└── style.css

index.html

今回はお試しだったのでCDNで読み込んでいます。本番は多分 npm install してWebpackでバンドルします。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue.js-Markdown-Editor</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container" id="app">
        <nav class="navbar">
            <h1 class="title">Markdown Editor</h1>
        </nav>
        <div class="columns">
            <div class="column is-6" id="input-field-wrapper">
                <h2><i class="fas fa-edit"></i> Input</h2>
                <textarea class="textarea"
                    name="input-field"
                    id="input-field"
                    v-model="input">
                </textarea>
            </div>
            <div class="column is-6" id="preview-field-wrapper">
                <h2><i class="fas fa-eye"></i> Preview</h2>
                <div id="preview-field" class="content" v-html="convertMarkdown"></div>
            </div>
        </div>
    </div>

    <script defer src="https://use.fontawesome.com/releases/v5.8.1/js/all.js" integrity="sha384-g5uSoOSBd7KkhAMlnQILrecXvzst9TdC09/VM+pjDTCM+1il8RHz5fKANTFFb+gQ" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.4.0/marked.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <script src="script.js"></script>
</body>
</html>

style.css

#input-field-wrapper,
#preview-field-wrapper {
    height: calc(100vh - 52px);
}
#input-field-wrapper #input-field,
#preview-field-wrapper #preview-field {
    height: calc(100%!r(MISSING)em);
    overflow-wrap: break-word;
    overflow: scroll;
}

script.js

Vue.jsの勉強が目的だったはずなのに、書いたスクリプトはたったこれだけという。。

new Vue({
    el: '#app',// index.htmlでid="app"となっている要素（エレメント）を指定
    data: {
        input: ''// index.htmlでv-model="input"が付与されている要素と双方向データバインディングされている。
    },
    computed: {
        convertMarkdown: function() {
            // index.htmlでv-html="convertMarkdown"が付与されている要素（エレメント）とバイディングされている。
            // 入力されたデータをHTMLに変換して表示させる。
            return marked(this.input);
        }
    }
})

まとめ

Vue.jsはとにかく簡単にフロントサイドを構築できるライブラリということがわかりました。めちゃくちゃ便利です。シンプルなWebアプリケーションのフロントを整えるのに最適かと思います。

しかし簡単に使えるということは参入障壁が低いことも意味しているわけで、より複雑なアプリケーションを作りたいとか、もっと上を目指すならAngularかReactをメインで使えるようになった方がいいかもですね。