キカガク プラットフォームブログ

株式会社キカガクのプラットフォームブログです。エンジニアやデザイナー、プロダクトマネージャーなどが記事を書いています。

ライブラリ依存症に陥った話

こんにちは!株式会社キカガクの開発事業部でソフトウェアエンジニアをしている塚井です。数ヶ月前からフロントエンドエンジニアとなるべく奮闘中です。今回はそんな中で経験したライブラリ依存症に陥った話を書きたいと思います!

対象読者

フロントエンドエンジニアを始めたての方。

今回伝えたいこと

まず、「ライブラリ依存症」は勝手に作った言葉のため定義をします。

車輪の再発明をしてはいけないと考えるあまりライブラリに依存しすぎて結局遠回りしてしまう症状」のことです。

今回はその戒めとして、ライブラリに頼りすぎたが故の失敗エピソードを紹介します。

エピソード 1 :パンくずリストの無駄な余白

パンくずリストをつける際、ちょうど利用していた UI パッケージにパンくずリストがあったのでそのライブラリを採用しました。

パンくずリスト(参考)
結果、変な余白がつくという現象が起き、原因が分からなかったので margin にマイナス値を設定するパワープレイで修正していました。 ふと冷静になったときにライブラリを使わなくてもできるのではと気付き、一から組み直したところあっという間に思い通りの見た目にすることができました。

エピソード 2 :ポップアップ内の tab キーの動作不良

検索機能をつけることになり、虫眼鏡ボタンを押したら検索ボックスをポップアップさせる実装をしていました。その際、利用していたライブラリとの相性が悪くて起こった不具合の調査が難航しました。

不具合の事象は、Google 入力などの予測変換機能で確定のために tab キーを押すと、検索ボックスが閉じてしまい確定できないというものでした。

検索ボックスで予測変換

原因は利用していた検索ボックスをポップアップさせるライブラリが tab キーで次のコントロールにフォーカスを移すようになっていたためでした。しかし、ポップアップの中身をコンポーネント化していたこと・フロントエンドの経験が浅いことも相まって、中身のコンポーネントが原因であると考えてしまい、tab 押下時に IME 変換中なら処理を中止するなど試しましたが直らず…そもそも中身のコンポーネントに処理が渡ってきていないことに気付き、ポップアップのライブラリを疑うような遠回りとなってしまいました。

不具合の対処として、ポップアップしたいだけならライブラリを使わなくてもできるはずなのでこちらも一から作成しました。

学んだこと

2 つのエピソードで共通しているのは、ライブラリを検討もせずに利用したせいで思わぬ動作を招き、原因調査に時間をかけてしまったという失敗です。これからは実装する前に、考えなしでライブラリを探すのではなく、必要性を検討した上で最適な実装をしていきたいです。

紹介

今回のエピソードに限らず、車輪の再発明も悪くないという素敵な記事があるので最後に紹介しておきます。

xn--97-273ae6a4irb6e2hsoiozc2g4b8082p.com

おわりに

キカガク開発事業部では一緒に働いてくださる方を募集しています!
もしご興味があれば、採用情報の「話しを聞きに行きたい」ボタンから、カジュアル面談のお申込みをお願いします!

www.wantedly.com www.wantedly.com www.wantedly.com