Angular React Vue.js

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

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

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

3者3様、当然メリット・デメリットあるわけで、開発要件などで選択肢が変わってくるのはもちろんなのですが、結局のところ、自分としては何が必要なのか?と考えると、前記の「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の機能要件

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

RichTextBoxの機能要件

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

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

Angular React Vue.js” に対して1件のコメントがあります。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です