アシスタントエンジニアとしての視点から考えた、UIコンポーネントフレームワークを使って実装する時に意識すること

こんにちは、Gaji-Labo アシスタントエンジニアの石垣です。

最近、チーム開発で Material-UI という React 用のUIコンポーネントフレームワークを使っており、当ブログでも以前にいくつか Material-UI についての記事を書きました。

今回は少し視点を変えて、Material-UI のようなUIコンポーネントフレームワークを使ってコンポーネントの実装をする上で、アシスタントエンジニアとしての視点で考えたことを書いていきたいと思います。

使っているフレームワークの良さを活かせるようにコンポーネントを作る

UIコンポーネントフレームワークを使って実装する時は、そのフレームワークの特性を活かせるように意識します。

Web アプリケーションのコンポーネントを実装する時には、フレームワークに存在するそのままのコンポーネントを使うだけでなく、カスタマイズや一から独自で作る必要があるコンポーネントが出てくることもあります。

そういった既存コンポーネントをカスタマイズする時やフレームワークにない独自のコンポーネントを実装する時も、フレームワークの特性に則った実装をするようにします。

フレームワークの良さを消してしまうカスタマイズや独自実装をしてしまうと、フレームワークの良さを活かすことが出来なくなる以外にも、フレームワークの設計やルールを逸脱したものが多くなり他実装者への負担が大きくなったりコンポーネントの組み込みや改修も手間がかかるなど、デメリットの方が大きくなってしまいます。

フレームワークに則ることで、その設計の良さを活かしたコンポーネントの実装を行うことができ、プロジェクト全体の完成度に繋がります。

フレームワークの良さを理解するために行っていること

使っているフレームワークの特性を理解するには、まずはフレームワークのドキュメントを読むことが一番です。

フレームワークに存在するコンポーネントの使い方を理解し、実際に触ることでフレームワークの設計について理解します。

既存コンポーネントを使って実装している時も、フレームワークで用意されたコンポーネントがなぜこういった作りになっているかを確認して実装します。

なぜフレームワークを使っているか立ち止まって考えることで、カスタマイズや独自実装の際もぶれずにフレームワークに則った実装をすることができるようになります。

まとめ

今回はMaterial-UI のようなUIコンポーネントフレームワークを使ってコンポーネントの実装をする上で、アシスタントエンジニアとしての視点で考えたことを書きました。

フレームワークに則ることで、その設計の良さを活かしたコンポーネントの実装を行うことができ、プロジェクト全体の完成度に繋がります。フレームワークがあるのならばそれを活かさない手はありません。

自分はまだUIコンポーネントフレームワークを使った開発の経験が浅いため、今後もフレームワークに則った開発の仕方を学んでいこうと考えています。