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
16
Electronで作るおれおれマークダウンエディタ
Electronでマークダウンエディタを自作した話です。
cistLT by Dec 15, 2021
yud0uhu
December 15, 2021
Tweet
Share
More Decks by yud0uhu
See All by yud0uhu
動画配信サービスのフロントエンド実装に学ぶ設計原則
yud0uhu
1
240
非デザイナーのフロントエンドエンジニアがOOUIを考える
yud0uhu
9
5k
2023年の ゼロランタイムCSS in JS⚡️ を考える
yud0uhu
5
4.6k
Vue3/Electronで自作したマークダウンエディタをVue3/Tauriにリプレイスした話
yud0uhu
2
2.4k
入社半年を迎える新米エンジニアがカンファレンス・勉強会から得た学び
yud0uhu
0
930
Next.js×Prisma×GraphQL×Supabase +WASMでブログを自作した話
yud0uhu
0
1.1k
Rustでつくって学ぶProtocol Buffers
yud0uhu
1
96
ブログを自作した話
yud0uhu
1
18
Wasmで動くRust製マークダウンパーサーを自作した話
yud0uhu
1
25
Other Decks in Programming
See All in Programming
Introduction to kotlinx.rpc
arawn
0
740
Java Webフレームワークの現状 / java web framework at burikaigi
kishida
9
2.2k
Go 1.24でジェネリックになった型エイリアスの紹介
syumai
1
110
データベースのオペレーターであるCloudNativePGがStatefulSetを使わない理由に迫る
nnaka2992
0
210
新宿駅構内を三人称視点で探索してみる
satoshi7190
2
110
2024年のWebフロントエンドのふりかえりと2025年
sakito
3
260
メンテが命: PHPフレームワークのコンテナ化とアップグレード戦略
shunta27
0
190
Spring gRPC について / About Spring gRPC
mackey0225
0
230
dbt Pythonモデルで実現するSnowflake活用術
trsnium
0
210
ARA Ansible for the teams
kksat
0
160
AIの力でお手軽Chrome拡張機能作り
taiseiue
0
180
SpringBoot3.4の構造化ログ #kanjava
irof
3
1k
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
67
4.6k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.8k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
Scaling GitHub
holman
459
140k
Docker and Python
trallard
44
3.3k
A better future with KSS
kneath
238
17k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Git: the NoSQL Database
bkeepers
PRO
427
64k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
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作るのも楽しい!