こんにちわ、フロントエンドエンジニアの岸です。
システムリニューアル案件のプロトタイプ作成が終わって少し落ち着いたので今は別の案件の作業を行っています。
そこで行っている作業を簡単に紹介したいと思います。
Atomic Design
Atomic Designは以下のレベルのコンポーネントを使用してデザインを行います。
Atoms(原子)
Molecules分子)
Organisms(有機体)
Templates(テンプレート)
Pages(ページ)
Atoms(原子)が一番下のレベルのコンポーネントでボタンやインプットのような部品になります。
そのAtoms同士を合体させることで上のレベルのコンポーネントになり、さらにその組み合わせを行うことでパーツ、セクション、ページといったデザインとなっていきます。
このような方法でデザインをすることで再利用が行いやすく、一貫性のあるデザインを作成できると言われています。
デザインを見ながらどのレベルのコンポーネントで実装するのか相談して決めました。
storybook
Atomic Designでデザインされたものを実際にreactでコーディングしていくためにstorybookを作成します。
storybookとはコンポーネントのカタログのようなものでスタイルガイドとしても使用できます。
Atomic Designのレベルごとに分けてプログラマがコンポーネントを見つけやすく不足などが起こりにくい、コーディングと動作確認が同時にできるなどのメリットがあります。
以下のサイトにいくつか例があります。
https://storybook.js.org/examples/
reactとtypescripの経験がなかったので初めはプログラマの方とペアプロをしながら作成していきました。
今はstorybookの作成中でいろいろ模索しながら行っています。
作業量が多いように感じますが初めにこれらを意識してコンポーネントを作成することでプログラマの作業や後の保守やメンテナンスに柔軟に対応できるような気がしています。
また来週にはシステムリニューアル案件に戻ると思うので、次回はその作業について書きたいと思います。
残業はないです。
京都オフィスに勤務するフロントエンドエンジニア/デザイナー。コーダーの業務領域もカバーしつつ、ReactなどのJavaScriptのフレームワーク・ライブラリを使った開発業務を行っている。