@[toc](index)
## 自己紹介
- 氏名 水無瀨 忠正(ミナセ タダマサ)
- 年齢 27歳
- 出身地 兵庫県 神戸市
- Vue.jsの経験 業務で使い始めて4ヶ月程
- 所属組織 株式会社 神戸デジタル・ラボ
## 本日お話すること
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等)
----
**ご清聴ありがとうございました**