2017年06月13日(火)
Vue.jsとAxiosなら驚くほど簡単に作れる！外部APIを使ったWebアプリの実例
ReactやAngularと並び、ここのところ人気が高まっているVue.js。Axiosを組み合わせれば外部APIを使った Webアプリも手軽に開発できます。
JavaScriptのアプリケーションを作っていると、よくリモートソースからデータを取得したり、APIを使いたくなったりすると思います。最近、公開されているAPIを見ていたら、ソースからデータを取得して処理するのに良いものがたくさんあることに気付きました。
Vue.jsを使えば提供される機能を使ってアプリを構築し、数分のうちにコンテンツの配信を始められます。
ニューヨークタイムズのAPIからデータを取得して、その日のトップニュース記事を表示し、ユーザーが興味があるカテゴリのニュースを選びだせる簡単なニュースアプリの作り方を説明します。この記事の全コードはここにあります。
アプリの出来上がりは下の図のようになります。
この記事では、Vue.jsのごく基本的な知識が必要です。すばらしい入門記事『ReactとAngularのいいとこ取り？ 2017年こそ学びたいVue.jsの始め方』を参考にしてください。 ES6文法も使いますが、復習にはSitePointのここを参照してください。
プロジェクトの構造
ファイ...
0
208
98
280author:
WPJ
https://www.webprofessional.jp/
デザイナー、エンジニア、マーケターの「掛け算」のスキルアップを応援するパスファインディング・メディア。提携するSitePoint.com発の海外先端技術記事や、独自のインタビュー記事などを毎日掲載します。 KADOKAWAが運営。
Ads
デザイナー、エンジニア、マーケターの「掛け算」のスキルアップを応援するパスファインディング・メディア。提携するSitePoint.com発の海外先端技術記事や、独自のインタビュー記事などを毎日掲載します。 KADOKAWAが運営。WPJの記事『Vue.jsとAxiosなら驚くほど簡単に作れる！外部APIを使ったWebアプリの実例』についてまとめています。
この記事は特にjavascript・写真・iOS・Webサービス・アプリについて書かれており、 Webサービスのカテゴリーに分類されます。気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のWPJで全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとWPJの記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。
