【ロピタルの学習記録 2月16日】Vue.jsに触れる

Vue Vue.js Javascript プログラミング フロントエンド API ロードマップ JSON DOM

APIを叩いて、データを受け取り、そのデータをブラウザに表示までを学習しました。

具体的には、ビットコインの価格のデータを持っているAPI（https://api.coindesk.com/v1/bpi/currentprice.json）を叩いてJSON（データ）を受け取り、必要なデータをHTMLに埋め込むって感じです

大まかな処理は

  1. AxiosでAPIを叩きJSON（データ）取得
  2. dataオプションにデータを追加
  3. マスタッシュ構文でデータバインド

使った知識

  • Javascript: 基礎知識(オブジェクトや基本的な関数などの文法、DOM）
  • JSONとは何か

この辺を分かっていればできるかな？XMLHttpRequestや、CORS(Cross Origin Resource Sharing)などについても分かっていればより深い考察ができると思います。

1. Vue.jsを使う理由を知る

Vue.jsの主な役割は２つです。

これを理解するために読んだのがこの記事です。

Github vuejs/v1-jp.vuejs.org

実際にAPIを取得して表示する

Vue JS 入門決定版！jQuery を使わない Web 開発 - 導入からアプリケーション開発まで体系的に動画で学ぶ

この講座の1,2,4だけ受講すればAPIを用いたWebページを作成することができるようになります。僕は普段サーバサイドをやっていたのですが、チーム開発で必要になったのでこんな感じで学習しました😉

結構簡単に実現できるので是非習得してみてください！あとはNuxt.jsとUIフレームワークとデザインをせねばぁぁぁぁ