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

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

自己紹介 0yu(ゼロユー)です。よくおゆさんといわれます。リアルでもよくおおともさんといわれます。アイコンが安定しない人で知られています（？）

テキストエディタ、何つかってますか？

入門！Electron

Electronって？ - GitHub社製のクロスプラットフォームアプリ開発フレームワーク - Webの技術(JS,HTML,CSS)でデスクトップアプリを開発できる ↓Electronで作られてるよ！↓

Electronの特徴 - Chromiumエンジンを利用して、WEBページをネイティブアプリとして動かす - OSネイティブのAPIを扱うメインプロセスと、ブラウザで表示される画面(htmlファイル)の数だけレンダリングを行うレンダラープロセスが存在する -
プロセス間通信はIPC通信（基本的には非同期）で行う

- レンダラプロセス間は通信できない ⇒プロセス間通信(IPC)が必要 Electronの特徴

ざっくりいうとメインプロセスではNode.jsが使えて、レンダラプロセスでは通常のJSが使える！

入門！ Vue3・Compotion API

このコンポーネントの持つ責務 🤔 1. 適当な外部APIからユーザー名に対応したリポジトリを取得して、ユーザーが変化するたびにそれを更新する 2. searchQuery
文字列を使用してリポジトリを検索する 3. filters オブジェクトを使用してリポジトリを絞り込む

なぜCompotionAPIなの？論理的な関心事は単一なのに対し、コンポーネントのオプション (data, computed, methods, watch)は分離されていて、背景にある論理的な関心事がわかりにくいこのようなOptionsAPIのロジックの再利用性の欠如が、コードの
可読性の低下に繋がると公式ドキュメントでは指摘されている

なぜCompotionAPIなの？同じ論理的な関心事に関連するコードを並べたい ⇒CompotisionAPIでは、論理的な関心事をまとめてsetup()関数内に記述する

OptionsAPIとの比較 - propsはref/reactiveに書く - this依存がなくなった(すべて同一関数内のスコープで使用されるため、変数や関数の参照にthisを使わなくてよい)

OptionsAPIとの比較 ✅ref/reactive ✅computed ✅watch ✅methods ✅ライフサイクルフックこれらすべてが同一のスコープ内に記述できる！

使ってわかった！Compotision APIのここがよい - TypeScriptと相性がよい - Vue2はJavaScriptを標準言語として設計・開発されているため、TypeScriptの型推論のサポートが不完全 - コンポーネント内のthisの参照先の決め方がプレーンなJS
のルールと異なるため、そもそも型推論と相性が悪かった

Vue3のデメリット - まだ未対応のライブラリが多い（Vuetifyは非対応） - よくもわるくも自由なので、設計のベストプラクティスがない

作ったもの(デモ)

使用したライブラリ - vue3-markdown-it - highlight.js - TailWindCSS

感想 - Electronの進化のスピードが早く、ドキュメントが追い付いていないところもしばしば(dialog moduleを使うためのremote moduleがv14から抹消されていたなど(現行の安定版はv16)) - TS+CompotisonAPIの書き心地が想像以上によき - Webの言語でGUI作るのも楽しい！

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

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

yud0uhu

More Decks by yud0uhu

Other Decks in Programming

Featured

Transcript