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で装飾しているだけです。
次に、

" data-sourcepos="110:1-122:105">

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

この部分ですが、
ここではタグで記事を検索する機能を実装しています。
ユーザーが入力した値が、```v-model```によって```tag```に代入され、
ボタンをクリックすると```getUrl()```が動くというものです。

<h2>おわり</h2>
モダンなフレームワークを今回はじめて触りましたが、
Vue.jsは**ちょこっと書くだけなら私みたいな初心者でも書けてしまう**ので、
これからフレームワークを勉強したいっていう人はぜひVue.jsから始めてみてはいかがでしょうか。
全体を通して何か間違いがありましたらご指摘ください。すぐに訂正します。