Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

入門！Electron

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

入門！ Vue3・Compotion API

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

作ったもの(デモ)

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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