スケーラブルなフロントエンドプロジェクトの10原則

Bornfight    
カスタムソフトウェア、デジタル製品、モバイルアプリ、Webサイト、インタラクティブインストールを作成するデジタルイノベーション企業
この記事は、著者の許可を得て配信しています。
https://www.bornfight.com/blog/10-principles-of-scalable-frontend-projects

Webアプリは、その登場以来、長い道のりを歩んできました。今では、Web上の JavaScript がものすごく強力であることや、フレームワークやテクノロジーの選択の面において、無限の可能性が存在することを誰もが知っています。

異なるフレームワークにはそれぞれ長所と短所がありますが、いくつかのコアな方法論はほぼすべてのフレームワークに適用できます。create-react-app、next.js、vue-cliなどのツールは、プロジェクトとその構造をブートストラップするのにとても便利ですが、その後は、あなたの好みやプロジェクトの条件に合わせて自由にアプリケーションを形成することができます。

ReactVueを使って Web アプリケーションを構築する際に、方向性を決め、物事を整理整頓して健全に保つのに役立つ、大切な原則をいくつか集めてみました。原則のほとんどはすべてのソフトウェアに当てはまりますが、このリストは特にWebアプリに特化してたものとなっています。

1 - 画面ではなく、コンポーネントの開発

・コンポーネントのすべてのロジックを分離してカプセル化しようとしているので、どこでも簡単にレンダリングできます。たとえば、さまざまな画面やセクションにおいてなど。

・すべてのCRUDオペレーションは、それが必要とするデータのためにコントローラ/プロバイダの中に入り、そのデータはpresentationalコンポーネントに渡されます。

・一般的なシナリオとしては redux/vuex があります。 データはストアに保存され、真の単一ソースとして扱われ、コンテナコンポーネントは関連するデータを抽出します。

2 – presentational層とビジネス/コントローラー層の分離

・全てのコンポーネントがストアやバックエンドAPIなどのサービスに接続されている必要はありません。

・コンポーネントを「データソースに依存しない」状態にすることで、再利用性が大幅に向上します。

3 - データ取得の標準化された方法の使用

Rest-Hooks - この原則の良い例として、APIコールのための予測可能で可読性の高い構造を推奨しています。

・プロジェクトによっては、明示的なフェッチ呼び出しで十分な場合もありますが、多くのリソースやリレーションを扱う場合は、バックエンドAPIを抽象化しておくと便利です。

4 - 共通のユーザー入力ストラテジーを持つ

・フォーム、セレクトタグ、バリデーション、エラー状態はすべてこのカテゴリに該当します。

antdなどのUIコンポーネントライブラリのおかげで、この設定不要ですぐに使えるソリューションが使えます

・UIライブラリを持たないアプリを作る場合は、これらの要素の標準化をもう少し重視してUXを向上させることを検討してることにします。

5 - 自動テストのライティング

・私の経験上、コンポーネントは、統合テスト、特にCypressを使ったテストで一番しっかりとテストされます。

・ビジネスロジックはユニットテストで徹底的にカバーされるべきです。

・e2eは、より大規模なユーザフローのスモークテストを行う際に有用であり、クライアントとAPI間のリグレッションを検出するのに役立ちます。

6 - 再利用可能なコンポーネントを作成するためのストーリーブックの使用

storybook.js.org

・デザイナーとの共同作業や機能性の議論に最適な方法です。

・アプリの「リビングスタイルガイド」として機能します。

7 - リンターとフォーマッターを使う

・linters の例 - ESLint, stylelint

・create-react-appのようなほとんどのブートストラップツールはリンターをプリインストールしてくれますが、レガシーなコードベースを使っている場合は適用されないかもしれません。

・これらはバグを捕まえるのに役立ちますが、チームのコードスタイルを定義する際にも使用できます。これは、同僚から引き継いだ機能を開発する際の精神的な負荷を軽減するのも効果的です。

sonarJS eslintプラグインは、論理構造をチェックすることでコードの品質を向上させることができます。

prettierは、一度だけの設定で、二度と設定しなくてもいい素晴らしいコードフォーマッターです。チームで作業するときにとても便利です。

8 - グローバルスタイルの回避

・オーバーライドとリセットをグローバルにすることができます。

・CSSモジュールやCSS-in-JS は、スコープされた分離されたスタイルを実現するのに便利なテクノロジーです。

・ローカルスタイルは、しばしばコンポーネントの再利用性を向上させます。

9 - 構造化されたバージョン管理を使用する

・バランシングモデルの使用

・例えばgitflow。 Git用のバランシングモデルで、Vincent Driessenが開発しました。
・チームでの作業にはバージョン管理の仕組みが必要不可欠ですが、個人で作業する場合にも便利です。

・コミットメッセージのリンティング - commitlint

・プロジェクトの開発中に変更履歴を作成したり、バグを見つけたりするのに便利です。
angularのコミットメッセージのルールはどのようなソフトウェアプロジェクトにもほぼ適用可能で、commitlintはそれらのメッセージをルールセットと整合性のあるものに保つのに便利です。

10 - 変更履歴の維持

・プロジェクトの開始時ごとに、通常、メンタルコンテクストの変化の全容を追跡するのは簡単です。

・プロジェクトがどんどん進んでいく中で、変更履歴はコードベースへの注目すべき変更点を発見する中心的な場所として機能し、開発が始まって数ヶ月、数年が経過したときにも使えます。

終わりのないリスト

今日はこれで以上です。プロジェクトのドメインやテクノロジーによっては、もっとたくさんの項目がリストに追加されるかもしれませんが、今日ご紹介したものは、多くのフロントエンドアプリを根本的に改善することができるとものだと思います。ほとんどすべての原則は、あなたとあなたのチームが決めた優先順位によって、段階的に適用することができます。そのため、一度にすべてを適用しなくても大丈夫です。


コメントを読む

新着ピック  






















新着ニュース

創業百数十年の老舗食堂から生まれた飲食向けデータ分析ツール開発のEBILABがパーソルから約1億円を調達 | TechCrunch Japan

全国で一斉に花火打ち上げ、1日夜8時から 新型コロナ終息願い SNSで世界へ

トヨタからRAV4初のプラグインハイブリッド車が430万円を切って米国で今夏登場 | TechCrunch Japan

Config ルール・自動修復を使ってS3全バケットのデフォルト暗号化を自動的に有効化する | Developers.IO

支出管理SaaS「Leaner」運営のリーナーテクノロジーズが3億円を調達 | TechCrunch Japan

もう「変態」とは言わせない、実用性を備えた2画面ノートに進化したASUS ZenBook Duo | TechCrunch Japan

Infrastructure as Codeにおける理想のドキュメント管理を目指して #infrastudy | Developers.IO

SpaceXのCrew Dragon宇宙船がISSとのドッキングに成功 | TechCrunch Japan

YouTube、警察の差別を研究・提言する非営利団体に100万ドル寄付

【小ネタ】[AWS IoT Greengrass] クイックセットアップを使用して、コマンド一発でセットアップする(RaspberryPi) | Developers.IO

宇宙空間でのCrew Dragonの手動操縦に初成功、同じ操縦をシミュレータで誰でも試せる | TechCrunch Japan

「FF7」にトラウマがある漫画家が「FF7リメイク」をプレイ、期待以上の面白さと不満の理由は?

NVIDIA Jetson Xavier NXのシステムボリュームをNVMe SSDに切り替える | Developers.IO

NVIDIA JetsonとUSBドングルでLTE(SORACOM Air)接続するために nmcli を使う | Developers.IO

NVIDIA Jetson Xavier NXをHDMI接続せずにHeadlessでセットアップする | Developers.IO

NVIDIA Jetson Xavier NXをHDM...

DevelopersIO / 4時間前


有人宇宙船「Crew Dragon」、ISSとの自動ドッキング成功

markdownでのTable作成時に肩のチカラが抜けるプラグインvim-table-modeを導入してみた | Developers.IO

EventBridgeのSchema Registry コードバインディング機能でS3イベント処理を楽に実装する | Developers.IO

EventBridgeのSchema Registry...

DevelopersIO / 12時間前


エネルギー補給のタイミングを教えてくれるスマートウォッチ「Polar Grit X」登場 長時間のスポーツ向け

AWS Systems Manager Explorer に AWS Compute Optimizer のレコメンデーション情報が追加になりました! | Developers.IO

AWS Systems Manager Explore...

DevelopersIO / 12時間前


もっと見る
記事をPICKする
会員登録
Register
記事をPICKする

会員登録すると、もっと便利に利用できます。