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
27
Electronで作るおれおれマークダウンエディタ
Electronでマークダウンエディタを自作した話です。
cistLT by Dec 15, 2021
yud0uhu
December 15, 2021
Tweet
Share
More Decks by yud0uhu
See All by yud0uhu
Webブラウザ向け動画配信プレイヤーの 大規模リプレイスから得た知見と学び
yud0uhu
0
260
早朝の渋谷の青さ、あるいは溺れた人を助ける為に飛び込んだ海の向こう側に見る、自己覚知と自己開示の尊さ
yud0uhu
1
660
動画配信サービスのフロントエンド実装に学ぶ設計原則
yud0uhu
1
320
非デザイナーのフロントエンドエンジニアがOOUIを考える
yud0uhu
9
5.6k
2023年の ゼロランタイムCSS in JS⚡️ を考える
yud0uhu
5
4.9k
Vue3/Electronで自作したマークダウンエディタをVue3/Tauriにリプレイスした話
yud0uhu
2
2.8k
入社半年を迎える新米エンジニアがカンファレンス・勉強会から得た学び
yud0uhu
0
1k
Next.js×Prisma×GraphQL×Supabase +WASMでブログを自作した話
yud0uhu
0
1.2k
Rustでつくって学ぶProtocol Buffers
yud0uhu
1
190
Other Decks in Programming
See All in Programming
Serena MCPのすすめ
wadakatu
4
900
Чего вы не знали о строках в Python – Василий Рябов, PythoNN
sobolevn
0
160
フロントエンド開発に役立つクライアントプログラム共通のノウハウ / Universal client-side programming best practices for frontend development
nrslib
7
3.9k
ネイティブ製ガントチャートUIを作って学ぶUICollectionViewLayoutの威力
jrsaruo
0
130
どの様にAIエージェントと 協業すべきだったのか?
takefumiyoshii
2
610
CSC305 Lecture 04
javiergs
PRO
0
250
止められない医療アプリ、そっと Swift 6 へ
medley
1
120
ABEMAモバイルアプリが Kotlin Multiplatformと歩んだ5年 ─ 導入と運用、成功と課題 / iOSDC 2025
akkyie
0
330
ポスターセッション: 「まっすぐ行って、右!」って言ってラズパイカーを動かしたい 〜生成AI × Raspberry Pi Pico × Gradioの試作メモ〜
komofr
0
960
大規模アプリのDIフレームワーク刷新戦略 ~過去最大規模の並行開発を止めずにアプリ全体に導入するまで~
mot_techtalk
0
380
株式会社 Sun terras カンパニーデック
sunterras
0
230
アメ車でサンノゼを走ってきたよ!
s_shimotori
0
140
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
697
190k
A designer walks into a library…
pauljervisheath
209
24k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
How to Think Like a Performance Engineer
csswizardry
27
2k
Music & Morning Musume
bryan
46
6.8k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
51k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
Rails Girls Zürich Keynote
gr2m
95
14k
How to Ace a Technical Interview
jacobian
280
24k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
19
1.2k
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作るのも楽しい!