JSひろばアプリの作成記

前回の記事では、Piniaを入れて大まかなレイアウトを作成しました。 今回はPiniaやemit()、テンプレートrefを使うのでVueの要素が盛りだくさんです。 今日で大まかなフロントエンドの部分を完了させます！ 作業日 2022年12月12日 作業にかけた時間 3時間 合計作業時間 9時間 作業内容 ボタンのコンポーネントの作成モックのデータを作成グローバルで使うデータをPiniaに保管させるEmitを使いデータを親コンポーネントに送るライブラリコンポーネントのRefにアクセスする 3つのファインダーコンポーネント では、このJSひろばのアプリのメイン機能としてこの４つのファインダーがありましたがおすすめ検索機能はキーワード検索とほぼ同じなのでいったん取り除くことにしました。 これは、ユーザーがJavaScriptのサンプルコードを見つけるための機能になります。 ボタンのコンポーネント 各ボタンを押すとそれぞれのボタンに付属した内容が同じダイアログ（ポップアップ）のコンポーネント内で表示されるようにします。 まずは、各4種類の検索機能のコンポーネントをcomponents/finderフォルダに作成します。最初の中身はただのテキストでOKです。次にApp.vueに戻りPrimeVueにあるDialogコンポーネントをコピペします。 それから、各ボタンを押したときにそれぞれのコンポーネントの内容が表示されるようにロジックを作成すればOKです。 途中経過ですが、こんな感じになりました。 実際の画面はこんな感じです。 キーワード検索 まだ、データベースの細かい構成とデータの量を吟味していないので詳しくはすすめられません。ここで検討すべき課題はこちらになります。 このファインダー機能のコンポーネントは複雑になるので作成はいったん後回しにします。 Piniaの作成 Piniaを使ってグローバルにアクセスできるストレージを作成します。とりあえず、モックのJSONファイルを作成してテーブルとして表示できるところまでやってみます。 これを各テーブルで表示させるとこんな感じになりました。 履歴のデータを保管する 各コマンドを実行した後に、その履歴をオブジェクトの配列に保管します。常に最新の履歴が先に来るようにしたいため、pop()ではなく、unshift()を使っています。 コンソール関係のコードはこのような感じです。 これで入力したコマンドがオブジェクトとして配列に保管されました。テーブルにも問題なく表示されていることが分かります。 コードをコンソールにコピーする機能 では、検索機能で探したコマンドをコンソールにコピーするボタンのファンクションを作成していきます。ドキュメンテーションにはないですがこのターミナルがどうやって入力されたテキストをバインドしているか見てみましょう。 VueのGoogleエクステンションツールを使います。 VueのタブからTerminalのコンポーネントを開きます。すると、DataのところにcommandTextがあるのがわかります。ここがnullになっていますがターミナルにテキストが入力されると同時に更新されました。 では、このデータにコピーしたいコピーをバインドさせるようにします。 まず、ここのcommandTextにアクセスするには＜Terminal ref=”terminal”/>のようにrefを使ってこのコンポーネント内にあるデータ、関数にアクセスすることができますね。（Compostion APIの場合は対象のコンポーネント側でexpose()されて公開されている必要がありますが。） あとは、テーブル側のボタンにemit()を設定して親コンポーネントにコマンドのデータを送ってあげます。 親コンポーネント側では、Emitを受け取ったときに発火するイベントを下記の様に設定してあげました。 細かいスタイルの変更 ここまでできたら、大体のレイアウトは決まったのでスタイルをキレイにしていきます。 特に、モバイルとデスクトップで共通のアプリを使えるようにしたいのでその設定も必要です。 とりあえずこんな感じになりました。ポップアップで表示されるダイアログは実際のデータが入ってからスタイリングをしたいと思います。 では、フロントエンドはこれくらいにして次回からにバックエンドにかかりましょう。 お疲れ様です。