見出し画像

Storybookを使ったフロントエンド開発の技術的挑戦のはなし

シェアダインでは数ヶ月前に今後3年、5年など短中期的な事業展開を成功させるために、バックエンド、フロントエンド、インフラの大規模なシステムリプレイスを行うことを決めました。

プロダクトを一新することに決めたこのタイミングで、フロントエンド開発においては、可視化できて、再利用の高いコンポーネントをデザインできるStorybookを導入したらどうだろう?そんな意見がエンジニアのメンバーから出てきました。


ずっと向き合ってきたBootstrapとCSSを使ったフロントの開発の課題


これまでシェアダインではBootstrap と個別のCSSを使ったフロントの開発を行ってきました。

デザイナーとのやりとりが多く発生したり、実装までに時間がかかってしまうことや、ページ間で整合性のないCSS設計も多くあり課題となっていました。

今後も、新しい機能開発や新しくプロダクトを作ることになる場合、個別のCSS対応ではどうしても生産性が低さや、拡張性のあるデザインの採用などの課題には継続して向き合うことになります。


「デザインシステムをStorybookで構築する」を、チームで意思決定

実際にアプリケーションで動くコンポーネントと同じ見た目・動作を確認できるスタイルガイドがあることで、デザイナーはUIをすぐに把握できますし、デザインのアウトプットもエンジニア同士で、あるいはエンジニアとデザイナーで認識の相違があってもすぐにコミュニケーションをとることができます。

エンジニア同士、またエンジニアとデザイナーのすり合わせにかかる時間が一気に短縮できる良さがあります。

メリット
・デザイナーとエンジニアの間でコミュニケーションコストが下がる
・共通のUIはImportすることで効率的開発が可能になる
・ページ間、ユーザー側・シェフ側双方のアプケーション間で、UIの一貫性を担保することができる
デメリット
・導入するにあたって、デザインの構築に工数がかかる
・デザインの構築・管理・運用に技術力が求められる

当然ながら、初期にある程度の工数をかけてまで、管理・運用コストをかけて導入する必要があるのか?に関しては、現在、そして今後目指す規模、そして今後の開発計画、事業計画に照らし合わせて検討することが必要です。

チームで議論する中、代表(非エンジニア)も面白そう!、必要な体制は整えるからやってみようよ、と話がすぐにまとまり、Storybook(+Typescript, Next.js)を用いたデザインシステムの構築に挑戦しようということになりました。

いざ、Storybookの導入へ!

画像1

導入に際し、先ずデザインナーチームに、改めてFigmaでデザインコンポーネントの整理・一覧表の作成を依頼しました。

アトミックデザインを意識してStorybookのデザインを行なっています。エンジニアは、アプリケーションから独立したStorybookから(ボタンのような)小さなコンポーネントをそのまま利用することもできるし、コンポーネントを組み合わせて新しいコンポーネントやページを作ることもできます。

ページごとにゼロからCSSを作成する従来のやり方よりも格段に開発スピードが上がります。

デザイナーが張り切ってアニメーションの入ったコンポーネントを新たに作成し、フロントエンジニアが固まる・・・といったこともありましたが、Storybook上にどんどんデザインコンポーネントが並んできました!

実際の運用に関しては今後、このブログでお伝えしていきたいなと考えています。

これからのシェアダインの開発について


7月末をターゲットにコードリニューアル計画を立てています。完成後は開発速度は爆上がりしますね!

note ノート 記事見出し画像 アイキャッチ-2

最後に

シェアダインでは、機能開発はもちろん、技術領域に係る意思決定・仕様の策定など主体的に関わりたいエンジニアを大募集しています。技術分野で大きな挑戦をしていますので、興味ある方は是非募集要項を御覧ください!


【フロントエンドエンジニア(React.js, Typescript, Next.js) 】
大規模リプレースにおけるUI/UXの実装に挑戦したいメンバー募集!料理の世界をもっとフラットに、もっとオープンに
https://open.talentio.com/1/c/sharedine/requisitions/detail/19772

【Go / サーバーサイドエンジニア】
Go/マイクロサービス バックエンドのシステムリプレースをリードするメンバー募集!料理の世界をもっとフラットに、もっとオープンに
https://open.talentio.com/1/c/sharedine/requisitions/detail/19185



この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
13
フードテック「SHAREDINE(シェアダイン)」のオフィシャルnoteです。「相手を慮って作る」料理を未来につないでいきたい。そんな思いで運営しています。 https://sharedine.me