ハンドメイド作品をメタバース空間で展示・販売するデジタルショップを開設するという夢と目標を掲げて、今回はJavaScriptを活用してチャットアプリを作ってみました。
目次
チャットアプリ作成の学びとステップ
今回もChat-GPT4の力を借りて、プロジェクト制作を進めます。
使用した技術の概要
今回新たに学んだ技術は
Node.js:
サーバーサイドJavaScript環境。非同期I/Oに優れており、高速な処理が可能です。
学びのポイント: 非同期プログラミング、イベント駆動型アーキテクチャの理解。
Express:
Node.jsのための軽量なWebフレームワーク。ルーティングやミドルウェアの機能を提供します。
学びのポイント: ルーティングの設定、ミドルウェアの活用。
AI手動で作ってくれていましたが、今思えばPHP学習の時にもあったルーティングをこれが行なってくれいたんだな、と記事を書きながら認識できました。
Socket.IO:
リアルタイムの双方向通信を実現するライブラリ。WebSocketの上に構築されています。
学びのポイント: リアルタイム通信の実装、イベント駆動プログラミング。
MongoDB:
ドキュメント指向のNoSQLデータベース。スキーマレスで柔軟なデータモデルを持ちます。
学びのポイント: MongoDBの基本操作、Mongooseを使ったデータベース操作。
以上のような技術を使用していました。さもわかっているふうに書いていますが、なんとなく
「こう動いているんだな」という程度の理解です。
しかしAIのサポートのおかげで、苦戦しながらも制作は比較的順調に進みました。
今回のプロジェクトでは、Node.js、Express、Socket.IO、MongoDBを使用してシンプルなチャットアプリを作成しました。各技術の役割と共に、学びのポイントや手順を振り返ってみたいと思います。
プロジェクトのステップ
具体的にどんなステップでAIとの制作が進んだのか、見ていきましょう。
1. プロジェクトのセットアップ
– Node.jsのインストールとプロジェクトの初期化。
– 必要なパッケージ（Express、Socket.IO、Mongoose、bcryptjs、express-session）のインストール。
2. サーバーのセットアップ
– Expressを使った基本的なサーバーの構築。
– WebSocketを使ったリアルタイム通信の設定。
3. ユーザーモデルの作成
– Mongooseを使ったユーザーモデルの定義。
– MongoDBとの接続設定。
4. フロントエンドの作成
– ログインページ、登録ページ、チャットページの作成。
– 各ページに対応するJavaScriptファイルの作成。
5. ユーザー登録とログイン機能の実装
– bcryptjsを使ったパスワードのハッシュ化。
– express-sessionを使ったセッション管理。
– 登録とログインのルートを設定し、バリデーションを実装。
6. リアルタイムチャットの実装
– Socket.IOを使って、クライアント間でメッセージをリアルタイムに送受信。
– チャットメッセージの送信と受信を実装。
簡単にまとまっていますが、AIが生成してくれているとはいえ、何度も何度もエラーが出て苦戦をしていました。
苦戦したポイント
AIのサポートがあるとはいえ、これまで使ったことがない技術を使おうとすると、
AIがコードを生成してくれるとはいっても、自分の実行環境で動作するように設定するのは困難でした。
AIとの連携がうまく取れなくて苦戦しました。
こちらが伝えたいことと、AIが伝えたいことのすり合わせが難しく、何度も「検証」画面からコンソールログを見たり、ターミナルでデータのチェックを行ったりと、エラーに悩む日々でした。
とはいえ、常に相談できる相手（AI）がいるので安心して進めることができました。
まとめ
今回のプロジェクトを通じて、サーバーサイドの基本的な技術から、リアルタイム通信、データベース操作まで幅広く学ぶことができました。
本来であればこの後も、追加機能としてデザインの作り込みやデータの維持機能などもするべきでしょうが、
私の目標はハンドメイド作品をメタバース空間で展示・販売するデジタルショップを開設するというところにあるのでここまでにして次のステップに進みたいと思います。
次回からそろそろUnityの再学習に取り組みたいと思います。
自己紹介
ペコポコです。
普段はハンドメイド作品をオンラインで販売しています。
メタバース空間に視覚的なお店を自分で構えることを目標に現在プログラミングも学習中です。
他の作品もオンラインショップでご覧いただけます。
物作りで日常を明るく♪をコンセプトに活動中のハンドメイド作家です。minneやメルカリショップス 、Creemaにてマクラメ・レザーブレスレットなどを中心に出品中です。
コメント