アフィリエイト広告を利用しています

2024年01月27日

できた、できたと言っていたアプリについて喋りますよ


おはようございます、こんにちは、こんばんは、コーヒー好き見習いプログラマーのアキラです。今日は、いま現在のアプリ開発状況などについてお話ししようと思います。
たしか、何週間か前に、残り10%ぐらいで、100%だと豪語していたと思いますが、すみません、まだ、まだ10%ぐらいです。
思っていた以上に面倒くさいことになっていて、苦戦しています。

なので、

今日は、そのことについてのお話と思ってください。
どうぞ〜


DragonImage.png

キャッシュって面倒くさいよね


先ほど、面倒くさいことになっていると言いましたが、その答えがタイトルにあります。それは、『キャッシュ』についてです。
『キャッシュ』とはなんぞ?
思っている方もいるのではないでしょうか?
恥ずかしながら、僕も、プログラマーを目指す前までは、どういうもので、どういった意味があるのかを専門的には知りませんでした。
ですから、先に『キャッシュ』について、お話ししてから本題にはいりましょう。
先に言っておきますが、ここでの『キャッシュ』は、”現金”という意味ではありませんよwww


DragonImage.png

キャッシュってなんだろう?


調べるのも、面倒くさいので、ここは、やっぱり『AI』先生に聞くことにしましたよ


問:プログラミングやITにおいてのキャッシュとは、どういう意味でしょうか

↑上が、僕が聞いた問いで、↓下が、その答えになります。


答:キャッシュ(cache)とは、コンピューターシステムやプログラミングにおいて、データを一時的に保存することで、高速なデータへのアクセスを可能にする仕組みのことを指します。具体的には、低速な記憶装置や伝送路から読み出したデータのうち、直近に読み込んだものや使用頻度が高いものを高速な記憶装置に複製しておくこと。

例えば、ウェブブラウザのキャッシュは、1度開いたウェブページのデータを保存しておいて、次に同じページを開くときに素早く表示させる仕組みです。このように、キャッシュはデータの読み込みを高速化したり、伝送量を削減することができます。ただし、キャッシュにより一時的に保存されるデータが膨大になれば、パソコンやスマホの容量を消費してしまうというデメリットもあります。また、キャッシュは必要に応じて削除することも可能です。これらの特性から、キャッシュはコンピューターシステムのパフォーマンス向上に大いに寄与します。

『キャッシュ』の重要性がよく分かりますよね。

けど、今回は、この『キャッシュ』があることで、問題が発生したんですよね〜


DragonImage.png

『vercel』と『mongoose』


では、本題です。今回問題が起きたのは、『mongoose』(マングース)といわれるMongoDBオブジェクトモデリングといわれるシステムです。MongoDBとは、データベースと一種で、”スケーラビリティと柔軟性を備えたクラウド分散データベース”といわれており、NoSQLデータベースの一つでもあります。ついでに、SQLデータベースには、 MySQLやPostgreSQLなどがありますよ。


DragonImage.png

ちょっと、話しがそれましたが、僕が、アプリ開発に使用しているデータベースは、『MongoDB』で、作成したデータベース操作に必要なのが、『mongoose』なのです。
『mongoose』の中に、"Model.find()"という機能のがあり、これは、作成したデータベースの中から、検索をかける機能を持っており、これが、問題の原因ということが判明しました。
"Model.find()"は、特に検索ワードなどの引数を記述せず、()の中身を空白にすれば、指定したデータベースのドキュメントの全てを取得できるという特性を持っています。

作成したデータベースのドキュメント全てを取得したいとき、そのデータベースを指定すれば全てのドキュメントを取得できます。しかし、今回の問題の原因になりますが、この"Model.find()"は、デフォルトで、キャッシュを使う仕様になって、使用していた当初は、知りませんでした。


mongodb-mysql.jpg


ローカル環境の時では、特に問題がなくアプリが動きますが、デプロイ時に提供されるURL先では、"Model.find()"を使ったページだけ更新されないということに陥っていました。

更新されるのは、新しくコードを記述しビルド時の更新時だけ、最新のデータベースに切り替わるという状態です。
つまり、データベース操作の基本である、『CRUD』新規: Create、読み込み: Read、編集: Update、削除: Delete、の操作をしても、画面上では以前のままで、更新できないということです。
アプリ内で、新規作成を行っても作成されず、既存のデータを編集しても更新されず、削除しても削除されないということがずっと起きています。
しかしながら、この現象は、画面上のみで、実際の保存先であるデータベース内では、ちゃんと更新ができており、とても、面倒くさいことになっていました。
色々と調べた結果、キャッシュに問題があるのではないかと結論づけ、その方向で問題に取り組んでいました。
が、問題は、なかなか解決できませんでした。
最初は、ブラウザのキャッシュかと思い、強制的にクリアにしてみたり、『キャッシュ』対策用のコードに書き換えてみたり、考え付く限り実践しても解決にはいたらず、頭を抱えていました。
そんな時、『mongoose』の"Model.find()"の部分に、着目しました。
実は、"Model.find()"の他にも、"Model.findOne()"という特定ドキュメントを検索する機能も『mongoose』にはあり、僕が、作成しているアプリの削除と編集は、一つだけのドキュメントを使う仕様なので、必然と、検索するデータ(ドキュメント)が一つのみなりますので、"Model.findOne()"を使っていました。

"Model.findOne()"を使用したページに限り、最新データに更新されていて、"Model.find()"といった全てを検索し取得するページに限り更新されないということに着目しました。

そこで、色々調べた結果、最初に言ったのですが、"Model.find()"に限れば『mongoose』の『キャッシュ』から取得していたということに気が付きました。


DragonImage.png

『Nelify』を試したが…


そこからが、簡単で…というわけにいかず、『mongoose』自体に、キャッシュ操作を行う仕様ではないので、調べると『mongoose』のキャッシュに対して操作を行える機能を発見した、が、それ自体が古く『mongoose』のバージョンを大幅にダウンさせないと使えなかったので、却下いたしました。
結局どういう対策を行うかというと、とても簡単で、「デプロイ先、変えればいいやん。」です。
いままでのデプロイ先は、『vercel』というWebサービスを用いていたのですが、「そもそも、デプロイ先変えてみたらどうなるの?」という疑問が生まれ、とりあえず、僕が知っているWebサービスの一つ『Nelify』にて、再デプロイを行い、そっちのURLで試すと問題が解決したのです。
「よし、そっちに変更だ!」と思ったのですが、
また、問題が、『Nelify』で起きました。
それは、延々と続く強制読み込みのループになります。
どういうことかといいますと
僕の開発したアプリは、登録しログインした者でないで、強制的にログイン画面に転移するようにしています。
URL入力によってログインせずにアプリを操作させないためです。
しかし、その”強制的にログイン画面に転移するように”したことがループの原因となっており、なぜか『Nelify』の方では、これが問題となっている模様です。
実際、『Nelify』を試すときは、ログイン画面転移機能は、切った状態で行いました。


DragonImage.png

終わりが見えてきたが、実際は...


壁が立ちはだかり、乗り越えてもまた、壁が立ちはだかるという状態…
『どうしようwww』
ここまでくると笑うしかありません。
さーて、来週からの解決方法?


  1. 他のデプロイ先を探す!
  2. 『Nelify』で問題を解決!
  3. いやいや、男なら黙って『vercel』で問題を解決!

の三本になります。あるアニメからの文言を使ってみたものの、問題は解決しないので、順番に上から行い、解決できた方法をとろうと思っているところです。


そもそも、『vercel』チョイスした理由は、僕が開発しているアプリに使用しているのが、Next.jsというReactベースフレームワークになり、そのNext.jsと親和性が高そうだったという理由な上、僕が参考にしているデジタル書籍の中でも使っていたこともあり、チョイスしたということです。ぶっちゃけ、みんな使っているなら、これでいいよね。みたいな感じでつかったので、来週からは、とりあえず、他のデプロイ先を探してみるつもりです。


まぁ、これが、現状の報告とこれからの報告になります。再び、予定がずれそうな予感がしますが、結果報告は、また、来週ということで、またね。


DragonImage.png

この記事へのコメント
コメントを書く

お名前:

メールアドレス:


ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバックURL
https://fanblogs.jp/tb/12402847
※ブログオーナーが承認したトラックバックのみ表示されます。

この記事へのトラックバック
検索
プロフィール
アキラさんの画像
アキラ
どーもアキラです。 コーヒーのまだ見ぬ世界をご紹介します。 自称コーヒー大好きです。そして、エンジニアになるべく、日々勉強中、これからは、そういったお話もできたらと思っています。
プロフィール
最新記事
写真ギャラリー
カテゴリーアーカイブ