![](https://images.logmi.jp/media/article/331400/images/main_image_104958907d2aa387124e5b931e5af9bfeef2a68f.jpg?w=600)
2025.02.18
「売上をスケールする」AIの使い道とは アルペンが挑む、kintone×生成AIの接客データ活用法
ワイヤーからReactでAtomicDesignを実装するまで(全1記事)
リンクをコピー
記事をブックマーク
atsss氏:よろしくお願いします。
(会場拍手)
すいません、僕あまりお世話になっていないんですけど、これからお世話になるかもしれないなと思って、LTしに来ました。
伊藤敦之と申します。株式会社ローカルワークスでいま新卒2年目です。Railsエンジニアとして働いています。
「お世話になる」ということで無理やりこじつけたんですけど、いつもお世話になっているのはSketchで、Railsにももちろんお世話になっています。これから新しいプロダクトがあるので、Reactにお世話になろうかなと密かに思っている状況で来ました。
会社としては、遅ればせながらReactの導入を考えているという状況です。
Reactはけっこう昔からあるライブラリなんですけど、1年前に触って、それから本番に導入するために触らなきゃいけないなと思ってました。なので手始めに、バックエンドはRailsでフロントをReactで簡単に作って、1年前を思い出すということをしました。次に、reduxをちゃんと勉強しなきゃいけないなと思って、react, redux で簡単なアプリケーションを作って勉強しました。
最後に本番導入を判断するためには、きちんともっと大きなアプリケーションを作ってみて、使えるかどうか判断しなきゃいけなと思いました。なので、Slackのコピーを作って、裏側はElixerのPhoenixで作って、表側はReactで作るということもしました。
また、UIのコンポーネント設計をちゃんとしたかったので、Atomic Designを使ってやってみました。
これはデモなんですけど、ちゃんとWebSocketにつないであって、「ちゃんとSlackっぽく動くよね」みたいな。CSSも自分でがんばって書きました。
ここまでやると、「Reactってなんとなくわかってきた! イエーイ!」とハッピーな感じになってきて、勝手に本番に入れてみました。
新規事業だったんですけれども、いきなりそこでモノは作れなかったので、まずワイヤー引いてみましょうと。
でもプロトタイプぐらいだったらそんなに難しいこともなく、デザインも僕ができちゃうので、モックも作ってしまいました。それに対して社内でフィードバックをもらって、メモを残せるようなかたちにしていきました。
たまたまなんですけど、このワイヤーに対してのコメントがだいたいロジックになっていて、モックに対してのコメントがユーザーインタビューとかユーザビリティテストの対象になりました。
モックがここまでできるとだいたいDB設計もできるようになるので、社内のネゴを取りながら次のステップに進むことができました。
Sketchなんですけど、この段階ではSymbolを丁寧に作りましたって感じですね。Atomic Designの本を読んで、ちゃんとそれに則るようなAtomic Designを作ってみました。
これはこのままコンポーネントになるので、このあとUIのことを考える必要がすごく減ってよかったなというのと、あとSketchって修正が簡単なので、社内とネゴるときにいろいろ楽だったなと思います。
僕はRailsで実装するのが早かったので、最初にRailsで実装してみようと思ったんですけど。こんな感じで、基本的に全部コンポーネントに切り出してあるので、あとは外部から必要な値を入れてあげるとそのとおり表示されるみたいなものを作って、SymbolをRailsのパーシャルっぽく切り出しまいた。、そのSymbolの単位でCSSModuleっぽく、パーシャルに1対1になるようにCSS書き出しました。
RailsにはhelperというViewのロジックを仕込めるところがあるんですけど、さっきのワイヤーに出されたロジックはそこに押し込んで管理しておきました。
ここまで来たら、RailsはHerokuにデプロイするのがすごい簡単なので、いったん上げちゃいました。
ここでできたプロトタイプは、さっきのモックを書いた時のユーザーインタビューとかユーザビリティテストみたいなのに使われました。また、スタートアップなので、関係各所、一緒にやっている会社さんとか、株主の方に説明するときのデモに使われるのにけっこう重宝されました。
ここでやっとReactで、大したこと書はいてないんですけれども。アイコンを表示するときのコンポーネントは、こんな感じで、Railsのパーシャルの単位でコンポーネントをまず作り、CSSはそのままコピってくるだけという状態になってます。ReactnoContainer Componentはhelperに書き出したロジックををそのまま書き出せば、あとはそのまま実装できるかなという状態になりました。
すごいイイ感じだなと思って、またハッピーになりました。
でも、よくわからないこともたくさんあって、ここはどうしてるのかなって聞きたいんですけれども。middlewareがどんどん肥大していくなと思っていてます。
ここはAPIの通信してるところなんですけど、非同期通信が多いからどんどん肥大化していってます。みなさんがmiddlewareの管理ってどういうふうにしてるのか気になります。
あと、Reactってテストのライブラリがたくさんあって、僕はテスト書くの基本的に好きなんですけど、こんなに書いて管理するのはちょっとしんどいなと思っています。
最後に、コンポーネントの管理も課題だと思っていて。「これってmoleculesだな」みたいに思ったら、実装中にけっこう変えたりしてました。いまは僕しか開発もデザイナーもいないので、僕がStorybookで管理できていればいいんですけども、デザイナーさん入ったときにSketchのSymbolとStorybookが乖離しているとすごいやりにくいかなと思っています。
それでもなんかいい感じだなと思っていて。非同期でヌルヌル動く体験ってすごいユーザーにわかりやすいなと思ってるし、React Nativeもあるので、ネイティブアプリ化も捗るなと思っています。もともとそれが目的でReactをやろうと思っていたんですけど、それがいいなと思っています。
以上です。
(会場拍手)
関連タグ:
2025.02.13
“最近の新人は報連相をしない”という、管理職の他責思考 部下に対する「NG指示」から見る、認識のズレを防ぐコツ
2025.02.13
AIを使いこなせない人が直面する本当の課題 元マッキンゼー・赤羽雄二氏が“英語の情報”を追い続ける理由
2025.02.06
すかいらーく創業者が、社長を辞めて75歳で再起業したわけ “あえて長居させるコーヒー店”の経営に込めるこだわり
2025.02.12
マネージャーは「プレイング3割」が適切 チームの業績を上げるためのマネジメントと業務の比率
2025.02.14
報連相ができない部下に対するコミュニケーションの取り方 「部下が悪い」で終わらせない、管理職のスキル向上のポイント
2025.02.13
上司からは丸投げ、部下からはハラスメント扱い、業務は増加…プレイングマネジャーを苦しめる「6つの圧力」とは
2025.02.12
何度言っても変わらない人への指示のポイント 相手が主体的に動き出す“お願い”の仕方
2025.02.13
「みんなで決めたから」を言い訳にして仲良しクラブで終わる組織 インパクトも多様性も両立させるソース原理
2025.02.10
32歳で「すかいらーく」を創業、75歳で「高倉町珈琲」で再起業 「失敗したからすかいらーくができた」横川竟氏流の経営哲学
2025.01.07
1月から始めたい「日記」を書く習慣 ビジネスパーソンにおすすめな3つの理由
着想から2か月でローンチ!爆速で新規事業を立ち上げる方法
2025.01.21 - 2025.01.21
新人の報連相スキルはマネージメントで引きあげろ!~管理職の「他責思考」を排除~
2025.01.29 - 2025.01.29
【手放すTALK LIVE#45】人と組織のポテンシャルが継承されるソース原理 ~人と組織のポテンシャルが花開く「ソース原理」とは~
2024.12.09 - 2024.12.09
『これで採用はうまくいく』著者が語る、今こそ採用担当に届けたい「口説く」力のすべて
2024.11.29 - 2024.11.29
第20回エクゼクティブメンターイベント「今、「ひと」と組織が共創する〜働き方の未来へ」
2024.12.07 - 2024.12.07