Angular React Vue.js

こんにちは！「Memon」を開発するにあたり、Electronをベースにしようときめたのは前回なのですが、大事な画面部分を、HTML＋CSS+JavaScriptで表現するには、C＃で言うところの「TreeVew」「ListView」「RichTextBox」などのGUIを表現しないといけないので、Webフロントエンドのフレームワークを調べていました。タイトルにあるように、今現在、「Angular」「React」「Vue.js」の３つが主流のようですね。

ということで、「Memon」を開発するにあたり、これらのどれを選択するのが良いのか、比較しようと思いました。ちょうど良いページがあったので参考にさせていただきます。

【JavaScript】３大フレームワーク Angular, React, Vue.jsを比べてみよう (2018年4月)

３者３様、当然メリット・デメリットあるわけで、開発要件などで選択肢が変わってくるのはもちろんなのですが、結局のところ、自分としては何が必要なのか？と考えると、前記の「TreeVew」「ListView」「RichText」「Menu」などの「UIコンポーネント」が必要なわけなのです。ですので自分の場合は最低限、これらコンポーネントを含むフレームワークを選択することになります。ということで、ぞれぞれの「UIコンポーネントライブラリ」には、どんなものがあるのか？を調べてみました。各フレームワークごとに、まとめたページがありましたので、下記を参照させていただいています。

Angular

Angular2のUIライブラリまとめ

React

ReactのUIコンポーネントライブラリの一覧表(2017/5版)

Vue.js

Vue.js いろいろまとめ

この中から、最適な「UIコンポーネントライブラリ」と「フレームワーク」の組み合わせを選ぶわけですが、自分にとって、最低限必要と考えているものは、前述の C# で言うところの「TreeVew」、「ListVew」、「RichTextBox」になります。この観点で絞っていこうと思います。

TreeViewの機能要件

• フォルダ、ファイル（以下、ノード）を任意の場所に追加できる。
• ノードを削除できる。
• ドラッグ＆ドロップでノードを任意の場所に変更できる。
• ノード名を変更できる。
• どのノードが選択されたか検知できる。
• ListViewの行をドラッグ＆ドロップで任意のノードに追加できる。
• フォルダのみに切り替えることができる。
• ノードのアイコンを変更できる。

ListViewの機能要件

• １行に複数の項目が持てる。「題名」「日付」「重要度」など。
• 各項目でソートが出来る。
• 任意の場所の行を削除出来る。複数の行も対象。
• 行をドラッグ＆ドロップでTreeViewの任意のノードに追加できる。

RichTextBoxの機能要件

• リッチテキストを編集する要件を満たす。
  • リッチテキストファイルを開く、閉じる、保存ができる。
  • フォントを変更できる。
  • フォントサイズを変更できる。
  • 文字色を変更できる。
  • 文字のバックを変更できる。
  • 文字をボールド、イタリック、斜体、打ち消し、に変更できる。
  • 画像を挿入できる。
  • RichTextBox 全体の背景を変更できる。
  • RichTextBox 全体のフォントを指定できる。
  • 文字の、左寄せ、真ん中、右寄せ、が出来る。
  • 文字をリスト化出来る。

ということで、最適な「UIコンポーネントライブラリ」と「フレームワーク」の選定は、時間がかかりそうなので、今日はこの辺にしておきます。