Electron ってなぜいるの？
フロントエンドの開発を始めたばかりの方におすすめの内容です。
Electronは何のためにあって何をするのかわかっている方は戻るボタンをどうぞ…
普段UIを作っているのですが、上司の方から「今回はElectronを使って〜」と言われDocumentを見ながら作ってみたはいいものの…
Electronってなぜ必要なの？？？？？
ということがわかっていませんでした。
なので今回はその理由の一つを、なんとな〜くわかったつもりになったメモ書きです。
自分なりの解釈なので(多分)を多用しています。
Electronとは
Electron は、JavaScript、HTML、CSS によるデスクトップアプリケーションを構築するフレームワークです。
Electron は Chromium と Node.js をバイナリに組み込むことで、単一の JavaScript コードベースを維持しつつ、ネイテイブ開発経験無しでも Windows、macOS、Linux で動作するクロスプラットフォームアプリを作成できます。
…う〜んよくわからない！これが言語理解能力の低い、一年目まだまだひよっこの私の感想でした。
結局言いたいことは(多分)、 「ネイティブアプリでもWebアプリで見るようなUIを使うためのもの！」 ということ。
いやネイティブアプリとWebアプリって何よって思った方は次を読んでみてください。
ネイティブアプリとwebアプリって何が違う？
ざっくりとですが、それぞれの違う点をまとめたものがこちら
| アプリ | 動作する場所 | できること |
|---|---|---|
| ネイティブアプリ | 端末上 | ファイルへの送信などOSの情報と通信可 など |
| Webアプリ | Webブラウザ上 | OSを機にすることなく開発可 など |
詳しくは↓
Webアプリで見るようなUIって？
UI(画面)作る時はやっぱり使いやすくて、かっこよくて、開発もしやすいものでしたいですよね
そのようなUIを作る時は「React」や「Vue」、「Angular」などのフレームワークが必要不可欠です。
このようなフレームワークで作成したWebブラウザ上で動くアプリケーションのUIのことを指しています。
じゃあ、そのフレームワーク使ってネイティブアプリ作ればいいだけじゃん …って私は思ってました。
Electronが必要なワケ
フレームワークを使用して作成されたUIは基本Webブラウザ上でしか見ることはできません。(多分)
それはなぜかというと、Webアプリケーションは悪意のある場合があるため。(ウイルスとか)
悪意のあるWebアプリからデバイスを守るために、
- Webアプリではユーザのデバイス上のローカルファイルへのアクセスが許可されていない
- OSの設定が変更できない
などのように制限されている。
でもファイルにアクセスしたりネイティブアプリでもWebアプリのようないい感じのUI作りたい！ ので
フレームワークを使用したUIとネイティブアプリの 繋ぎ役 が欲しい。
この 繋ぎ役 になるのがElectron！！(他にもTauriなどあり)
まとめ
なぜElectronが必要なのか
UIを作成する観点から見てみると、WebアプリケーションUI」をネイティブアプリで使用するため。
実際に使ってみるのはDocumentを見ながら進めてみてください。
拙い記事でしたが、読んでいただきありがとうございました。
ここ間違ってる！などありましたら、コメントしてください😃
Discussion