Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Electronで作るおれおれマークダウンエディタ
Search
yud0uhu
December 15, 2021
Programming
1
21
Electronで作るおれおれマークダウンエディタ
Electronでマークダウンエディタを自作した話です。
cistLT by Dec 15, 2021
yud0uhu
December 15, 2021
Tweet
Share
More Decks by yud0uhu
See All by yud0uhu
動画配信サービスのフロントエンド実装に学ぶ設計原則
yud0uhu
1
290
非デザイナーのフロントエンドエンジニアがOOUIを考える
yud0uhu
9
5.3k
2023年の ゼロランタイムCSS in JS⚡️ を考える
yud0uhu
5
4.7k
Vue3/Electronで自作したマークダウンエディタをVue3/Tauriにリプレイスした話
yud0uhu
2
2.6k
入社半年を迎える新米エンジニアがカンファレンス・勉強会から得た学び
yud0uhu
0
960
Next.js×Prisma×GraphQL×Supabase +WASMでブログを自作した話
yud0uhu
0
1.1k
Rustでつくって学ぶProtocol Buffers
yud0uhu
1
150
ブログを自作した話
yud0uhu
1
23
Wasmで動くRust製マークダウンパーサーを自作した話
yud0uhu
1
36
Other Decks in Programming
See All in Programming
CQRS/ESのクラスとシステムフロー ~ RailsでフルスクラッチでCQRSESを組んで みたことから得た学び~
suzukimar
0
190
Zennの運営完全に理解した #完全に理解したTalk
wadayusuke
1
140
UPDATEがシステムを複雑にする? イミュータブルデータモデルのすすめ
shimomura
0
170
Babylon.js 8.0のアプデ情報を 軽率にキャッチアップ / catch-up-babylonjs-8
drumath2237
0
110
漸進。
ssssota
0
1.1k
TVer iOSチームの共通認識の作り方 - Findy Job LT iOSアプリ開発の裏側 開発組織が向き合う課題とこれから
techtver
PRO
0
710
DevTalks 25 - Create your own AI-infused Java apps with ease
kdubois
2
120
SpringBootにおけるオブザーバビリティのなにか
irof
1
890
Cloudflare Realtime と Workers でつくるサーバーレス WebRTC
nekoya3
0
230
ワンバイナリWebサービスのススメ
mackee
10
7.4k
複雑なフォームを継続的に開発していくための技術選定・設計・実装 #tskaigi / #tskaigi2025
izumin5210
12
6.3k
Efficiency and Rock 'n’ Roll (Really!)
hollycummins
0
590
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Gamification - CAS2011
davidbonilla
81
5.3k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.5k
Faster Mobile Websites
deanohume
307
31k
Rails Girls Zürich Keynote
gr2m
94
13k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
VelocityConf: Rendering Performance Case Studies
addyosmani
329
24k
The Language of Interfaces
destraynor
158
25k
Stop Working from a Prison Cell
hatefulcrawdad
269
20k
How STYLIGHT went responsive
nonsquared
100
5.6k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.6k
Transcript
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 オブジェクトを使用し てリポジトリを絞り込む
このコンポーネントの持つ責務 🤔 1. 適当な外部APIからユー ザー名に対応したリポジトリ を取得して、ユーザーが変 化するたびにそれを更新す る 2. searchQuery
文字列を使用 してリポジトリを検索する 3. filters オブジェクトを使用し てリポジトリを絞り込む
このコンポーネントの持つ責務 🤔 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作るのも楽しい!