Skip to content

Learn Frontend

Jump to bottom
藤川英悟 edited this page Aug 24, 2022 · 3 revisions

UIコンポーネント

  • Material UIで学ぶコンポーネント種別リスト

  • Layout: レイアウトのためのコンポーネント

    Component Description
    Box ほとんどのCSSユーティリティが必要とするラッパーコンポーネントとして使うことができます。componentプロパティを設定することにより、生成するタグをdivとspanで切り替えることができます
    Container コンテンツを中央揃えにするコンポーネントで、最も基本となります。流動的コンテナと段階的コンテナの2種類を生成することができます
    Grid 画面を格子状に分割して、組み合わせることでレイアウト全体に一貫性を持たせているレスポンシブレイアウト。Material Designでは12列のレイアウトに基づく
    Stack スタックはレイアウトを管理するコンポーネントです。直下の子要素が管理対象。垂直または水平に並べる。子要素同士の間に余白や仕切りをつける
    Image List イメージリストはグリッド状に整頓された画像を表示するコンポーネント。基本となる全ての画像が同じ大きさで表示されるリストの他、特定の画像を強調して表現することも可能

  • Inputs: 入力のためのコンポーネント

Component Description
Autocomplete オートコンプリートはオプション値を選択することのできるコンポーネントで、選択肢をテキストボックスに入力された値で絞り込むことができます。
Button ボタンはユーザが実行できる行動を伝達するためのコンポーネントです。モーダルウィンドウの「閉じる」ボタンやフォームの「送信」ボタンが主な例と言えるでしょう。
Button Group ButtonGroupコンポーネントでは、関係しているボタンをグループ化できます。グループ化するボタンはButtonGroupコンポーネントの直下の子要素である必要があります。
Checkbox チェックボックスは選択肢の中から複数のものを選ぶことができます。
Floating Action Button フローティングアクションボタンとは画面の定位置に表示されるボタンです。通常は円の中にアイコンを用いたデザインが使われ、コンテンツの一番前面に浮かんだように表示されています。
Radio button ラジオボタンは複数の選択肢の中から1つだけ選ぶことができます。
Rating Ratingsはコンテンツの管理者に対してユーザの評価を送るためにあります。管理者の意見や体験したことに対して、ユーザは星の数で自分の評価をつけられます。
Select セレクトコンポーネントはリストの中からユーザが選択した情報を収集するために使われます。ユーザはプルダウンメニューで選択肢を確認し、選択することができます。
Slider スライダーは特定の範囲の中から値を設定するためのコンポーネントです。音量の設定をするときに提供されていることが多いと言えます。
Swetch スイッチはひとつの設定でオンオフの状態を切り替えます。
Text field テキストフィールドはテキストを入力および編集することのできるコンポーネントです。
Transfer List 転送リストは、1つ以上のアイテムをリスト間で移動することのできるコンポーネントです。
Toggle Button トグルボタンは関連するオプションをグループ化できます。グループ化されたオプションは1つだけ選択することが可能なもの、複数のオプションを選択することが可能なものがあります。
  • Navigation: ナビゲーションに関するコンポーネント
Component Description
Bottom Navigation ボタンナビゲーションではアプリの中の主だった項目の間を移動することが可能となります。
Bareadcrumbs 構造化されたWebサイトをユーザが閲覧しているときに、表示されているページの階層を可視化することができます。トップページからどのようにたどり着くことができるか、ナビゲーションを可能にするリンクで構成されています。
Drawer アプリ内の主要なコンテンツへアクセスできるメニュー画面を表示します。特に画面の左右どちらかに固定された、補足コンテンツを含む画面のことをサイドシートと言います。
Link リンクコンポーネントを使うと、テーマカラーと文字デザインのスタイルを使用して簡単にアンカー要素をカスタマイズできます。
Menu メニューを一時的に画面よりも優先して表示します。
Pagination ページネーションコンポーネントを有効にすると、複数あるページの中から特定のページを選択して表示できるようになります。
Speed Dial 画面上に浮いているアクションボタンを押したとき、3～6個の関連するアクションを表示できます。
Stepper ステッパーは番号が付けられたステップを通じて、進行状況を伝えるコンポーネントです。ウィザードのような役目を果たします。
Tabs タブを使用すると簡単に表示したいビューを探して切り替えられます。表示したい情報が載っているタブを選択すると表示される情報が切り替わります。
  • Surfaces: 任意のコンポーネントを載せるためのコンポーネント
Component Description
Accordion アコーディオンコンポーネントはアコーディオンメニューを実装できます。ひとつのページ上にある関係のあるコンテンツをセクションごとに表示したり非表示にしたりする機能で、大きな面でも使うこともでき、軽量であることが特徴です。
App Bar その時点で表示されている画面に関しての情報をまとめて表示します。画面上部に設置されたAppBarは、多くの場合タイトルを表示したりナビゲーションバーとして、もしくは実行できる情報をまとめるために使われます。
Card カードはひとつのコンテンツと関係する動きや情報をまとめて表示できます。関連している情報を読み込むことができる必要があります。
Paper 紙のような質感をアプリケーションの背景に表現します。リサイズしたり、シャッフルしたり、複数の紙を扱っているかのように表示することができます。
  • Feedback: フィードバックのためのコンポーネント
Component Description
Alert アラートはユーザの作業を中断することなく、注意を引く方法で重要な短いメッセージを表示します。
Backdrop 特定の要素もしくはその一部を強調するために使用されます。アプリケーションの状態が変化していることをユーザに示したり、ローダーやダイアログの作成にも使われています。
Dialogs 作業に対しての重要な情報を含めて通知したり重要な決定を促したりします。ダイアログはモーダルウィンドウの形でアプリケーションの表面に表示されます。
Progress プログレスインジケーターは一般的に待機時間の特定できない場合は回転するオブジェクトを表示したり、プロセスの長さを表示したりします。
Skeleton データが読み込まれる前に仮のコンテンツ領域を確保して表示し、見ているユーザが不満を持ってしまうのを軽減します。
Snackbar 一時的に画面に簡単な通知を行います。このコンポーネントはトースト通知として知られています。
  • Data Display: データ表示のためのコンポーネント
Component Description
Avatar テーブルやダイアログメニューまであらゆる用途に使用されます。顔写真や名前、アイコンなどが設定でき、主な用途としてはアプリケーションへのログイン状態を表示するのにつかわれます。
Badge バッジは子要素の右上に小さな通知を表示します。例えばメールやメッセージが何通来ているかを表示できます。
Chip Chipsは入力、属性または何らかの実行ができることを表すコンパクトな要素です。ブログ記事につけられたタグを表示したり、特定の要素を押してタグを絞り込んで記事を表示したりすることができます。
Divider Dividerはリストとレイアウトをグループ化する細い線を表示します。
Icons Material-UIはアイコンについて、以下の3つの方法をサポートしています。1.標準の Material Design iconsを、Reactコンポーネント(SVGアイコン)として、エクスポートする方法2.ReactラッパーのカスタムSVGアイコンとして、SVGアイコン コンポーネントを利用する方法3.Reactラッパーのカスタムフォントアイコンとして、アイコン コンポーネントを利用する方法
Material Icons 公式のWebサイトからすぐに使うことができる1700以上のReact Materialアイコンが提供されています。
List リストはテキストや画像を一覧表示するもので、垂直方向に連続して表示されます。
Table テーブルにはデータセットを表示させることができます。Cardなどの他のコンテンツを埋め込んでカスタマイズすることができます。
Tooltip Tooltipはユーザが要素にカーソルを合わせたり、フォーカスしたり、タップしたりすると、その要素をクリックしたときに実行される機能が分かりやすく記載されたテキストを表示します。
Typography Typographyを使うことでデザインとコンテンツを明確かつ効果的に表すことができます。
  • Utils: 各種の便利なコンポーネント
Component Description
Clik Awal Listener 要素がクリックされたかどうかを検出するリスナーです。表示されているドキュメントの任意の個所で発生するクリックイベントを検出します
CSS Baseline HTMLの要素と属性のスタイルをそろえるコレクションであるnormalize.cssのような役割を果たします。
Modal モーダルウィンドウを表示するコンポーネントです。ダイアログ、ポップオーバー、ライトボックスなどの作成するための基礎的な機能を提供します。
No SSR サーバサイドレンダリングの対象から意図的にコンポーネントを外すために使用されます。
Popover Popoverを使うことで、一部のコンテンツを別のコンテンツ上に表示させることができます。
Popper Popperも、使用することで一部のコンテンツを別のコンテンツ上に表示することができます。react-popperの代替手段です。
Portal portalコンポーネントは子要素をDOMの階層の外側にある新しいサブツリーにレンダリングします。
Textarea Autosize テキストエリアを表示するReactのコンポーネントです。デフォルトでは自由にサイズを変更することができますが、サイズや行数を固定することも可能となっています。
Transitions TransitionはUIを簡単に表現する手助けをします。
useMediaQuery ReactのCSSメディアクエリフックです。CSSのメディアクエリとクエリが一致するかどうかに基づいてコンポーネントをレンダリングします。

スタイリング

  • ライブラリ

    • Emotion CSS
    • Tailwind CSS
    • Plain CSS

  • 設計

    • CSS in JS
      • Emotion
      • StyledComponent
    • CSSプリプロセッサ
      • Stylus
      • Sass

インテグレーション

  • プロトコル

    • GraphQL
    • RESTful
    • gRPC
    • Websockets

  • サービス

    • Auth0
    • GraphCMS
    • GoogleAnalytics
    • SmartContracts

状態管理

  • React.useContext

    • 「部分再描画頻度」が低いアプリケーションに最適
    • サーバーサイドから得られた値を表示するだけ、という場合は特に効果が高い
    • そもそもSPAサイトでグローバル状態管理が前提として発生しない場合の、緊急対処法としても有効(※妥協)

  • React-Redux(後述)

    • 広く利用されるReduxフレームワークのReact版。最近はReact Hooksの台頭により棲み分けが進む(衰退..?)
    • 大規模なアプリケーションに適しているとの声。
      • 一連の概念を把握するのに一定の壁がある。Action,Dispatcher,Store(Reducer/State)。
        • redux-saga
          • redux-saga は Redux ミドルウェアとして実装されているため、スレッドはメインアプリケーションからのアクションに応じて起動、一時停止、中断が可能
            • 副作用を個別に実行する独立したスレッドのような動作イメージ
              • 副作用というのは
                • データ通信などの非同期処理
                • ブラウザキャッシュへのアクセス
                • のようなピュアではない処理
              • なぜ必要?
                • easier to manage
                • more efficient to execute
                • easy to test
                • and better at handling failures

  • Recoil(Facebook製のReact状態管理ライブラリ)

    • 実験段階の、状態管理ライブラリ。一応、RecoilはReact公式。
      • モチベーション https://recoiljs.org/docs/introduction/motivation
        • Reactに搭載されるのstateおよびcontextの課題解決
          • Component state can only be shared by pushing it up to the common ancestor(共通の祖先にプッシュすることによってのみ共有できます)
            • but this might include a huge tree that then needs to re-render.
            • not an indefinite set of values each with its own consumers
          • 不定値の集合とは?
            • 変数に値が代入なければ, 当然その変数にどのような値が入っているかわからない
              • difficult to code-split the top of the tree (where the state has to live) from the leaves of the tree
                • 枝葉の要素がstateを使用してる場合上位層のコードを分割しづらい

  • MobX - https://mobx.js.org/README.html

    • principle that the most commonly used concepts are introduced before specialized information. This applies to the headings in the table of concepts as well as the pages under those headings.
      • Observable state
      • Actions
      • Computeds
      • Reactions

  • jotai - https://jotai.org/

    • Jotai takes a bottom-up approach to React state management with an atomic model inspired by Recoil

状態管理とアプリケーション要件・特性

  • Read要件

    • 「Read要件」の多いアプリケーションイメージ
      • ニュースサイトなどのメディア媒体
      • 画面単位で責務が切り替わるショッピングサイト
      • 技術ブログなど

  • Write要件

    • 「Write要件」の多いアプリケーションイメージ
      • SaaS のダッシュボード
      • ユーザー編集の伴うアプリケーション
      • 社内インナーツール

  • アプリケーション特性の確認

    • 部分再描画頻度

Redux理解

  • Redux設計のコツを理解する
    • Redux Fundamentals - how Redux works - https://redux.js.org/tutorials/fundamentals/part-1-overview
    • Redux公式が紹介している設計方針・他のサービスではどのように設計しているのか- https://blog.recruit.co.jp/rls/2019-12-20-dissecting-redux-store/
      • Storeの設計変更は影響範囲が大きく難しいため、Storeの設計は重要
        • Redux公式が紹介している設計方針(Recipes)
        • 以下のような3つのdataを作るのが基本 https://redux.js.org/usage/
          • Domain data
          • アプリケーションが表示したり変更したりするデータ
            • e.g. TODOアプリなら、todo/doing/done
          • App state
          • アプリケーション独自の振る舞いのためのデータ
            • e.g. データの選択状態やデータフェッチのローディング状態
          • UI state
          • 現在の表示方法のためのデータ
            • e.g. モーダルが開かれているかどうか
        • 他のサービスではどのように設計しているのか
        • 有名なWebサービスの中からReduxを使っているサービスを探してStoreの中を調べる
    • reduxのstate設計の話
    • 個人的な関心
      • store/reducerの関数命名
      • stateの粒度・単位
      • スタンダードなディレクトリ構成

React-Redux理解(やってみる)

Requirements

  • The UI should consist of three main sections:

    • An input box to let the user type in the text of a new todo item
    • A list of all the existing todo items
    • A footer section that shows the number of non-completed todos, and shows filtering options

  • Todo list items should have

    • a checkbox that toggles their "completed" status.
    • be able to add a color-coded category tag for a predefined list of colors.
    • be able to delete todo items.

  • The counter should pluralize the number of active todos: "0 items", "1 item", "3 items", etc

  • There should be buttons

    • to mark all todos as completed, and
    • to clear all completed todos by removing them

  • There should be two ways to filter the displayed todos in the list:

    • Filtering based on showing
      • "All", "Active", and "Completed" todos
    • Filtering based on selecting
      • one or more colors, and showing any todos whose tag that match those colors

ライブラリ選定軸

  • freecodecamp.org - the-12-things-you-need-to-consider-when-evaluating-any-new-javascript-library-3908c4ed3f49

  • 個人和訳 - qiita

    • Features - 特徴: A: これまでできなかったことができるようになった。 / B: 同じことをより良くできるようになった。 / C: 今よりもできることが減った。
    • Stability - 安定性 A: バグが少なく、デバッグや開発が容易になった。 / B: ソフトウェアの安定性には影響しなかった。 / C: 導入したことによってバグが増えた。
    • Performance - パフォーマンス・処理性能 A: 軽量、読み込みが軽い、パフォーマンスが向上した。 / B: パフォーマンスには影響しなかった。 / C: 導入したことによって遅くなった。
    • Package Ecosystem - 周辺エコシステム A: ライブラリの問題点を解消する明確な解決策が存在し、よく文書化されている。 / B: ライブラリの問題点を解消する多くの解決策が乱立している、あるいは最近出始めた。 / C: パッケージエコシステムが存在しない。自作が必要。
    • Community - ライブラリの開発・運営を支えるコミュニティ A: フォーラムやチャットの発言が毎日ある、GitHubのIssueが一日以内に対処される、Stack Overflowで質問にたくさん回答が付いている。 / B: フォーラムやチャットで時々反応がある。 / C: GitHub以外にコミュニティがない。
    • Learning Curve - 学習コストラーニングカーブ A: 1日でコーディングを始めることができる。 / B: ものにするまでに一週間程度必要。 / C: 基礎を学ぶのに一週間以上かかる。
    • Documentation - ドキュメンテーション A: ドキュメントサイト、スクリーンキャスト、サンプルプロジェクト、チュートリアル、APIドキュメントが完備されている。 / B: ReadmeとAPIドキュメントが用意されている。 / C: ライブラリの使い方を知るための唯一の方法は、そのコードを読むこと。
    • Tooling - 整備された開発ツール A: ブラウザ拡張、エディタの対応、CLIユーティリティ、SaaSのうち二つ以上が存在する。 / B: 上記のいずれか一つが存在する。 / C: なにもない。
    • Track Record - 実績 A: 4年以上生き残っている、大手企業や有名な開発者の導入実績がある。 / B: 1～4年の歴史がある、アーリーアダプタや中小企業の導入実績がある。 / C: 歴史が1年未満である、導入実績がない。
    • Team - 開発者の組織・体制。そのライブラリの背後に誰がいるか A: 専門のオープンソースチームを持つ大手企業が開発している。 / B: 実績のある個人エンジニアの中規模チームが開発している。 / C: 個人で開発している。
    • Compatibility - 互換性 A: アップデートは基本的に互換性があり、非推奨項目は警告を行い、互換性のない旧バージョンも最低2年は保守される。 / B: 互換性のないアップデートはあるが、移行ガイドが整備され、徐々に展開される。 / C: 互換性のないアップデートが頻繁にあり、適切なガイダンスがない。
    • Momentum - 勢い A: 戦闘力9000以上だと…！？1 Hacker Newsで取り上げられ、GitHubで数千の☆がつき、カンファレンスでよく話題に出たりする。 B: アーリーアダプタが食いつく、GitHubで数百の☆がつく。 C: 一人でひっそりと開発している。いつか見返してやる！いつの日か！

  • 個人の感想・評価軸イメージ

    • Price/License
      • 利用料金
      • ライセンス
    • パッケージサイズ
    • 処理速度
    • メンテナンス頻度
    • 利用プロダクト数

Reference

Clone this wiki locally