こんにちは、寿研究所のすぎです。
このサイトでは主にウェブ系の技術を使った新しい実装に挑戦し、その様子をお届けしています。
今回は、私が作成したチャットアプリのコードを「コンポーネント化」して、効率的で見やすいコードに改良しました。その手順とポイントを一緒に学んでいきましょう。
みなさま、お待たせいたしました！喉の調子が戻り、動画の撮影を再開します。
（若干声が枯れているのはご愛嬌…）
現在のチャットアプリの課題
現在の状態:
今のチャットアプリは、1つのファイルにすべてのコードが書かれており、単純にその内容が表示されるだけの実装です。その内容が冗長になり、非常に読みづらくなってきたのと、今後増え続けることを考えたら分割する一択でした。
問題点:
- コードが1つのファイルに集約されており、管理や理解が難しい。
- 将来的にデータベースを使う場合、コードの拡張性が低い。
before
after
コンポーネント化のメリットと目標
コンポーネント化とは:
今回の目的は、チャットアプリ箇所を「コンポーネント」に分割し、再利用性と可読性を向上させることです。コンポーネントは、アプリのUI（ユーザーインターフェース）を構成する再利用可能な部品のことを指します。これにより、コードの整理が容易になり、特定の機能を別のプロジェクトやページで再利用できるようになります。
具体的なメリット:
- 再利用性: 他のプロジェクトや異なる画面で簡単に利用可能。
- 可読性の向上: コードが分かりやすくなり、修正や追加がしやすくなる。
- 拡張性: 将来的にデータベースを利用した機能追加が容易になる。
実装手順
(1) 現在のコードの確認
まず、現在のチャットアプリのコードを確認します。全てが1つのファイルに書かれており、メッセージの表示部分がそのまま出力されている状態です。このままではコードが煩雑なので、まずはメッセージ部分を独立させる必要があります。
元のコードは以下です。
data() {
return {
chatMessages: [
{
date: "2024年9月18日",
messages: [{
position: "left",
userIcon: "https://kotobukilab.com/media/wp-content/uploads/2024/09/24-Sep-08-03-03-44-41-1.png",
userName: "すぎ",
time: "10:00",
content: "おはようございます〜！この一言スペースを実装しました。",
},
{
position: "left",
userIcon: "https://kotobukilab.com/media/wp-content/uploads/2024/09/24-Sep-08-03-03-44-41-1.png",
userName: "すぎ",
time: "13:02",
content: "頭使ったらお腹すいたー。久しぶりにカップ麺でも食べようかな？",
},
]
};
},
・・・・以下続く
(2) 新しいファイルの作成
次に、「チャットメッセージ.js」という新しいファイルを作成し、そこにメッセージ表示部分のコードを移動させます。これにより、メインのファイルからメッセージ表示に関する処理が切り離され、管理しやすくなります。
- ファイル名：
chatMessage.js - ファイルの保存場所：コンポーネント専用のフォルダ「components」
(3) コンポーネントのコード作成
新しく作成したファイルに、メッセージ表示のコードを記述します。この部分は、UIを構成する重要な部分であり、他の画面やプロジェクトでも再利用できるように設計します。
chatMessage.js内に、チャットの内容を記述。- これにより、メインのアプリケーションからはこのコンポーネントをインポートするだけで、簡単にメッセージ表示ができるようになります。
内容は以下のように記述していきます。
export const chatMessages = [
{
date: "2024年9月18日",
messages: [{
position: "left",
userIcon: "https://kotobukilab.com/media/wp-content/uploads/2024/09/24-Sep-08-03-03-44-41-1.png",
userName: "すぎ",
time: "10:00",
content: "おはようございます〜！この一言スペースを実装しました。",
},
{
position: "left",
userIcon: "https://kotobukilab.com/media/wp-content/uploads/2024/09/24-Sep-08-03-03-44-41-1.png",
userName: "すぎ",
time: "13:02",
content: "頭使ったらお腹すいたー。久しぶりにカップ麺でも食べようかな？",
},
{
position: "left",
userIcon: "https://kotobukilab.com/media/wp-content/uploads/2024/09/24-Sep-08-03-03-44-41-1.png",
userName: "すぎ",
time: "14:09",
content: "ここもVue.jsでできてるよ",
},
{
position: "left",
userIcon: "https://kotobukilab.com/media/wp-content/uploads/2024/09/24-Sep-08-03-03-44-41-1.png",
userName: "すぎ",
time: "14:12",
content: "DBはこれからだけどね",
},
],
},
(4) メインファイルへのインポート
作成したコンポーネントを、メインのファイルにインポートします。これにより、今まで1つのファイルに集約されていたコードが整理され、メッセージ表示部分がコンポーネントとして独立した形で利用できるようになります。
- メインファイルに以下のコードを追加し、コンポーネントを読み込む。
import ChatMessage from './components/chatMessage.js';今回の場合ワードプレスなので、ディレクトリのパスの指定は一工夫必要。
一番わかりやすいのは絶対パス。今回は以下のように絶対パスで指定。import { chatMessages } from 'https://kotobukilab.com/media/wp-content/themes/jin-child/components/chatMessages.js';
(5) 実装結果の確認
インポートが完了したら、実際にアプリを動作させて確認します。リロードしても正常にメッセージが表示され、エラーがないことを確認します。
- メッセージが問題なく表示され、コンポーネント化が成功。
- メッセージが新しいファイルに切り分けられ、コードが整理された状態に。
さらなる改善と将来の展望
今回の実装では、チャットメッセージ部分をコンポーネントとして切り分けましたが、将来的にはデータベースを使用してメッセージを保存・表示するように拡張していく予定です。今回のコンポーネント化により、データベースの導入や他の機能追加がより簡単に行えるようになりました。
また、他のプロジェクトや別のページで同じメッセージコンポーネントを再利用できるため、開発効率も大幅に向上します。
まとめ
今回のチャットアプリの改良では、コードを「コンポーネント化」し、再利用性と可読性を向上させました。これにより、今後の拡張や修正が容易になり、より効率的な開発が可能となりました。
今回は以上です。
次回はチャット自体のコンポーネント化をしてさらにすっきりさせます。
ここが整理できたら、だいぶ機能も追加しやすくなると思います。
今後もこのような技術的な解説を続けていきますので、お楽しみに！
