JavaScriptVue.jsは、Angular、Reactと並んで人気のモダンなJavaScriptフレームワークです。入門教室」(ソーテック社)では、Vue.jsを使用して「Youtube検索プログラム」を作成しています。CDNでVue.jsのフレームワークをリンクすることにより、Youtube検索プログラムを作成しています。3を使用して、シングルファイルコンポーネントとしてYoutube検索プログラムを作成しています。Vue.jsの基本的な使用法については書籍を参照していただくことにして、ここではその概要を紹介します。Vue.js以外に、HTTP通信ライブラリ「axio」と、CSSフレームワーク「Bootstrap」を使用しています。APIとは、Webサーバ上で提供されるさまざまなサービスを、クライアント側のプログラムからアクセスするための仕組みのことです。APIとして提供しています。v3」を使用して、次のようなYouTube動画検索プログラムを作成します。テキストボックスに検索文字列を入力して「検索」ボタンをクリックすると、検索結果がHTMLの表に一覧表示されます。Webのサンプルhttps://makotoo2.github.io/youtubesearch2/dist/index.html・実行画面テキストボックスにキーワードを入力して「検索」ボタンをクリック検索結果のサムネール部分をクリックすると、YouTubeのWebサイトにジャンプし動画を再生できます。v3」のAPIキーが必要です。APIキーを取得するにはGoogleアカウントが必要になります。Console(https://console.developers.google.com/apis/library)を開きます。v3」ページを開き「有効にする」ボタンをクリックします。「ライブラリ」ページで「作成」ボタンをクリックしてプロジェクトを作成します。「認証情報」ページで情報を設定し「必要な認証情報」ボタンをクリックします。APIキーが表示されます。XML」の略で、Webブラウザ上で動作するJavaScriptプログラムにより、Webサーバから非同期通信(Asynchronous)でXMLデータを取得し、取得したデータをWebコンテンツに動的に反映するという手法です。現在ではデータ形式として、XMLよりも軽量でシンプルなJSON形式が使用されることが多くなって来ています。Vue.js自体には、Ajax通信機能は用意されていないため、JavaScriptで直接XMLHttpRequestsオブジェクトをコントロールするか、外部のライブラリを使用する必要があります。ここではVue.jsの公式ドキュメントで紹介されているaxios(アクシオス)というAjax通信ライブラリを使用する方法を紹介します。axiosはPromiseという非同期処理機能をベースにしたライブラリです。axiosライブラリを使用するためにaxiosをCDN経由で読み込むには、HTMLファイルに次のようなscript要素を記述します。src="https://unpkg.com/axios/dist/axios.min.js"></script>axiosの基本的な使い方axiosを使用して、WebサーバにHTTPプロトコルのgetリクエストを送信し、レスポンスを受け取るには次のようにします。});(1)のget()メソッドは、引数で指定したアドレスにHTTPプロトコルのgetリクエストを送信します。結果が正常に受け取れれば、(2)のthen()メソッドの引数で指定した関数で処理を行います。関数では引数resにレスポンスが渡されます。エラーが発生した場合の処理を記述したい場合には、さらに(3)でcatch()メソッドを接続します。CDNバージョンのYoutube検索プログラムCDNヴァージョンのソースは以下のGitHubリポジトリからダウンロードできます。次に、プログラム部分のリストを示します。}});データオブジェクトとして、(1)で検索結果を格納するresultsプロパティ、(2)で検索キーワードを格納するkeywordプロパティを用意しています。(3)のparmsにはクエリパラメータを格納しています。(4)のmaxResultsは最大検索数です。自由に設定して構いません。(5)のkeyでは取得したAPIキーを設定します。(6)が検索を実行するsearchMovies()関数です。(7)でクエリパラメータの「q」に検索文字列を代入しています。APIのURLにクエリパラメータを加えて実行しています。this.params})↑クエリパラメータthen()メソッドでは、(9)で検索結果として取得したitems配列をresultsプロパティに代入しています。これでresults配列の各要素にはそれぞれの動画の情報が格納されます。HTMLテンプレート次にHTMLテンプレート部分のリストを示します。テキストボックスを用意し、v-modelディレクティブでkeywordプロパティとバインドしています。(2)では「検索」ボタンがクリックされたらsearchMovies()メソッドを呼び出すようにしています。検索結果の一覧を表示する表(table要素)では、(3)でv-forディレクティブには動画を一つずつ取り出し変数movieに格納しています。key属性には、ビデオのIDをバインドしています。(4)では、img要素にv-bindディレクティブでsrc属性をバインドすることにより、動画のサムネールを表示しています。a要素のhref属性にYouTubeの動画のURLをバインドすることにより、サムネールがクリックしたら動画サイトにジャンプするようにしています。(5)では、動画のタイトル(title)と、情報(description)を表示しています。3を使用したシングルファイルコンポーネント・バージョンのYoutube検索プログラムを示しますソースは次のGitHubリポジトリからダウンロードできます。https://github.com/makotoo2/youtubesearch2シングルファイルコンポーネントとはシングルファイルコンポーネントは、Vue.jsのコンポーネントを構成する、HTMLテンプレート、JavaScript、スタイルシートを一つのファイルにまとめたものです。拡張子は「.vue」になります。次に、シンプルなシングルファイルコンポーネントの例を示します。red;}</style>(1)のように、HTMLテンプレートはtemplate要素として記述します。default文でエクスポートします。(3)のようにスタイルシートのstyle要素も同じファイルに記述できます。モジュールを追加するYouTube動画検索アプリでは、外部ライブラリとしてaxiosとBootstrapを使用しています。3で開発を行う場合には、npmを使用してnode.jsのモジュールとしてインストールできます。install」コマンドを実行して2つのモジュールをインストールします。次に、SearchYoutubeコンポーネントとしてい使用するシングルファイルコンポーネントのファイル「SearchYoutube.vue」を示します。gray;}</style>HTMLテンプレートは、(1)のtemplate要素として記述しています。内容は(2)でmsgプロパティを表示している以外は以前のものと同じです。script要素では、(3)(4)でaxiosとbootstrapのCSS部分を読み込んでいます。default」でコンポーネントのインスタンスを定義しています。コンポーネント化したことで、(6)のdataは関数の戻り値としている点に注意してください。新たに(7)のpropsで、タイトルとして表示するテキストであるmsgプロパティを登録しています。(8)のaxiosを使用して検索結果をresultsプロパティに格納しています。ESLintの初期設定ではconsole.log()メソッドがあるとエラーが表示されるため、ここではcatch()メソッドによるエラー処理を省略しています。(9)でスタイルシートを記述しています。シングルファイルコンポーネント化するといっても、以外と変更点は少ないと思います。CodeのようなエディタではHTMLテンプレート部分が色分けされてわかりやすく表示されます。App.vue次に、メインのシングルファイルコンポーネントであるApp.vueを変更し、SearchYoutubeコンポーネントを読み込むようにします。}}</script>template要素では(1)でSearchYoutubeコンポーネントを使用して、msg属性にタイトルとして”YouTube動画検索”を渡しています。script要素では、(2)のimport文でSearchYoutube.vueを読み込んで、(3)でコンポーネントとして登録しています。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。technology.。