この記事は、AEON Advent Calendar2023の20日目です！
ごあいさつ
こんばわんば！イオンスマートテクノロジーiAEON開発ユニットのholippyです。
iAEON開発ユニットでiAEONアプリを開発する仕事をしています（そのまま）。
専門はフロントエンドでこれまで受託のweb制作や自社サービス開発などを経験してきました。
ここまでのアドベントカレンダーではiAEONアプリ自体の説明ができていなかったので、そのあたり説明しつつ、iAEONアプリ開発における技術選定のお話をした後に、締めとしてメン募してみようと思います〜。
そもそもiAEONとは
まずここから説明せねばならないですね！
iAEONとは・・・
ポイントまとまる。支払いなめらか。
暮らしとつながる、イオンのトータルアプリ
・・・です！代表的な機能はこちら。
- WAONポイントをアプリ上でまとめて管理できる
- AEONPayによる決済を利用できる
- クーポンやキャンペーンなどのお得な情報をゲットできる
イオンのトータルアプリとしてお客様のお買い物を体験をより高めていくための機能追加や機能改善を日々続けています。
イオン系列のお店をよく利用される方は入れておいて損は無い、そんなアプリでございます。
iAEONて何でできてるの？
クロスプラットフォームモバイルアプリを構築するためのオープンソースであるionicを使用しiOS・Androidを同時に開発しています。
フロントエンドのフレームワークにはAngularを使用しています。
ionic + Angularを選択するに至った背景や開発時のひきこもごもはまた別のエントリーでご紹介できればなと思っております！
ここで今回のエントリーを思い出してください。アプリの開発で「tailwind CSSの導入を検討してみる」とはこれいかに？と思われた方、いたかもしれません。
そうなのです、iAEONの基本画面はJavaScriptフレームワークを使用したwebビューになっているので、実装にはスタイリングにはCSSを利用することになるのです。
本題に入るその前に
どうしてtailwind CSSが気になったのか
前々から名前をよく聞くので気になっていたところにWEB+DB PRESS(休刊悲しい😭)でtailwind CSSの特集があったので読んでみました。
webのアクセシビリティ向上に取り組んでいる会社で過去に働いてた経験や、セマンティックに書かれたHTMLは人にも機械にも読みやすいはず、という考えから「フロントエンドエンジニアとしてセマンティックなHTMLを書くべし」という指針が自分の中に色濃くあったのですが特集 Tailwind CSS実践入門を読んで目からウロコがぽろぽろ落ちたんです。。
というのも、iAEONのフロントエンドはAngularなのでHTMLとCSSを実装するのですが、アウトプットはアプリになるわけです。つまり、SEO・アクセシビリティを担保するためにセマンティックなマークアップは不要になります。
そしてJavaScriptのフレームワーク・ライブラリではUIパーツをコンポーネントとして分割して実装するため、ページ全体の文章構造の整合性をとるためのセマンティックなマークアップである必要性がそれほどありません。
そんなことがあり、個人的にtailwind CSSを試してみたいなーと思っていたところ、ちょうど開発チーム内で「CSSよくわかんない」という意見がちらほらあり、tailwind CSSがチームにおける開発上の問題を解消するツールになり得るのか、を検討してみたかったんですよね。
ただtailwind CSS使ってみたかっただけではあるのですが、それだけで技術選定を行うわけにはいかないので、ちゃんと目的・問題・課題を整理したうえで導入すべきか否かを考えられるようにドキュメント化してみました。
どうして技術選定の背景をドキュメント化するのか
tailwind CSS使ってみたいというHow（手段）ありきの不純な動機でも、技術選定の背景はちゃんとドキュメントとして残しておくのはいいことだなと思っています。
技術選定は、その時のビジネス上・開発上の課題を解決するための手段だったり、チームのケイパビリティに合わせた選択だったり、何かしらの背景があるはずです。
数年後に技術選定をやり直す場合当時との差分を可視化するために検討資料が役にたつんじゃないでしょうか。
「当時は課題だったみたいだけど、今はもう課題解消されているからこのツール消しちゃおう」みたいな決定が容易になるわけです。
以下検討資料（文字文字しくてごめん）
検討資料
目的
一定水準のCSSによるスタイリング技術をiAEON開発ユニット全体で獲得することで開発効率と品質の向上を目指したい。
背景
- アプリのフレームワークにionicを採用しているためアプリのスタイリングにはCSSを用いる必要がある。
- 開発チームはネイティブアプリやサーバサイドに強みを持っているメンバーが多くチームとしてフロントエンドの経験値が少ない。
- 新規画面作成時にデザイン再現性低下や表示崩れなどが顕在化している。
問題
| 問題 | 影響度 |
|---|---|
| （1）カラムレイアウト（grid, flex）やバッジ（position）などのレイアウトがどのようなプロパティの組み合わせで実現できるのかわからず実装に時間がかかる。 | 最高 |
| （2）プロパティの数が多くプロパティを調べるために時間がかかる。 | 高 |
| （3）BEMのルールに則ったclassの命名に悩み時間がかかってしまう。 | 中 |
| （4）セレクターの詳細度の関係で意図したスタイルが反映されず原因調査に時間がかかる。 | 小 |
課題
フロントエンド開発経験が少ないメンバーでも一定の品質が保てる開発手法やツール・フレームワークの導入とその運用。
打ち手案
| 案 | オススメ度 | メリット | デメリット |
|---|---|---|---|
| （1）デフォルトスタイルが準備されているCSSフレームワークを使用する | 低 | CSSのコーディングが不要になる | アプリのUIデザインがオリジナルなものなのでフレームワークのデフォルトスタイルを使用できない |
| （2）CSS実装の勉強会を実施しメンバー全体のスキルを底上げする | 中 | 中長期的にチーム全体でスキルの幅を広げていく方針とマッチしている | ・CSSの基礎から学習すると大きなコストがかかる ・ionicからネイティブに作り変えるなどの技術スタック変更があると学習コストが無駄になる |
| （3）デフォルトスタイルが準備されていないCSSフレームワークを使用する | 高 | ・オリジナルのデザインを適用できる ・CSSのコーディングが不要になるためHTMLだけで作業ができる |
ユーティリティークラスの学習コストは必要になる |
メリットに対してデメリットが少ないと思われる「デフォルトスタイルが準備されていないCSSフレームワークを使用する」を打ち手とする。
CSSのフレームワークはnpm trendsで比較し、導入実績が多い（ノウハウがオンライン上に豊富であろう）tailwind CSSを採用する。
tailwind CSS概要
- ユーティリティclassの組み合わせでスタイリングを行う。
- HTMLの編集だけでスタイリングすることができる。
- デフォルトのデザインは反映されていないがカラースキームなどはconfigで独自に設定可能。
打ち手案検討方法
iAEONアプリのヘッダー部分（赤枠部分）をtailwind CSSでスタイリングし、問題が解消するか判断する。
マークアップ
<header class="p-6 justify-center flex relative">
<h1>
<img src="img/logo-iAEON.svg" alt="iAEON">
</h1>
<button class="absolute right-8 top-4 before:content-[''] before:bg-red before:w-2 before:h-2 before:rounded-lg before:block before:absolute before:right-1"><span class="block text-center"><img class="inline" src="img/ic-notice.svg" alt=""></span><span class="block text-xs">お知らせ</span></button>
</header>
<nav class="px-4 py-2">
<ul class="grid gap-4 grid-cols-3">
<li><button class="shadow rounded-lg w-full h-14 flex justify-center items-center bg-white"><img src="img/logo-waon_point_his.png" alt="" class="w-16"></button></li>
<li><button class="shadow rounded-lg w-full h-14 flex justify-center items-center bg-aeon"><img src="img/logo_aeonpay-2.svg" alt="" class="w-14"></button></li>
<li><button class="shadow rounded-lg w-full h-14 flex justify-center items-center bg-white"><img src="img/logo-waon_w.svg" alt="" class="w-16"></button></li>
</ul>
</nav>
レンダリング結果
当初の問題が解消しているか
| 問題 | 影響度 | 結果 | 詳細 |
|---|---|---|---|
| （1）カラムレイアウト（grid, flex）やバッジ（position）などのレイアウトがどのようなプロパティの組み合わせで実現できるのかわからず実装に時間がかかる。 | 最高 | ✗ | まとめてレイアウトができるユーティリティクラスが存在しないためデザイン再現に必要なプロパティの組み合わせを理解する必要がある |
| （2）プロパティの数が多くプロパティを調べるために時間がかかる。 | 高 | ✗ | Cheatsheetを検索するためにはそもそもプロパティを知っていないといけない |
| （3）BEMのルールに則ったclassの命名に悩み時間がかかってしまう。 | 中 | ◯ | classの命名が不要になる |
| （4）セレクターの詳細度の関係で意図したスタイルが反映されず原因調査に時間がかかる。 | 小 | ◯ | tailwind CSSにより詳細度が統一されるため考慮が不要になる |
- 影響度の高い（1）（2）の問題は解消できていない。
- （3）（4）は解消できている。
tailwind CSSを使用して感じたメリット
- ユーティリティクラスをすぐに憶えることができないためCheatsheetを参照する手間はあるが、Visual Studio Codeの拡張機能を利用することで、補完が効くようになる。ある程度クラス名を憶えるとHTMLだけで作業できるようになるのはとても効率が良い。
- class属性値の命名を考える時間が不要になるので命名ルールに対してのレビューを行う必要が無い。
tailwind CSSを使用して感じたデメリット
- 結局はCSSの基本を知らないと使いこなせない
結論
- tailwind CSSを採用することで得られるメリットは開発効率向上に大いに寄与する見立て。
- しかしながら現時点ではtailwind CSSを採用することで影響度が高い問題（1）（2）の解決には至らないため採用しない。
- 問題（1）（2）はツールやフレームワークの採用では解消しないため打ち手案（2）「CSS実装の勉強会を実施しメンバー全体のスキルを底上げする」を実施する。
- チーム全体でCSS実装スキルの底上げを行った後に改めて打ち手案を検討する。
と、いうわけで今回はtailwind CSSの採用は見送りとなりました。
しかしながら、現在発生している問題に対して何も手を打たないわけにはいきません。
そこで、今回はチーム内でのスキルトランスファーを実施していきたいと考えています。
スキルトランスファーよくやってるの？
現在の開発チームはメンバーそれぞれで得意とするスキルが異なっているので、特定の業務が特定の人に集中する、なんてことが起こったりします。
そういう事態を少しずつ改善していくために、勉強会を開いたり、ペアプロしたりと、様々な形で日々スキルトランスファーを実施しています。
わからないことがあれば気軽に聞ける雰囲気が開発チームにはあるので、「こんな基本的なこと今更聞けないな」とか、「こういうスキル自分も身につけたいけど教えて欲しいって言いにくいな」なんて気にすることはありません。
今風に言うと、心理的安全性高めです！
どうしてこんなこと言い始めたかというと・・・
エンジニア絶賛募集中です！
エンジニア向け会社紹介資料できましたのでぜひご覧ください！
採用している技術スタックの幅は広いですが、その中で1つだけでも自信があるスキルがあれば問題ないです。
前述のとおり、スキルトランスファーを積極的に実施していますので、足りない技術は入社後に身につけていきましょう。
開発現場の生の声を聞いてみたい！などありましたら気軽にお声がけください。
下記サイトからカジュアル面談をお申し込みいただけます。
ぜひ色々とお話しましょう〜。
まとめ
- iAEONとはイオンのトータルアプリだ。
- iAEONはionicとAngularで出来ている。
- たかがCSSされどCSS。全員が「CSS完全に理解した」まで到達するのはけっこう大変。
- tailwind CSSは銀の弾丸になりえるだろうか（いや、ならない）。
- iAEONを一緒に開発していく仲間を大募集中。
いかがでしたでしたか？
検討の結果、tailwind CSSは採用には至りませんでした。
tailwind CSSのノウハウについて知りたいと思って読んでくれた方、ごめんなさい。
いかがでしたかブログみたいになっちゃった。
今度はもっと技術的な内容で書きたいなー。
それでは、シャローム！
Discussion