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

ishigaki

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

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

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

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

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

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

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

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

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

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

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

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

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

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

まとめ

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

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

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

Gaji-Laboでは、JavaScriptフレームワーク経験が豊富なパートナーさんを募集しています

Gaji-Laboでは、開発チームの一員としてプロジェクトに一緒に取り組んでくれる業務委託のパートナーさんを募集しています。

現在は特にJavaScriptフレームワーク実践と業務経験が豊富なWebフロントエンドエンジニアを必要としています。React + TypeScript、Vue.js、Next.js、Nuxt.js など、あなたの得意なフレームワークを教えて下さい!

パートナー契約へのお問い合わせもお仕事へのお問い合わせも、どちらもいつでも大歓迎です。まずはオンラインでのリモート面談からはじめましょう。ぜひお気軽にお問い合わせください!

お問い合わせしてみる!


ishigaki

投稿者 石垣 祥太郎

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