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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

まとめ

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

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

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

Gaji-Labo は React 開発の実績と知見があります

フロントエンド開発の専門家である私たちが御社の開発チームに入ることで、バックエンドも含めた全体の開発効率が上がります。

「人手が足りず信頼できるエンジニアを探している」
「Vue.js から React へリプレイスを検討している」
「フロントエンドの効率化をどうしたらいいか分からない」
「自分たちで手を付けてみたがいまいち上手くいかない」

フロントエンド開発に関わるお困りごとがあれば、まずは一度お気軽に Gaji-Labo にご相談ください。

オンラインでのヒアリングとフルリモートでのプロセス支援にも対応しています。

フロントエンドの相談をする!

投稿者 Ishigaki Shotaro

アシスタントエンジニアとしてHTML/CSS/JavaScriptの実装やRailsの組み込み、スタイルガイドの構築などを担当しています。 業務の中でさまざまな学びを吸収しながら、文書構造やアクセシビリティに目を向けたマークアップの学習やJavaScriptの学習などを行っています。チームに貢献できるエンジニアとなるために日々奮闘中です。