Vue.js+axiosでQiitaの投稿を取得、表示してGitHub Pagesで公開しました

Vue.js+axiosでQiitaの投稿を取得、表示してGitHub Pagesで公開しました:

自己紹介

初めましてトモコロです。

人生の路線変更ということで去年の9月ぐらいからフロントエンドの勉強をしていて、

今年の頭からWEB製作会社に入社しました。

会社では基本的にHTML,CSSしか触っていないのですが、

技術的なところでいうとVueとかReactに興味があったので、そのあたりを自宅で勉強し始めました。

初心者なりにアウトプットの一環になるかなと思いQiitaに投稿しようと思った次第です。

本題

ということでこの三連休満を持してついにVue.jsを触ってみました。

Vueの環境構築（webpackとかbabelとか）はほとんど意味が分かっていないので、そのあたりは割愛します。

綺麗にまとめられた良い記事もQiitaにたくさんあります（大変参考になりました。ありがとうございました。）



ではまずこちらをご覧ください。



https://kobutomo.github.io/vue-sample/#/



SPAとはなんだというのを少し試したかったので無駄にいろんなページがありますが、

ヘッダーから「Works」を押していただいて、「Qiita Viewer」と進んでいただくと、今回の主役が出てきます。

こちらがコンポーネントのコードです

component.vue

<script> 
import axios from 'axios' 
export default { 
  data () { 
    return { 
      posts: [], 
      url: '', 
      tag: '' 
    } 
  }, 
  methods: { 
    getApi () { 
      // axiosを使って、qiitaから記事の情報を取得してpostsに代入しています。 
      axios 
        .get(`https://qiita.com/api/v2/tags/vue/items`) 
        .then(response => (this.posts = response.data)) 
    }, 
    // これはタグ検索するときのためのメソッドです。 
    getUrl () { 
      this.url = `https://qiita.com/api/v2/tags/${this.tag}/items` 
      axios 
        .get(`${this.url}`) 
        .then(response => (this.posts = response.data)) 
    } 
  }, 
  // created (){処理}と書くと、ページが読み込まれたときに{処理}が実行されるみたいです。便利！ 
  created () { 
    this.getApi() 
  } 
} 
</script> 

コンポーネント内のスクリプトはこんな感じになっています。

流れとしては、

初期状態では「vue」というタグがついた投稿をaxiosで取得してpostsに代入

↓

イベントが発火してgetUrl()というメソッドが走ると、ユーザーが指定したタグがついた記事に置き換わる

という感じです。

ちなみにURLがおかしかったりで取得に失敗したときの処理も、

component.vue

axios.get(`https://qiita.com/api/v2/tags/vue/items`) 
        .then(response => (this.posts = response.data)) 

の部分にcatch((処理))とか足せばよいみたいですが、
私は失敗を気にしない男なのであえて書いていないです。

ちなみにこのthen((～～～))の部分が成功したときの処理です。

component.vue

<template lang="html"> 
  <div class="rss"> 
    <h1 class="tit">Qiita Viewer</h1> 
    <p class="txt">Qiita上の「vue」というタグが付いた投稿一覧を「Qiita API v2」を用いて取得し、最新10件を表示しています。</p> 
    <div class="tag_searcher"> 
      <!-- イベント発火用インプットタグ --> 
      <input type="text" v-model="tag" name="" value=""> 
      <input type="button" v-on:click="getUrl()" name="" value="search"> 
    </div> 
    <div class="qiita_wrap"> 
      <!-- v-forで最新の10件を取得して装飾してます --> 
      <div v-for="(post,index) in 10" class="qiita"> 
        <ul> 
          <li> 
            <a :href="posts[index].url" target="_blank"> 
              <div class="qiita_content"> 
                <figure><img :src="posts[index].user.profile_image_url" alt=""></figure> 
                <p class="user_name" v-if="posts[index].user.name">{{posts[index].user.name}}</p><p class="time"> posted at {{posts[index].updated_at.slice(0,-15)}}</p> 
              </div> 
              <p class="qiita_txt">{{posts[index].title.slice(0,48)}}<span v-if="posts[index].title.length > 48" >...</span></p> 
            </a> 
          </li> 
        </ul> 
      </div> 
    </div> 
  </div> 
</template> 

つぎにHTML部分です。

ここで大事になるのは「v-if」「v-for」 「v-model」 「v-on」等ですが、

このへんの仕様はまだよく分かっていないところがあるので、公式のドキュメントを見たほうがいいかもしれないです。

簡単に説明すると、

Qiita API v2からの情報は配列になっているので、それをv-forでインデックス番号0～9まで（最新の10件）を処理しています。

v-for="(post,index) in 10"

の部分がそうです。in 10というのが forを10回でストップするという意味になります。

ここまできたらあとはそれぞれのデータ（URL、ユーザー名、プロフィール画像、日付）等を取得してCSSで装飾しているだけです。

次に、

<input type="text" v-model="tag" name="" value="">

<input type="button" v-on:click="getUrl()" name="" value="search">

この部分ですが、

ここではタグで記事を検索する機能を実装しています。

ユーザーが入力した値が、v-modelによってtagに代入され、

ボタンをクリックするとgetUrl()が動くというものです。

おわり

モダンなフレームワークを今回はじめて触りましたが、

Vue.jsはちょこっと書くだけなら私みたいな初心者でも書けてしまうので、

これからフレームワークを勉強したいっていう人はぜひVue.jsから始めてみてはいかがでしょうか。

全体を通して何か間違いがありましたらご指摘ください。すぐに訂正します。