chiilog

Vue.jsとaxiosを使ってJSONを表示する

—

by

chiaki
in

あんまり新しいことにチャレンジできてないなと思って、Vue.jsをちょっと触ってみました。

めちゃくちゃ検索しながら触ったんですが、JSON使ってなんやかんやするときはjQueryより楽なのでは？と思いました。あと、意外と拒否反応出るほど難しくはない・・・。

jQueryから全部乗り換える！まではいかないですが、時と場合によりけりでうまく使い分けができたらいいなって感じです。

やったこと

タイトルの通り、JSONの表示制御をしました。
ただ、「2個目まで」と「それ以降」といったように、途中からレイアウトが異なるというケースで実装したので、Vue.jsのv-forとかだいぶ駆使しました！

サンプルはGitHub Pagesで見れるようにしました。GitHub Pages初めて使った・・・。

サンプルページ

全部のコードはリポジトリからご覧ください。
なお、今回のコードのVue.jsは開発版を入れたままにしています。

リポジトリを確認

まずはJSONを取得する

サンプルでは、このブログのJSONをWP REST APIで取得しています。手軽につかえて便利ですね・・・。

このJSONを取得するところでaxiosを使っています。
なお、axiosはIE11だと動作しなかったので、別途PromisesというJSONを読み込ませて、コードもそれに合わせて書いています。

その際は、こちらの記事を参考にさせていただきました！
vue.jsとaxiosでedge、IE11で問題が…｜suzuki_kuni’s blog

IE11はもう気にしない！という人は、https://www.promisejs.org/polyfills/promise-6.1.0.min.js これを読み込んでいるscriptタグごと消せばOKです。

実際構築したときはそもそもHTMLの作りとかが全然違ったのですが、今回は割愛。本文とるか概要とるかと、続きを見るボタンの有無くらいしか変えてません。

本当は部分的にコード載せたかったんですが、GutenbergとZenlogicの相性が悪いみたいでコード載せれず・・・。そのうちちょっとサーバーの設定見ますX(

HTMLを書く

Vue.jsはjQueryと違って、JS内にHTMLを書くのではなく、HTMLの方に変数みたいなものを入れて表示します。なので、HTMLの自由度が割りと高いように感じます。インデントぐちゃぐちゃになっちゃいがちなjQuery内でのソースコード修正よりこちらのほうが修正しやすくて私は好きです！

Vue.jsでなにかするなら、まずHTMLを書いてからVue.jsのタグを入れていくのが良いと思います。

というわけで、HTMLだとこんなコードになります。

<article id="post-0000" class="article mt-5">
  <h2 class="alert alert-info">記事タイトル</h2>
  <div>本文はここ</div>
</article>

<article id="post-0001" class="article mt-5">
  <h2 class="alert alert-dark">記事タイトル</h2>
  <div>概要はここ</div>
  <p class="text-right"><a href="#" class="btn btn-danger btn-lg">続きを読む</a></p>
</article>

これをもとに書き換えていきます。

JSONで何が、どんな形式でとれているかわからない！見たい！というときは、とりあえず以下のようなコードを書くといいですよ。

<div id="articles">
  <div class="hoge" v-for="post in posts">
    {{ post }}
  </div>
</div>

今回のサンプルコードの通りだと、JSONが吐き出されます。整形はされてないのでちょっと見づらいかもしれませんが・・・。

ここでもしJSONがずらっと書き出されなかったら、どこかのコードが間違ってる、ということになります。

○回だけfor文で繰り返す

jQuery（というかJavaScript）には、for文の途中でbreakをすればfor文から抜けることができますが、Vue.jsの場合はそもそも何回繰り返すかを最初に指定する以外に方法がなさそう・・・？でした。（あったら教えてください！！）

なので、まずはarticleにfor文を追加します。

1つ目のarticleは、forを2回繰り返すまで。2つ目のarticleは、それ以降を繰り返し表示します。Vue.jsの書き方はJSというよりPHPの方がなんとなく近い感じがありますね！

これで記事が繰り返し取得できるようになりました。
あとは、タイトルや本文などの部分をVue.jsにあわせて書き換えればOKです！

詰まったところのメモ

  • :id=”‘post-‘ + post.id” といったように文字列と結合するときはシングルクォーテーションと＋記号で表記する
  • 例えば、画像のaltやクラス名などにVueで取得した文字列を使うときはv-bindがいるので、:altといった風に属性前にコロンが必要になる