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
26
Electronで作るおれおれマークダウンエディタ
Electronでマークダウンエディタを自作した話です。
cistLT by Dec 15, 2021
yud0uhu
December 15, 2021
Tweet
Share
More Decks by yud0uhu
See All by yud0uhu
早朝の渋谷の青さ、あるいは溺れた人を助ける為に飛び込んだ海の向こう側に見る、自己覚知と自己開示の尊さ
yud0uhu
1
330
動画配信サービスのフロントエンド実装に学ぶ設計原則
yud0uhu
1
310
非デザイナーのフロントエンドエンジニアがOOUIを考える
yud0uhu
9
5.5k
2023年の ゼロランタイムCSS in JS⚡️ を考える
yud0uhu
5
4.8k
Vue3/Electronで自作したマークダウンエディタをVue3/Tauriにリプレイスした話
yud0uhu
2
2.8k
入社半年を迎える新米エンジニアがカンファレンス・勉強会から得た学び
yud0uhu
0
990
Next.js×Prisma×GraphQL×Supabase +WASMでブログを自作した話
yud0uhu
0
1.2k
Rustでつくって学ぶProtocol Buffers
yud0uhu
1
170
ブログを自作した話
yud0uhu
1
25
Other Decks in Programming
See All in Programming
Amazon Q CLI開発で学んだAIコーディングツールの使い方
licux
3
180
あまり知られていない MCP 仕様たち / MCP specifications that aren’t widely known
ktr_0731
0
240
SwiftでMCPサーバーを作ろう!
giginet
PRO
2
230
CEDEC 2025 『ゲームにおけるリアルタイム通信への QUIC導入事例の紹介』
segadevtech
3
800
あなたとJIT, 今すぐアセンブ ル
sisshiki1969
0
510
なぜ今、Terraformの本を書いたのか? - 著者陣に聞く!『Terraformではじめる実践IaC』登壇資料
fufuhu
4
520
대규모 트래픽을 처리하는 프론트 개발자의 전략
maryang
0
120
QA x AIエコシステム段階構築作戦
osu
0
250
Android 15以上でPDFのテキスト検索を爆速開発!
tonionagauzzi
0
190
Gemini CLIの"強み"を知る! Gemini CLIとClaude Codeを比較してみた!
kotahisafuru
3
950
管你要 trace 什麼、bpftrace 用下去就對了 — COSCUP 2025
shunghsiyu
0
340
STUNMESH-go: Wireguard NAT穿隧工具的源起與介紹
tjjh89017
0
270
Featured
See All Featured
Optimizing for Happiness
mojombo
379
70k
The Invisible Side of Design
smashingmag
301
51k
Embracing the Ebb and Flow
colly
86
4.8k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
Balancing Empowerment & Direction
lara
1
530
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
Producing Creativity
orderedlist
PRO
347
40k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.4k
What's in a price? How to price your products and services
michaelherold
246
12k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
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作るのも楽しい!