Vue.jsでesa風Markdownエディタを作成してみた

42160c5fcea5c8ca043b6f79926c61d5?s=47 minase
January 19, 2019

 Vue.jsでesa風Markdownエディタを作成してみた

@[toc](index)

## 自己紹介

- 氏名     水無瀨 忠正(ミナセ タダマサ)
- 年齢     27歳
- 出身地    兵庫県 神戸市
- Vue.jsの経験   業務で使い始めて4ヶ月程
- 所属組織   株式会社 神戸デジタル・ラボ

![logo.jpg](https://firebasestorage.googleapis.com/v0/b/vue-markdown-5dbad.appspot.com/o/images%2F-LW1_akmYRlZsPt18FyP%2Flogo.jpg?alt=media&token=02640c0c-e15f-4d4e-ba30-af1ab959cb0a)

## 本日お話すること
Vue.jsでesa.io風のMarkdownエディタを
作成してみての感想や躓いたところについて

## esa.ioについて

esa社が提供する「情報を育てる」
という視点で作られた、
自律的なチームのための情報共有サービス

Markdownエディタや、スライド機能等
文章共有に必要な豊富な機能を備えている
![esalogo.png](https://firebasestorage.googleapis.com/v0/b/vue-markdown-5dbad.appspot.com/o/images%2F-LW1_akmYRlZsPt18FyP%2Fesa-logo.png?alt=media&token=990f1060-5a96-47ff-93b9-6b84e5fe70d5)

## 作成動機
esa.ioを社内で利用していて、便利だなぁと思う

有料なので個人利用では無料で使いたい..:s

似たようなツールはあるけど、
せっかくVueに慣れてきたので
腕試し的に開発してみよう!

## デモ

実際に触ってみる

## 主に使用した技術要素

- Vue.js
- FIrebase
- Hosting
- Authentication
- Realtime Database
- Storage
![図1.png](https://firebasestorage.googleapis.com/v0/b/vue-markdown-5dbad.appspot.com/o/images%2F-LW1_akmYRlZsPt18FyP%2F%E5%9B%B31.png?alt=media&token=94397dc9-e02f-4bb3-882b-468ce6c11837)

## 使用したライブラリ

- vue-moment(日付変換等)
- mavon-editor(markdownエディタ)
- vue-katex(数式表示)
- reveal.js(スライド表示)
- vuex(状態管理)
- vue-router(ルーティング)
- vuetify(デザインフレームワーク)

## 感想

Vue.jsの良い部分を改めて実感

- 双方向データバインディングと、
ディレクティブが直観的でわかりやすい
- Vue CLIでSPAの土台をすぐ作れるので、
開発がスタートしやすい
- Vuetifyで簡単にモダンなUIが作れる

## 苦労したところ

- サードパーティ製ライブラリとの連携
- デバッグ

## 今後追加したい機能

- カテゴリー機能
- 下書き機能
- コメント機能
- 通知機能(SlackやTeams等)

----

**ご清聴ありがとうございました**

42160c5fcea5c8ca043b6f79926c61d5?s=128

minase

January 19, 2019
Tweet