この番組はエンジニアの成長は楽しい学びからをモットーに日々学んだことをワイワイとアウトプットして世の中に貢献していくラジオでございますはい貢献していきましょう今日も貢献していきましょうはいということで今日はですね久しぶりに普通のことをしたいと思いますん?学んだことをアウトプットするん?

そういうもんでしたよそういうもんでしたよねこれまでちょっと僕ね最近全然開発してなかったんで生成AIの変化球みたいな使い方をよく紹介するっていうパターンで回数を稼いでいたんですけども今日はですねちゃんと新しく学んだことをちゃんとアウトプットしていこうかなという気持ちで初心に帰ってこう

ホームベースに戻ってバッターボックスに立っていこうと思いますホームベースに戻ってバッターボックスまあいいか隣だからね隣だなと思ってどっちだろうなと思ってねということで今日はですねすっごい前からいっぱい聞いたことがあるしなんとなくふわっと概要は知ってるんだけど

まあそれで何が嬉しいのっていうのがよくわからなかったアトミックデザインというものについて話していこうかなと思ってます言ってました名前先行でしかわくわくはよくわかってないけど多分原理わかってると思っているじゃあその理論をじゅんぺいくん説明お願いします僕なんですねアトミックデザインとはですね原子がどんな色しててどんな形してるかなっていうのを

どんな形にしどんな色でどんな形にしようかなっていうのをデザインするものですねあれですねH2Oとかが赤丸に灰色がポンポンついてる赤丸を王だとしたアトミックデザイナーがいて果たして赤でいいのかとかそういうのを考える

ところですかね正解大喜利として何の観点で確かに分子モデル作ってる人はアトミックデザイナーって呼ばれてるかもしれないかもしれないですよねちなみに僕は全然あんまり聞いたことないどこで出るだろう言われてみれば僕の前々職で大流行りしてましたよ

みんなアトミックデザインをやりたがるフロントエンドエンジニアはみたいな感じでしたなんかなるほど最初にアトミックデザインで行こうよみたいなそうですね話になるってことですね僕のまず学習する前の圧災解像度のアトミックデザインのイメージなんですけどリアクトとかVue.jsとかで開発しててコンポーネントを作るときに

5個ディレクトリ作るんですよアトムスモルキュールスオーガニスムステンプレートページス5つの階層ごとに作って今挙げた5つの階層ちっちゃい順に並んでますみたいなそんなイメージなんですよアトムスにめっちゃちっちゃいパーツが入っててページスに最終的に1ページのパーツが入っててっていうのを流度バーって分けて作ってて

じゃあ今自分が触ってるこれってどこに分類されるんだろうかって思うのがアトミックデザインだと思ってたんですね。うんうんうん。わかるわかる。そうなりそう。間のやつとかどこがどうなんだろうってなりそうですね。そう。で、ある日現場出てるフロントのエンジニアの人に聞いたのは、いやもうあれややこしすぎるんでうちの現場ではページスとアトムスしか作ってないですっていう。

それはそれで潔くていいなって思ったことがあるんですよアトムスすごいことになりそうですけどねまあそうだねすごいことになるんじゃないかなでもそれはそれで確かに見た目はアトムスに置けばいいしロジックみたいなAPIとのフェッチ部分はページに置けばいいしそれはそれでいいのかと思いながら規模にもよるかというので今回はしっかりアトミックデザインの解説をしていこうと思いますお願いしますということで

まずアトミックデザインの目標なんですけど何のためにあるかというところですねこれはですねインターフェースウェブとかデザインのインターフェースを作っていくにあたってその階層を分けて整理していくことによって効率的に分かりやすく開発できるようでみたいなそういうのを目指したデザインの設計思想というんですかねを指しております

なんかソフトウェアというかアプリケーションレイヤーというかコードレイヤーのアーキテクチャの一つですねもしかしたらデザインの人たちも使ってるのかもしれないけどそっちは知らないのでこの番組はエンジニア向けの番組ではあるので一応フロントエンドエンジニアという設定で話していこうかなっていうその人たちにメリットがある形で話していこうかなという感じですね

のりさんがフロントエンジニアっていう設定が大事なのかと思いますすいませんそこはあんま大事じゃないですこれ階層を分けてパーツを分類することによって再利用性高めてこうねっていうのが結構目的にあるんですよよく言われますよねアーキテクチャのモチベーションとしてはこれは本当に世の中の科学科学あるじゃないですか科学のあれをあれにしてモチーフにしてえーと

分類してて何の話?あのーなんて言うんだろうこれこういうのなんて言うんだっけモチーフじゃなくてインスピレーション受けてみたいなインスピレーションみたいなやつインスパイアインスパイアみたいなやつなんだっけモチーフ?いやモチーフじゃないんだよな科学に例えてもしていやあのカタカナカタカナかここまで来てるっすよここまで来てるっすけどいやいやいやもう出てこないとこない出てこないなオマージュ

価格のオマージュなんですよこれオマージュなの?オマージュなの?オマージュですそうなんだオマージュってそういう言葉だっけ?違っけ?オマージュじゃないですか?価格のオマージュなんですよちょっと待ってくださいね参考にしてやってるみたいな感じじゃないですかリスペクトとかですよオマージュってじゃあ違う違うんだ

なんていうんだろうその敬意を払った上で原作に敬意を払った上で独自のアレンジを加えて出すのがオマージュです銀玉とかでガンダム出てくるのはオマージュですつまりそうじゃないですかこれオマージュかなオマージュなんですかわかんないその説明だとギリギリオマージュじゃあオマージュでギリオマージュですじゃあオマージュでこれそれぞれのパーツを説明すればいいか

少なくとも聞きたいまず5つの階層に分かれてますさっきいきなりディレクトリの話しちゃったんですけど英語で言うと長いんで日本語で言いますねまず5つの階層で分けますその階層っていうのが原子分子生物って書いてあるけど有機体っていう気がするなそういう意味なんだ有機体そしてテンプレート

急にねでこれ急に切り替わったんですけど実際説明の本典原著の中でもそういう風に説明されてますじゃあもう和訳する人が諦めたんですねはいここからはもう科学の世界を脱しましょうみたいなのを書いてましたへー違うかそれジェミニが勝手に言ったことかもしれないまあなるほどちょっと記憶が混濁してるんですけどでこの5つにまず分けますと

でまずじゃあ原子からいきますかちっちゃいところからはい世の中って原子があってその原子が組み合わさって分子を作ってその分子が組み合わさってなんか物とか生き物とかになってるわけじゃないですか本当にそれのイメージに近くて原子はこれ以上分解できないよねっていうUIのパーツ例えばボタンとかフォーマでいうインプットとかうんうん

テキストとかそういうやつらがアトムスっていう原子に分類されますよこれはめっちゃわかりやすいですねなんでこれらを組み合わせて次は分子を作っていったりするわけなんですけど原子単体で使うこともあるけどで次のちょっと大きくなって次分子分子はこれ実は繰り返し使える単位で作っていくんですよ再利用可能な単位でまとめていくというか

なんで例えばさっきのインプットだとしたら インプットってちょっとちっちゃすぎるんですよインプット使うときってだいたい検索ボタンが一緒についてたりとか もしくはそのフォームにラベルがついてたりとかってするじゃないですかそういうセットで使い回すよねっていう単位を分子と言いますと なるほどはい

実装面で見たとき例えばリアクトだったらコンポーネントごとにファイル作れるじゃないですかなので原始のファイルをインクルードしてインポートかインポートですねインポートしてそれを組み合わせて文章を作ってるみたいなイメージですねこれは例えば検索バーだったらヘッダーにも使ってたりするし実際にページの中にも検索埋め込まれてるケースもあるだろうしっていうのでいろいろ使い回せますよねと

いうのが分子の単位でございます続いて有機体オーガニスムスこれはパーツとして完成しているもの繰り返し使うけどページまたいで繰り返しは使うんだけどそれ単体をいろんなところに使うことはないかなっていう単位

分からんでもない例えばヘッダーとかヘッダーっていろんなページで使うけどそのヘッダーをフッターに使うってことはないじゃないですかっていうある程度使い方がガチって決まってるよねっていう塊がオーガニスマスですねヘッダーで言うと例えばヘッダーで言うとハンバーガーメニューみたいなやつがあったりとか左上にアイコンって言うんですかあれ

左上にアイコンはい画像ロゴ的なロゴかそうですねロゴがあったりとかすると思うんですけど考えようによってはどこまでを分子でどこまでを有機物にするかっていうとハンバーガーメニューは分子ってことですよねハンバーガーメニューは分子ですハンバーガーメニューは分子なんですねだと思います分子か引き開いたらバーって出てくるからそうそうそこもセットで分子なはずはいはいうんうん

一方ロゴは原子のままかもって感じするなそれ以上分解できないからつまり原子を有機物に参照させるっていうのかなインポートさせることはある階段すっ飛ばすこともあるし同じ階層の間でインポートすることはあるんですかねあります分子が分子をインポートすることもあるし有機体が有機体あるのかな

あんまなさそうですよねそこはあんまりないかも使い回しの仕方があれなんでページ間では使い回せるけどそれを別のパーツに流用するみたいなイメージないのでうんうんうんってことですねわかりましたありがとうございますさあここから科学の世界を出しましょうとこれちょっとうがった見方なんですけど

妥協ですよねいいメタファーなかったから出しようっていう気持ち潔さアトミックデザインの良さは潔さ潔すばらしいテンプレートはですね配置

配置のためのレイヤーでございますなるほど例えばヘッダーここに置くよねとかこのページサイドバイルよねとかこのページメインコンテンツこれだよねみたいなこうなってくるとページなんだって話になってきますねですよねテンプレートの段階っていうのはその名の通りですね配置は決まってるんですけど中の情報はまだ入れてない状態なんですよつまりメインのコンテンツはここに来るけどその中に来るコンテンツはまだ注入してないよっていう状態へー

なるほどね引数みたいなので受け取れる枠だけあるみたいな感じなんですかそう最後ページ数ページ数でそれこそAPAからデータをフェッチしてきて実際に必要なデータを各コンポーネントに渡してっていうことをやってるとそれをやることによって1ページが綺麗に階層分けした状態で作れるよね

っていうそういう設計手法のことをアトミックデザインというわけですねありがとうございますちょっと質問いいですかAPIを呼び出すみたいなロジックがある部分はどこに属するんですかページ数ですあくまでさっき言ってた分類はUIとして現れる部分だけでそれ以外に必要なロジック部分はページ数に全部まとめて書かれる

です原理主義者はね基調面な原理主義者はそうでそうじゃない人はひょっとしたらクライアントみたいな例えばリアクトだったらカスタムフックとか作ったりするんじゃないですかフック数とかにぶち込んでってことかなるほどなじゃあなんか

さすがにページに全部突っ込むっていうのはレアケースだと思ってるんで突っ込むんすかねわかんないでも1ページ単位で作るからそんなカオスになるかな例えばですよ複数のページでAPI呼び出したい同じAPI呼び出すことあるじゃないですか絶対複数のページあー

例えばだけどヘッダーでログイン状態だったらユーザーの情報をヘッダーに埋め込むよっていう場合だったらログインしてるユーザーが見るページには全部に必要ではない例えばそうです例えばっていう時は絶対に都度API呼び出しって言わないんですけどリアクトだとシングルページアプリケーションなんで都度呼び出すのがあるとしたらそれ使い回したいはずじゃないですかだったら絶対別ロジックに分けるじゃないですか分けるはい

みたいな感じでおそらく多分UI枠の分け方アーキテクチャーアトミックデザインとあとはロジックまとまりみたいなのが二股になるイメージかもしれないなと聞いてて思いましたおお

どうなんでしょうねどうなんだろうロジックのところのレイヤー分けはどうなるんだろうねレイヤーで分けるのかそれとも必要な関数だけ作っていくのか若干分かんないけど関数だけ作っていくんじゃないですかね言うてもだってねAPI叩くだけでしょあるかな他にフロントはなるべくそうしたいだからそうありたい多分そのフック数みたいなのがいてその下にいろいろなねなんちゃらクライアントなのかがいてでページ室からそいつを呼び出して取っていくんでしょうねそうっすねうん

なるほどはいでそういうふうに階層構造して分けて作ることによって割と整理された状態で再利用もしやすい状態になって嬉しいよねっていうそういうデザインの考え方ですね質問ですはい正直UIじゃないフロントエンドの開発そんな詳しくないんですけどとはいえ他のフォルダー分けの考え方と似てるなと思いましたとちょっと

特に何とは言えないんですけどよくあるじゃないですかページ全体があってその中のコンポーネントだけのやつがあってそういうのと比較してこのアトミックデザインを使うと何が嬉しいんですかそれで言うとですねちょっとこのアトミックデザインを使うメリットデメリット的なところが関係あるかなっていう気がするんですけどただ命名は直感的でいいですねなんか

原子分子有機物有機物有機物まあその分子の集合体って意味ですよねテンプレートも聞けばなるほどなって感じだけどでもテンプレート分けてるのってなんでなんだろう分けなくてもいいって思ったりもしませんそれがちょっと聞けると聞けるかどうかは分からないが

一旦まずこのアトミックデザインじゃあどういうところにメリットあるのっていう感じなんですけど一つあるのはこれ共通言語になるんで認識合わせしやすいですねそうですねすごいなんかあの分かりやすいですそうどこで何したらいいかっていうのが分かりやすいんでそういう共通言語になって開発のコミュニケーションが全員知っていればスムーズになるっていうのはありますね

別にでもそれは何かしらの思想に寄り添っていればこれに限らず言えることかなっていう気もする名前は一番分かりやすいかもなアトムスとモルキュルスモルキュルスなんて読むかも分かんないけど分子あとはオーガニズムス分かりやすいイメージしやすいですねあとは

こういう風な階層構造で分けておくと再利用がしやすいっていうのがありますねうんうんうんまあそうですね多分分子って分子レベルで再利用はなんかしやすそうですねそう分子レベルもそうだし見た目と配置を分けたことによって同じ見た目だけど別に配置したいよねっていう時に見た目だけ流用したりとかができるっていう

なるほど確かにテンプレーズいじればいいよねっていうことになるのかそう位置というか見た目の場所だけ変えるんだったらそうそうそうなるほどこれね僕あの謎のつながりを今見つけたんですけどはい僕あのプログラミングというかマークアップを教えるときにめっちゃその言ってたことがあってはいまず形作れって言ってるんですようん配置はどうでもいいから一回形作れって言ってうんその後に配置考えろって言って

教えてました形と配置は何が違うんですか例えばボタンを横並びにしたいっていう状況があったとするじゃないですかそしたら一回どこに並んでもいいから一旦まずボタン3つ作ってみたいな3つのボタンを横並びにするならねじゃあ適当に作ったら多分縦並びになりますよねまあそうねインラインだったらもしくはギチギチでくっついた状態で横並びになっちゃうかもしれないけど

一旦まずはその見た目をとりあえず作ろうと見た目と配置は分離できるから一旦見た目だけまず作っちゃおうかつって見た目作らせてその後に配置の仕方ちょっとじゃあ言語化してみてつって言語化させてそれを配置させるっていうのでやらせてたんですよそれとなんかちょっと近しいものを感じました見た目と配置は分離できるんだっていう確かになんか

そうなんだね言われるまでピンときてなかったけど確かになるほどとは思いますね見た目と配置マジでイコールだったわ今までの僕の考え方なるほどこれ分離させて教えるとね結構手が進みますへー

っていうのでそれが構造で今分かれてるのかってなった時に今ちょっとメリット見えましたなるほどそのためのテンプレートなんだあとはこういう風なコンポーネントを作っておくとデザインの統一性が出るとそれはあれだね他でも同じっちゃ同じコンポーネント思考で作ればだけど1から全部作るよりは絶対そうだよねっていう話だねこれは多分

そしてこの流度で分けて作ると基本的には単一原則に則った形になりやすいんで単一責任原則かに則った形に作りやすいんでテストしやすくなりますよっていうのもあるそうですねまあまあ適切に分けたら全部そうだなって思いつつ確かにこれはそうですねアトムズ単位でユニットテスト書けばいいはずだしって感じですねそうです一方デメリット大変

アトムズやばいことになるんじゃないかなって聞いてて思いますねなるかも分けすぎてもっていうところそうですねアトムズは多分量すごいことになりそうだし多分分子と有機体の境目が多分曖昧なやついっぱいあるだろうなって気もするしまあまあ確かに

思うのはこれは基調面にやったらなんですけど分子ですらここにしか使わないよなってめっちゃあると思うんですよね多分めちゃくちゃある多分大概そうだと思うんですよ大概そうでもその分子を分けなくてもいいのにアトムズに分けたことによってすごいことになりそうだなとは思うとはいえとはいえですけどねこれはこれでメリットあるでしょうけどねそう

とにかく階層多いんで1ページ作るのにめっちゃたくさんファイル作らなきゃいけないんですよ確かに初期コスト高いですこれ初期だけなんですねあとは使い回せるようになっていくよねだんだんねUIってそんな使い回すか特に管理画面とかだったらめっちゃ使えますから管理画面確かにそうですよね一生にするもんな確かにただ

でもそんな使いますっていうのはおそらく小さいシステムだとそんなことないまあそうですねだから小さいシステムには向いていないまずそもそもそうですねであとは挙げられているのは設計の難易度ですねやっぱりこれどこに分類するんだろうとかっていうのはやっぱり際どい判断多いらしいんで分子と有機体ぐらいかなで多分どっちかにめっちゃよるんでしょうね

おそらく分子がめっちゃ膨らむと思いますなんとなく分子がめっちゃ膨らみそうっていうのでちょっと設計はやや難しいよっていうのはありますねしかもこれチーム全員が本当に共通認識持ってないとすぐカオスになるのが目に見えるというか今時ねリードミーとかに変えておきゃねLLMがよしなのに判定してくれそうですねこれどっちに入ると思います?みたいな確かにね

そうだねそれ便利だなうんいやそう本当にだからねドキュメント書いた方がいいんですよねうんしかもそうかLLM使えば確かにめっちゃいいかもなうん勝手に分解もしてくれそうだなそう一個作ったらそう勝手に分解してくれるしめちゃくちゃいっぱいあるアトムズのテスト書いてくれそうだしうんうんテストとかはすごい楽になりそうそううん

なるほどねというのでアトミックデザインという手法がありますよとありがとうございますこれをサポートするツールも実はいくつかあってですね一つこれをやると結構問題になりがちなのは5階層もあるんで下のところまでプロップ数とか渡すのはちょっとバケツリレーしんどすぎるじゃないですか確かにっていう場合とかは専用の状態管理ライブラリ使って一撃で渡せるようにしたりとかそんなことできるの?できるんじゃね?リラックスとかリコイルとかあれとかは

いけるんじゃないかなっていう使ってあげればある程度そういうバケツリレーを防いで綺麗な形でデータを出せますよっていうことができたりとかあとはコンポーネントたくさん増えてきたら大変じゃないですかそれ扱うのが今何やんのみたいなのでファイル名見てもきついじゃないですかこれって使い回せるやつあるんだっけよ探せないと思うだからこそストーリーブックってのも結構役に立ちますね

ちょっと解説をお願いしますストーリーブックっていうのはそれ専用にファイル書かなきゃいけないんですけど本当にコンポーネントのカタログ作るためのライブラリみたいな感じですねなんでそのストーリーブック用のファイル作って自分が作ってあるコンポーネントをその中にインポートしてこういうパラメータを渡せますよっていう設定をしておくとそのコンポーネントをなんかこう

GUIでどんな使い方できるのかっていうのが一気にカタログ化されるみたいなのがあってこれを使うとコンポーネントの管理楽になりますよみたいなそういうエコシステム的なのもあるんでそういうのを活用するとより効率的に使っていけるんじゃないかなって感じですねなるほど

確かになぁなんか本気でUI作ったことないんでいやわかんない今まで本気出してなかっただけっていうみたいになってますけどそうじゃなくてそうじゃなくて短期開発じゃないでしかやったことないんでそういうストーリーブック使ったことないんですけど確かに長期で運用していくとかあとはなんかリッチめなページとかだと確かにあるとよーいですねそうねパーツ増えて増えてあれこれ被ってるじゃんってのがパッとでわかると思うめっちゃありそうだしなうん

一層ボタンのデザイン微妙に違うけどもこれ別に揃えてよくないとかも発見できそうだし確かにありそうなるほどねありがとうございますというのでアトミックデザインありがとうございましたでは最後お知らせですハッシュタグひまじんプログラマーでSNSでフィードバック募集してますので本日のエピソードの感想とかありましたらお願いいたしますフロントエンドじゃないんでここ間違ってるよとかあったら普通に指摘お願いします本当に我々を成長させてくださいお願いします

持ちつもたれつあとはポッドキャストの説明欄からGoogleフォームで番組の要望・感想・質問お待ちしてますお願いします何でも聞いてくださいお願いしますチャンネル説明欄からオンラインコミュニティの招待リンクありますのでそちらも興味ありましたらお願いします僕たちに質問とかができるかもしれないのりさんのパスタ日記とか見れるんですか書いてない書いてない言うて書いてないか書いてないはい

最後にポッドキャストのフォロー高評価お待ちしてますお願いしますそれではまた次回バイバイ

そして今番組終了1時間以内にGoogleフォームよりお便りを送った方はちっちゃいスペースキーも付いてきますポケットに入れて持ち運べますね番組の高評価フォローもすると会員割引なんと90%オフほぼただ今すぐご応募