JavaScriptのライブラリを作るのにハマった話

インターンを初めて早1年

昨年(2020年)の9月頃にWeb系の企業で長期インターンを初めさせてもらってからもう1年が経ちました。インターン先の企業の方々のご指導のおかげで、自分で1つのサービスをリリースできるまでに成長できました。プログラミングのスキルだけではなくて、「世の中のサービスの動向はどうなっているのか」や「どういうことが世の中に求められているのか」など、さまざまなことを学ばせてもらっていて、「エンジニアってどこがゴールなんだ...そもそもゴールなんてないのかな」なんて思いながら走り続けています。

Web制作をしていると思うこと

インターンでの業務だけではなくて、今年に入ってから個人的にもWebサービスを作るようになって、ポートフォリオサイトとかエンジニアツールなどを作りました。とは言ってもあまり完成度の高いものは作れていなくて、あくまでも"ブラウザで見ることのできるサイト"を作っただけだったので、「せっかく作ったし自分のサイトだからクオリティを高めていきたいなあ」と思う時があります。でも「自分はデザイナーのようにおしゃれなサイトは作れないし、外注なんてそんなお金ないよ...」って感じで...でもどうにかクオリティ高く見せるにはどうしたらいいかを僕なりに考えた結果、「まずいろんなサイトを調べまくろう！」ってなったんです。

有名サイトはユーザビリティがしっかりしている

"ユーザビリティ"って言葉を聞くようになったのもインターンを始めてからで、なんなら最近その意味を知りました。やっぱり色んな有名サイトを見ていると、ユーザビリティがとてもしっかりしていて、JavaScriptが多く使われているなあ...と思いました。特にTwitterとかGoogleカレンダーとかは使いやすいなあと思ったり、他のエンジニアやデザイナーを目指しておられる学生の方のポートフォリオサイトは見やすくて伝えたい部分が動きでわかるなあと思ったり。あとはこれはデザイン面での話になってしまうかもですが、Appleのサイトのアニメーションすごいですよね(と思った反面、iPhone13はまた指紋認証つかないのか...とがっかりしたのを覚えています笑)。なんて感じで、既存のサイトを見てみると色んなことを得られました。

JavaScriptでできること

有名サイトではJavaScriptを使って以下の機能が実装されていました。 - アニメーション - 表示の切り替え - ポップアップ - バリデーション(入力の検査) - 非同期通信 JavaScriptはクライアントサイドの言語なので1番ユーザーに関わる部分で、JavaScriptを使えば格段にユーザビリティが上がるなあと思うのと同時に、動きがあることで高級感も出るなあとも思いました。

JavaScriptってなくてもサイトは作れるんだよなあ...

JavaScriptのすごさは十分知ったんですが、「でもJavaScriptなくても実装できるよなあ」って思ってしまったんです。よくない考えだとは思うけど、でも事実。PHPとかRubyを知ってればWebサービスなんて作れてしまう。わざわざ時間をかけてJavaScriptで追加で機能を実装する必要があるのか...

ライブラリにして、いつでも簡単に使えるようにしよう！

実装するのがめんどくさいならライブラリみたいにして簡単に使えるような感じで作っておけばいいんだ！って。これもインターンで学んだことで、「プログラムは使いまわせる部分は使い回すと便利だし楽だから、後から使いやすいように実装することも重要だよ」って教えてくださったんです。確かにその時に必要なプログラムだけを書いて余分なことは書かないって考えも重要だし良いとは思うんですが、やっぱり長い目で見た時に後々に同じプログラムを書く作業を何度もやるって効率が悪いと思うので、ライブラリという言い方は少しカッコよく言ってしまいましたが、単に関数とかモジュールとかを貯めていくことって将来的にも重要だなあって思います。

バリデーションってよく使う

インターンで作成しているサービスや自分で作るサービスには「ユーザーに入力してもらう」ことが多くあります。入力をしてもらって、その内容をサーバー側に送って、結果を返すって処理をよく書きます（なんかこの部分も毎回違うけど同じようなこと書いているので、うまく使い回しできるようにならないかなあと思っているところです）。もちろんPHPなどのサーバーサイド言語でバリデーションを行っているので、バグとかその点は大丈夫なんですが、やっぱりユーザー的には、「間違ってんなら先に言ってくれよ」って感じると思うんです。てことでJavaScriptライブラリ第1弾としてJSバリデーションライブラリを作りました！

時間はかかった...けど良いものができた！

やっぱり簡単にJavaScriptでバリデーションできるようにするには、簡単なコードでは実装できません。行数的には1000行以上いっていたので、結構大変でした。が、満足のいく良いものが作れたのではないかと自画自賛しています（笑）エンジニアってこう思う時が1番やりがいを感じると思うのですが、他の方々はどうなんでしょうか...

また第2弾も

JavaScriptは色んなことが実現できるなあと思っていますし、今回でだいぶ今後の実装が楽になったなって感じたので、また煩わしい実装？があったら、第2弾として作りたいなと思いました。今回作成したJSバリデーションライブラリはGitHubに公開しているので、良かったらぜひ使ってみてください！（まだREADMEとか書いてないです！そのうち書きます！）アドバイスもあればこちらからご連絡お願いします！