Electronで作るおれおれマークダウンエディタ

Electronでマークダウンエディタを自作した話です。
cistLT by Dec 15, 2021

Transcript

1. Electronで作るおれおれ マークダウンエディタ 0yu@yud0uhu
2. 自己紹介 0yu(ゼロユー)です。 よくおゆさんといわれます。 リアルでもよくおおともさんといわれます。 アイコンが安定しない人で知られています（？）
3. テキストエディタ、何つかってますか？
4. 入門！Electron
5. Electronって？ - GitHub社製のクロスプラットフォームアプリ開発フレームワー ク - Webの技術(JS,HTML,CSS)でデスクトップアプリを開発できる ↓Electronで作られてるよ！↓
6. Electronの特徴 - Chromiumエンジンを利用して、WEBページをネイティブアプリ として動かす - OSネイティブのAPIを扱うメインプロセス と、ブラウザで表示さ れる画面(htmlファイル)の数だけレンダリングを行うレンダラー プロセスが存在する - プロセス間通信はIPC通信（基本的には非同期）で行う
7. - レンダラプロセス間は通 信できない ⇒プロセス間通信(IPC)が 必要 Electronの特徴
8. ざっくりいうと メインプロセスではNode.jsが使えて、レンダラプロセスでは通常 のJSが使える！
9. 入門！ Vue3・Compotion API
10. このコンポーネントの持つ責務 🤔 1. 適当な外部APIからユー ザー名に対応したリポジトリ を取得して、ユーザーが変 化するたびにそれを更新す る 2. searchQuery 文字列を使用 してリポジトリを検索する 3. filters オブジェクトを使用し てリポジトリを絞り込む
11. このコンポーネントの持つ責務 🤔 1. 適当な外部APIからユー ザー名に対応したリポジトリ を取得して、ユーザーが変 化するたびにそれを更新す る 2. searchQuery 文字列を使用 してリポジトリを検索する 3. filters オブジェクトを使用し てリポジトリを絞り込む
12. このコンポーネントの持つ責務 🤔 1. 適当な外部APIからユー ザー名に対応したリポジトリ を取得して、ユーザーが変 化するたびにそれを更新す る 2. searchQuery 文字列を使用 してリポジトリを検索する 3. filters オブジェクトを使用し てリポジトリを絞り込む
13. なぜCompotionAPIなの？ 論理的な関心事は単一なのに対し、 コンポーネントのオプション (data, computed, methods, watch)は 分離されていて、背景にある論理的な関心事がわかりにくい このようなOptionsAPIのロジックの再利用性の欠如 が、コードの 可読性の低下 に繋がると公式ドキュメントでは指摘されている
14. なぜCompotionAPIなの？ 同じ論理的な関心事に関連するコードを並べたい ⇒CompotisionAPIでは、論理的な関心事をまとめてsetup()関数 内に記述する
15. OptionsAPIとの比較 - propsはref/reactiveに書く - this依存がなくなった(すべて同一関数内のスコープで使用さ れるため、変数や関数の参照にthisを使わなくてよい)
16. OptionsAPIとの比較 ✅ref/reactive ✅computed ✅watch ✅methods ✅ライフサイクルフック これらすべてが同一のスコープ内に記述できる！
17. 使ってわかった！Compotision APIのここがよ い - TypeScriptと相性がよい - Vue2はJavaScriptを標準言語として設計・開発されている ため、TypeScriptの型推論のサポートが不完全 - コンポーネント内のthisの参照先の決め方がプレーンなJS のルールと異なるため、そもそも型推論と相性が悪かった
18. Vue3のデメリット - まだ未対応のライブラリが多い（Vuetifyは非対応） - よくもわるくも自由なので、設計のベストプラクティスがない
19. 作ったもの(デモ)
20. 使用したライブラリ - vue3-markdown-it - highlight.js - TailWindCSS
21. 感想 - Electronの進化のスピードが早く、ドキュメントが追い付いてい ないところもしばしば(dialog moduleを使うためのremote moduleがv14から抹消されていたなど(現行の安定版はv16)) - TS+CompotisonAPIの書き心地が想像以上によき - Webの言語でGUI作るのも楽しい！