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

@[toc](index)

## 自己紹介

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


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

## esa.ioについて

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

Markdownエディタや、スライド機能等
文章共有に必要な豊富な機能を備えている

## 作成動機
esa.ioを社内で利用していて、便利だなぁと思う
⇩
有料なので個人利用では無料で使いたい..:s
⇩
似たようなツールはあるけど、
せっかくVueに慣れてきたので
腕試し的に開発してみよう！

## デモ

実際に触ってみる

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

- Vue.js
- FIrebase
- Hosting
- Authentication
- Realtime Database
- Storage

## 使用したライブラリ

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

## 感想

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

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

## 苦労したところ

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

## 今後追加したい機能

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

----

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

Transcript

1. View Slide

2. •
   •
   •
   •
   •
   •
   •
   •
   •
   •
   

   View Slide

3. •
   •
   •
   •
   •
   

   View Slide

4. •
   

   View Slide

5. View Slide

6. View Slide

7. View Slide

8. View Slide

9. •
   •
   •
   •
   •
   •
   

   View Slide

10. •
    •
    •
    •
    •
    •
    •
    

    View Slide

11. •
    •
    •
    

    View Slide

12. •
    •
    

    View Slide

13. •
    •
    •
    •
    

    View Slide

14. View Slide