昔作ったWebサイトを作り直して自分の成長を少し感じた話
こんにちは👋
今日は1年ほど前に作った「バビ語変換サイト」というWebサイトを作り直したときのことについて書いていきたいと思います。
作成したサイトの概要
簡単に説明しますと、ユーザーから入力された文章をバビ語と呼ばれる、ある規則に沿って変換された文章に変換して遊ぶことができるサイトです。
バビ語とは？
簡単に説明すると、もととなる文章の文字の間に「バビブベボ」を挿入したものです。挿入にはルールがあり、対象となる文字がア段ならその後ろにバを挿入、イ段ならビ、ウ段ならブ、エ段ならベ、オ段ならボを挿入します。
例）びわこ → びびわばこぼ
自分自身はバビ語ではなくラリ語（「バビブベボ」の代わりに「ラリルレロ」を挿入する）しか知らなかったので、最初はラリ語への変換を考えていたのですが、世間的にはバビ語の方が知名度が数段上ということでバビ語への変換を行うことに決めました。
旧サイトはどのような感じだったのか
当時の開発日記のようなものが以下のサイトにありますので、詳細を知りたい方は以下のリンクからどうぞ。ここではざっくりと説明したいと思います。
まず、使用技術としては以下になります。
- Python3
- HTML5
- Sass
- Django
- Tailwind CSS
大学の研究でPythonを使用していたため知識があった（というより、サイト作成という目的に対して満足に扱える言語がPythonしかなかった😇）のと、バビ語への変換の過程でユーザーから入力された文章の漢字部分をひらがなに変換する必要があり、その手法として自然言語処理などでたまに使っていたpykakasiというPythonライブラリの使用を検討していたため、WebフレームワークにDjangoを採用しました。
また、CSSの部分については当時注目されつつあったTailwind CSSをメインに、個人的に微調整したい部分についてはSassを使用して見た目の調整を行いました。
検索結果でもまあまあの位置に出てきてくれるようになったのが嬉しかったこともあり、サイトの作り直し後も旧サイトは生かしてあるので、どんな感じなのか体験したい方は以下からどうぞ。
旧サイトで気になっていた部分
サイトとしてしっかり機能しているので、大きな問題となっている部分はありませんでしたが、技術的に気になる点や改善したい点はあったので、それらについて紹介したいと思います。
ひらがな化APIを採用したのでPythonを使用する必要がない
「ユーザーから入力された文章の漢字部分をひらがなに変換する際にpykakasiを検討した」と書きましたが、pykakasiの対抗として考えていたのはgooラボから提供されているひらがな化APIでした。両者を比較した結果、より変換精度の高いひらがな化APIを採用することになりました。ひらがな文章からバビ語への変換はどの言語でも書けるような処理になっているので、結果としてPythonを使う理由がない状態でした。
バビ語への変換のたびにページ遷移が起こる
Djangoを使用している影響もあり、入力ページで文章を入力 → 変換ボタン押下 → 変換結果表示ページへ遷移 → 再度文章の変換を行いたい場合は戻るボタンを押下 → 入力ページへ遷移という流れになっていました。何度か文章を変換して遊びたいユーザーにとっては、前述のように何度もページ遷移を繰り返すのはストレスになってしまうだろうと感じていました。
Djangoではオーバースペックすぎる
API通信を行い、その結果を少し加工して画面に表示しているだけなので、Djangoの能力をほぼ使用していない状態でした。旧サイト作成当時は自身の技術スタック的にも「Djangoが一番躓かずに実装できるかな」という感じだったので仕方ない部分もありましたが、後に色々な技術に触れていく中でこの部分についてより気になってくるようになりました。
結局、サイトを作り直すことに
Djangoを使う理由もない、Pythonを使う理由もない、ということで、ひらがな文章からバビ語への変換ロジックだけ受け継ぎ、更地から作り直すことに決めました。
新サイトの使用技術は以下になります。
- TypeScript
- React
スタイリング手法にはstyled-componentsを採用しました。
新サイトで改善された点
まず、Reactを使用することでバビ語への変換の際にページ遷移が行われる問題が解消され、UXの向上に繋げることができました。
次に、旧サイトの平成初期的なデザインに対して、暖色の淡い色をメインとして重要な部分に濃い色を使用するようにし、サイトに訪れたユーザーが持っている「バビ語ってなんだろう」、「バビ語に変換できるサービスなんてあるのか！」というワクワク感にマッチするようなデザインにしました。
最後に、これはユーザーには関係のない部分ですが、GitHubのブランチを実装機能ごとに結構細かく切って作業を行うようにしました。これによって、自分が個人開発でよく陥っていた「Aの実装を行っていたのに、Aに関連するBも合わせて実装しようとした結果、作業が遅くなる」という問題を回避することができました。ブランチを細かく切ることで「何を実装するのか」という目標がブレなくなるので個人開発では特に重要かなと思いました。
まとめ
旧サイトの作成当時の自分はWebサイトの作成に対して満足に扱える言語がPythonしかなく、個人で何か作りたいと思ったときの思考としては「Pythonで何か作りたいな → これを作ろう」だったのですが、他の技術を学んでいく中で、「こういうモノを作りたいな → あの技術を使えば実現できそう、開発がしやすそう」という思考に変化していきました。
前の文で「他の技術を学んでいく中で」と書きましたが、Reactでフロントエンドの勉強をしてみたり、Flutterを使用して実際にアプリをリリースしてみたり、CrystalでAtCoderをやってみたり、色んな事をやりました。まぁ、色んな事に手を出しすぎて「なんか、広く浅くの技術しかついてないな...。自分のスキルをアピールするときに、どれもこれも中途半端な技術力だからネタとして弱いなぁ...。」と不安に思うこともありましたが、この経験のおかげで、気になる技術を積極的に試す姿勢が身につきましたし、結果的に自分の極めたい分野を見つけることもできたので、「あの日の学びは無駄じゃなかったんだな」と今になって思います。
今の世の中、自分が取り組んでいることや、実務で解決した課題についての記事をZennなどでつよつよエンジニアの方々が沢山発信してくれている影響もあり、それらの記事を読んで、ついそういった方々と自分を比較して自己肯定が低くなってしまうことも多いのですが、たまには自分だけと向き合い、自分を振り返って「あの時からここが成長したな」と、自分をよしよしすることも大事だなと思いました。
というわけで、以上、昔作ったWebサイトを作り直して自分の成長を少し感じた話でした。
最後までお読みいただきありがとうございました。
Discussion