「列固定のテーブルを作りたいけど、どうすりゃ良いんだ・・・」
（こーゆうやつ）
サーバーサイドエンジニアとして入社して半年、途中からフロントエンドも業務でやらせてもらってた私は会社で途方にくれていました。
一つ前の案件でReactを使ってカチャカチャと画面を作っていた経験はあったので、よくあるような画面なら普通に作れると思っていたんですよね。
（キレイなコードを書くとかはまだまだなんですが^^;）
ですが新しく配属された案件で、いきなり壁にぶつかることに。。。
それが冒頭でも話した
「列固定のテーブルを作る」
というタスクでした。
Material-UI使ってみっか
まず最初に思いついた方法は、Material-UIを使うというもの。
「前の案件でも使っていたし、有名っぽいし。
まあこれ使えば間違いないじゃろ」
と思った私が甘かったですね。
方法としては載っていたんですよ。
⇓これですね
しかも
initialState={{ pinnedColumns: { left: ['name'], right: ['actions'] } }}
という一行を追加すれば良いだけという。
「なんだ、簡単じゃん
Reactとか楽勝じゃー！」
と思ってたのもつかのま。
ドキュメントの通りに書いてみたのに、
正しく動かないという。。。。
「なんだこれ、動かないやん
このライブラリ、壊れとるやん！！」
と困ってよくよくドキュメントを読んでみると、
「Pro plan」
との文字が。
「ん・・・？Pro plan??
有料ってこと・・・？」
と悪い予感がしましたが、大正解。
列固定の機能は、お金を払わないと使えないとのこと。
「ダメやん・・・」
気づいたら１人呟いてましたね。
落ち込むの図
有料プランの課金をする許可を得るのも頭に浮かびましたが、一旦他の方法も考えてみました。
もうライブラリとか頼るの、やーめた
次に考えたのは、ライブラリを使わずに素のReactで書こうというもの。
「そもそもライブラリとか外部の便利なものを頼るから、
いざとなったら裏切られるんだ
（誰も裏切ってはない）」
そう思った私は、素のReactでテーブルを書き始めます。
。。。。ただ、めんどくさい。
だって、ライブラリを使わずにテーブルを書くとなったら、
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
{data.map((row) => (
<tr key={row.id}>
<td>{row.id}</td>
<td>{row.name}</td>
<td>{row.age}</td>
</tr>
))}
</tbody>
</table>
みたいな感じで、一個一個、行と列を書いてかないといけないし。
出来た形で一つひとつにスタイル付けてくのも、鬼めんどくさいという。
例えるならば、カレールウを使わずに、一からスパイスを混ぜて美味しいカレーを作るようなもの。
スパイスからのカレー作りはいつかやってみたい
「そんなん、めんどくさくて無理じゃ！」
と、生粋のめんどくさがり屋のワタクシは、3秒で諦めました。
落ち込むの図Part2
つよつよエンジニアに頼ろ
うすうす気づいていたものの、ここらへんから１人で作ろうとするのは厳しそうだと判断したので、フロントにめちゃ詳しいエンジニアの人に頼ることに決めます。
「人に頼れるのも勇気じゃ」
と開き直った私は、
「列固定のテーブルを作りたいだけど、どうすりゃ良いんでしょ」
と丸投げ丁寧に質問しに行きました。
（実際はもっとちゃんと聞きましたが）
すると、すぐさま返答が
「Ant Design使えばいいやん」
と。
「この人、シリコンバレーから来たのかな」
と思いましたよね、あの時は。
Material-UIというライブラリでは有料プランじゃないと列固定のテーブルは作れなかったけど、他のライブラリなら無料でも作れるとのこと。
そしてドキュメントを見て作ってみると、、、、
載っていました、列固定の方法が。
「本当に無料なのか・・・？
どこかに有料って書いてるんじゃないのか・・・？」
と一度裏切られた（裏切られてない）疑り深くなってた私は、かなり疑りながらもドキュメント通りに書いてみました。
「で、出来たぞ！列が固定されてる！！」
今度こそ、出来ました！
しかも、コードもめちゃシンプルという。
fixed: 'left',
という一行を追加するだけでしたから。
こうして無事に、作れましたとさ。
めでたしめでたし。
今回の件で学んだこと
で、終わろうとも思ったのですが、せっかくなので今回の一件で学んだことを。
「Ant Designってライブラリ便利だよ〜」
という学びも、もちろんあったのですが。
それ以上に
「一個の方法に固執してると
意外と選択肢が見えなくなるんだな」
ということでした。
なにやってんだ、これ。格付け的なあれか
もちろん私のエンジニアとしての経験が浅いというのはあるんですが。
テーブルを作るとなった時に
- ライブラリを使う
- ライブラリを使わずに頑張って書く
という2つの選択肢しか見えておらず。
第三の選択肢である
- 別のライブラリを探してみる
という方法が完全に盲点になってたんですね。
（そもそもMaterial-UI以外のライブラリがあるって知らなかったとは、口が裂けても言えない・・・・）
言われてみたら当たり前の方法だし、なんでそれ思いつかなかったんだって話なんですが。
でもその問題にどっぷりハマってる時だと、意外と見えなくなるものなんですよね。
今の会社に転職する時にも渋谷に会社があるので、近くの中目黒とか池尻大橋とかで家を探してたんですが、不動産会社に行ってみたら渋谷駅すぐの物件を紹介されて。
しかもそれが意外と安くて
「あ、渋谷駅に住むって選択肢もあるやん」
って気づいたりしました。
ハナから
「渋谷に住むのはないよな」
って先入観にとらわれて、あるはずの選択肢が見えてなかったんですよね。
寒そう・・・
「Material-UIってライブラリが有名だし、それでいけない機能は他のライブラリでも無理だよなー」
と勝手に思っていたように。
わりと人生全般で、陥りがちなトラップなのかなと。
隠れた選択肢を見つけるなら、外から見てもらお
じゃあ、そんな盲点になって隠れた選択肢に気づかなくなる問題は、どうやって解決すれば良いのか。
今回は、他の人に聞くって方法で解決しました。
１人で考えると、どうしても同じ選択肢の中でハマってしまいがちですが。
外から、しかも経験がある人から見てもらったら、意外と一瞬で解決策が見えたりするんですよね。
渋谷の物件を探し当てた時もそうてした。
これは意図的に隠してるが…てか何やってるん
もちろん、自分１人で試行錯誤することを放棄して、はなから
「わからないんで、教えてください〜」
と丸投げするのは良くないでしょうが。
あまりにも１人で考え込みすぎてドツボにハマるくらいなら、ぱっと経験のある人に聞くのも重要なことだなと。
改めて思った経験でした。
15分迷ったら聞くという「15分ルール」というものがあったり、エンジニアに向けての質問テンプレートまであったりしますから。
⇓私が書いたものではないですが、参考になりそうだったので
質問するのもスキルだくらいに思っておいた方が良いのかなって思いました。
ちなみに現在働いてるアルサーガパートナーズという会社では、質問したら優しく答えてくれる先輩ばかりですし、未経験からの採用も積極的に行っているので。
渋谷に住みたいエンジニアを目指したい方は、ぜひ！
一緒に働ける日を待ってます！
アルサーガパートナーズ株式会社のエンジニアによるテックブログです。11月14（木）20時〜 エンジニア向けセミナーを開催！詳細とご応募は👉️ arsaga.jp/news/pressrelease-cheer-up-project-november-20241114/
Discussion