Web開発チームの山本です。
普段はReactで開発をしているのですが、Vueには触れたことがなかったので、簡単なアプリを作成してみました。今回は、ニュース記事を表示できるアプリについて紹介します。
アプリ概要
今回は、News APIを使ってカテゴリーごとに記事を表示させていきます。ただVueに集中したかったので、フロントのみを実装しています。
またVuexも使ってみたかったので、ブックマーク機能を追加しました。ブックマークした記事は、ブックマークのページでまとめて表示することもできます。
開発環境
私の開発環境は次のようになっています。
- MacBookPro
- Node.js v12.16.2
- npm 6.14.4
準備
Vue CLIをインストール
Vue CLIは、Vue.jsを迅速に開発するためのフルシステムです。ReactでいうCreate React Appに近いかなと思います。Vue CLIは、基本的に必要なことをやってくれるので、とても助かります。ありがたや。
$npm install -g @vue/cli
$vue --version
@vue/cli 4.5.8
プロジェクトの作成
news-appというプロジェクトを作成します。
$vue create news-app
$cd news-app
//サーバーを起動
$npm run serve
ブラウザでhttp://localhost:8081/ を開くと、サンプルが表示さます。サンプル表示させただけですが、表示できると嬉しいですね！
Vue用のUIライブラリ
今回UIライブラリにVue Materialを使用します。雰囲気Google Newsぽくなるかなと思ったからです(なって欲しい)。
$npm install vue-material --save
公式ドキュメントで必要なコンポーネントだけをimportすることが推奨されていたので、main.jsで使いたいコンポーネントだけをimportしていきます。
import Vue from 'vue'
import App from './App.vue'
import { MdButton, MdCard, MdLayout, MdApp, MdList, MdToolbar, MdDrawer, MdIcon, MdContent } from 'vue-material/dist/components'
import 'vue-material/dist/vue-material.min.css'
import 'vue-material/dist/theme/default.css'
Vue.config.productionTip = false
Vue.use(Vuex)
Vue.use(MdButton)
Vue.use(MdCard)
Vue.use(MdLayout)
Vue.use(MdApp)
Vue.use(MdList)
Vue.use(MdToolbar)
Vue.use(MdDrawer)
Vue.use(MdIcon)
Vue.use(MdContent)
News APIのアカウント登録
表示させるニュースは、NewsAPIを使っていきます。アカウントを作成すると、API keyを取得できます。NewsAPIは、カテゴリーごとや言語ごとにニュースを取得できるので便利でした。
Vueでコンポーネント作成
Vue Materialを使用して、Headerを作成しましょう。Vue MaterialのComponentsの中のAppを使いました。
src/components/App.vue
<template>
<div id="app">
<div class="page-container">
<md-app md-mode="reveal">
<md-app-toolbar class="md-primary">
<md-button class="md-icon-button">
<md-icon>menu</md-icon>
</md-button>
<span class="md-title">News App</span>
</md-app-toolbar>
</md-app>
</div>
</div>
</template>
<script>
export default {
name: 'App',
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
</style>
上記のコードをかくと、http://localhost:8081/に下のような画像のようにHeaderが表示されます。
同じように下記のコンポーネントを作成していきます。
- NewsItem.vue：ニュースを表示するカードのコンポーネント
- Content.vue：複数のカードを表示されるコンポーネント
src/components/NewsItem.vue
<template>
<md-card>
<md-card-area>
<md-card-media>
</md-card-media>
<md-card-header>
<div class="md-title">Article Title</div>
</md-card-header>
<md-card-content>
Content.........
</md-card-content>
</md-card-area>
<md-card-actions md-alignment="space-between">
<md-button class="md-icon-button" >
<md-icon>bookmark</md-icon>
</md-button>
<md-button class="md-primary">Read More</md-button>
</md-card-actions>
</md-card>
</template>
Vue MaterialにCardというコンポーネントがあるので、それを使用してカードを作成します。
src/components/Content.vue
<template>
<div class="md-layout md-gutter md-alignment-center">
<div v-for="n in 8" class="md-layout-item" :key="n">
<NewsItem :article="n"/>
</div>
</div>
</template>
<script>
import NewsItem from "./NewsItem.vue"
export default {
components: {
NewsItem
},
}
</script>
NewsItem.vueをContent.vueで呼び出し複数のカードを表示していきます。
作成した Content.vueをApp.vueで読み込んでみましょう。
src/components/App.vue
<template>
<div id="app">
<div class="page-container">
<md-app md-mode="reveal">
<md-app-toolbar class="md-primary">
<md-button class="md-icon-button">
<md-icon>menu</md-icon>
</md-button>
<span class="md-title">News App</span>
</md-app-toolbar>
<md-app-content>
<Content />
</md-app-content>
</md-app>
</div>
</div>
</template>
<script>
export default {
import Content from './components/Content.vue'
name: 'App',
components: {
Content
},
}
</script>
そうすると、カードを複数表示するコンポーネントが完成します。UIライブラリを使用すれば、そんなに時間がかからず作成できるはずです。
Vuexの作成
次に、登録したNewsAPIを使用して、ニュースのデータを取得し表示します。さらに、次の3つのことを実現させたいです。
- カテゴリーごとに記事を表示させる
- 記事をブックマークできる
- ブックマークされた記事は一覧で表示できるようにする
上記のことを実現するために考えなくてはいけないのは、記事とブックマークされた記事のデータ管理です。ただこれをVueで行うと、データの受け渡しをpropsで行うことになり、複雑化してしまいます。。。今回は、Vuexを使用してデータ一元化を行ないます。
Vuexとは
ReactでいうReduxのように、Vue.js アプリケーションのための状態管理のライブラリです。詳しいことは、公式ドキュメントに書かれています。
Vuexの導入
Vuexをインストールしましょう。
$npm install vuex --save
インストールしたら、main.jsを編集しVuexの設定をします。
import Vue from 'vue'
import Vuex from 'vuex'
import App from './App.vue'
import store from './store'
Vue.config.productionTip = false
Vue.use(Vuex)
new Vue({
render: h => h(App),
store,
}).$mount('#app')
「import store from './store'」と記載していますが、storeのディレクトリは作成していなかったので、作っていきます。
src/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import news from './modules/news'
Vue.use(Vuex)
const debug = process.env.NODE_ENV !== 'production'
export default new Vuex.Store({
modules: {
news,
},
strict: debug,
})
src/store/modules/news.js
// initial state
const state = () => ({
})
// getters
const getters = {}
// actions
const actions = {
}
// mutations
const mutations = {
}
export default {
namespaced: true,
state,
getters,
actions,
mutations
}
stateの作成
stateは、アプリケーション全体のデータを管理するところです。今回のアプリでは、3つのデータを保存していきます。
- カテゴリーごとに表示するニュースのデータ
- 選択しているカテゴリー状態
- ブックマークしているデータ
newsDataはカテゴリーごとにデータを取り出しやすくしたかったので、keyをカテゴリー名にしています。
src/store/modules/news.js
const state = () => ({
newsData: {
"technology":[],
"entertainment":[],
"business":[],
"science":[],
},
activeCategory: "business",
bookmarkData:[]
})
NewsAPIでデータ取得
保存するニュースのデータをNewsAPIから取得します。指定したカテゴリーのデータを取得したかったので、引数でカテゴリー名を渡しています。APIからデータ取得するときに、axiosを使用しました。詳しい使い方は、ドキュメントをご覧ください。
import axios from 'axios'
const key = NewsAPIの登録後に渡されるAPI key
export const changeCategory = async (category) => {
const res = await axios.get('https://newsapi.org/v2/top-headlines?country=jp&category='+category+'&apiKey='+ key)
const articles = res.data.articles;
return articles
}
actionの作成
actionでAPIの実行をしましょう。初回のみデータ取得したいので、既にカテゴリーのデータがある場合には、更新せずにreturn falseしています。また、本当はサーバー側でidの割り振ると思うのですが、今回はフロントだけで処理を行なっているため、article_id_listというのを使って、idを割り振っています。ニュースデータは固定で20件ずつ取るようにしているので、article_id_listのstart_indexを20ごとに決めています。
import { changeCategory } from '../../../api/news.js'
const article_id_list = {business: 0, entertainment: 20, technology: 40, science: 60}
const actions = {
async getArticles({commit, state}){
const category = state.activeCategory
if(state.newsData[category].length ){
return false
}else{
const new_articles = await changeCategory(category)
const article_data = new_articles.map((article, index)=>{
const start_index = article_id_list[category]
article.id = index + start_index
article.bookmark = false
return article
})
commit('setArticles', {data: article_data, category: category})
return new_articles
}
}
}
カテゴリーの変更をするactionを追加しましょう。
import { changeCategory } from '../../../api/news.js'
const article_id_list = {business: 0, entertainment: 20, technology: 40, science: 60}
const actions = {
async getArticles({commit, state}){
const category = state.activeCategory
if(state.newsData[category].length ){
return false
}else{
const new_articles = await changeCategory(category)
const article_data = new_articles.map((article, index)=>{
const start_index = article_id_list[category]
article.id = index + start_index
article.bookmark = false
return article
})
console.log("article_data", article_data)
commit('setArticles', {data: article_data, category: category})
return new_articles
}
},
//カテゴリーの変更をするaction追加
updateCategory({commit, state}, category){
if(state.activeCategory !== category){
commit('setActiveCategory', category)
}
}
}
mutationの作成
mutationでデータの変更をしていきます。
const mutations = {
//取得した記事のデータを保存
setArticles(state, data){
const news_data = data.data
const news_category = data.category
state.newsData[news_category] = news_data
},
//選択中のカテゴリーを保存
setActiveCategory(state, category){
state.activeCategory = category
}
}
記事のデータは、全てを渡すのではなく、選択しているカテゴリーのデータだけを渡すようにgettersの中に書いていきます。
const getters = {
getArticlesByCategory: (state) => {
const category = state.activeCategory
return state.newsData[category]
}
}
機能の実装
ニュースの表示
App.vueで記事のデータを取得します。createdの中で、getArticlesのアクションを実行しましょう。mapGettersを使って、Component内でstoreに保存した記事のデータを取り出します。そして、Content Componentにarticlesを渡していきます。
src/components/App.vue
<template>
<div id="app">
<div class="page-container">
<md-app md-mode="reveal">
<md-app-toolbar class="md-primary">
<md-button class="md-icon-button">
<md-icon>menu</md-icon>
</md-button>
<span class="md-title">News App</span>
</md-app-toolbar>
<md-app-content >
<Content :articles="articles"/>
</md-app-content>
</md-app>
</div>
</div>
</template>
<script>
import Content from './components/Content.vue'
import { mapState, mapGetters } from 'vuex'
export default {
name: 'App',
components: {
Content
},
computed: {
...mapState({
activeCategory: state => state.news.activeCategory,
}),
...mapGetters('news', {
articles: 'getArticlesByCategory'
})
},
created () {
this.$store.dispatch('news/getArticles')
},
}
</script>
src/components/Content.vue
<template>
<div class="md-layout md-gutter md-alignment-center">
<div v-for="article in articles" class="md-layout-item" :key="article.title">
<NewsItem :article="article"/>
</div>
</div>
</template>
<script>
import NewsItem from "./NewsItem.vue"
export default {
components: {
NewsItem
},
props: {
articles: Array
}
}
</script>
記事によっては、画像データがないのもあったので、画像がない場合は、no_image.jpgを表示するようにしています。
src/components/NewsItem.vue
<template>
<md-card :id="article.id">
<md-card-area>
<md-card-media>
<img :src="article.urlToImage" :alt="article.title" @error="noImage">
</md-card-media>
<md-card-header>
<div class="md-title">{{article.title}}</div>
</md-card-header>
<md-card-content>
{{article.description}}
</md-card-content>
</md-card-area>
<md-card-actions md-alignment="space-between">
<md-button v-bind:href="article.url" class="md-primary">Read More</md-button>
</md-card-actions>
</md-card>
</template>
<script>
import AssetsImage from "@/assets/no_image.jpg";
export default {
name: 'NewsItem',
props: {
article: Object
},
data(){
return {
assetImage: AssetsImage
}
},
methods: {
noImage(element){
element.target.src = this.assetImage
}
}
}
</script>
これで最初の画面に、ニュースを表示できるようになりました。
カテゴリー選択
ニュースデータの取得と表示はできたので、カテゴリーを選択して表示できるようにします。まずは、Drawerの左上のアイコンをクリックした時に表示/非表示できるようにします。これもVue MaterialのDrawerのコンポーネントを使っていきます。SideMenu.vueの中に、Drawer内に表示するものを書いていきます。
src/components/SideMenu.vue
<template>
<div>
<md-toolbar class="md-transparent" md-elevation="0">Category</md-toolbar>
<md-list>
<md-list-item class="item-active">
<md-icon>business</md-icon>
<span id="business" class="md-list-item-text" @click="setResource('business')">Business</span>
</md-list-item>
<md-list-item>
<md-icon>music_note</md-icon>
<span id="entertainment" class="md-list-item-text" @click="setResource('entertainment')">Entertainment</span>
</md-list-item>
<md-list-item>
<md-icon>emoji_objects</md-icon>
<span id="technology" class="md-list-item-text" @click="setResource('technology')">Technology</span>
</md-list-item>
<md-list-item>
<md-icon>science</md-icon>
<span id="science" class="md-list-item-text" @click="setResource('science')">Science</span>
</md-list-item>
<md-list-item>
<md-icon>bookmarks</md-icon>
<span id="bookmark" class="md-list-item-text" @click="setResource('bookmark')">Bookmark</span>
</md-list-item>
</md-list>
</div>
</template>
<script>
export default {
name: 'SideMenu',
props:{
setResource: Function
},
}
</script>
<style>
.md-list-item{
cursor: pointer;
}
.md-list .item-text-active{
color:#448aff;
}
</style>
SideMenu.vueをApp.vueから呼び出します。このDrawerの表示/表示のデータは、storeに入れずに、menuVisibleとしてlocalで管理します。そして、setResourceというメソッドで、カテゴリーを変更していきます。
src/components/App.vue
<template>
<div id="app">
<div class="page-container">
<md-app md-mode="reveal">
<md-app-toolbar class="md-primary">
<md-button class="md-icon-button" @click="menuVisible = !menuVisible">
<md-icon>menu</md-icon>
</md-button>
<span class="md-title">News App</span>
</md-app-toolbar>
<md-app-drawer :md-active.sync="menuVisible" >
<SideMenu :setResource = "setResource" />
</md-app-drawer>
<md-app-content>
<Content :articles="articles"/>
</md-app-content>
</md-app>
</div>
</div>
</template>
<script>
import Content from './components/Content.vue'
import SideMenu from './components/SideMenu.vue'
import { mapState, mapGetters } from 'vuex'
export default {
name: 'App',
components: {
SideMenu,
Content
},
data() {
return {
menuVisible: false,
}
},
・
・
・
・
・
methods: {
setResource(category){
this.$store.dispatch('news/updateCategory', category)
this.menuVisible = false
}
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
.md-drawer {
width: 230px;
max-width: calc(100vw - 125px);
}
.md-content{
height: calc(100vh - 64px)
}
</style>
左上のアイコンをクリックすると、下のようにDrawerが表示されるようになりました。各カテゴリーをクリックしても、カテゴリー毎のニュースも表示されるようになっていると思います。
ニュースのブックマーク
actionとmutationの追加からしていきます。
src/store/modules/news.js
const actions = {
・
・
・
・
・
//ブックマークデータの更新のactionを追加
updateBookmark({commit}, value){
commit('updateBookmark', value)
}
}
src/store/modules/news.js
const mutations = {
・
・
・
・
・
//ブックマークした記事の保存または削除
updateBookmark(state, id){
let category = state.activeCategory
//既にブックマークされているか
const bookmark_index = state.bookmarkData.findIndex((item) => item.id == id)
if(category !== null && bookmark_index !== -1){
category = state.bookmarkData[bookmark_index].category
}
const article_index = state.newsData[category].findIndex((item) => item.id == id)
const bookmark = state.newsData[category][article_index].bookmark
if(article_index != null){
//newsDataのbookmarkをtrue・falseを変更
state.newsData[category][article_index].bookmark = !bookmark
//ブックマークされていなかったら、bookmarkDataにデータを追加
if(bookmark_index === -1){
let copy_data = Object.assign(state.newsData[category][article_index])
copy_data.category = category
state.bookmarkData.push(copy_data)
}else{
//既にある場合は、bookmarkDataから削除
state.bookmarkData.splice(bookmark_index, 1)
}
}
}
}
mutationsのupdateBookmarkで、bookmarkDataとnewsDataの更新をしていきます。
activeCategoryがbookmarkの時は、bookmarkDataを渡すようにgettersを変更します。
src/store/modules/news.js
const getters = {
getArticlesByCategory: (state) => {
const category = state.activeCategory
let data
if(category === "bookmark"){
data = state.bookmarkData
}else{
data = state.newsData[category]
}
return data;
}
}
次に、クリックイベントを追加するために、コンポーネントの変更を行います。
src/components/NewsItem.vue
<template>
<md-card :id="article.id">
<md-card-area>
<md-card-media>
<img :src="article.urlToImage" :alt="article.title" @error="noImage">
</md-card-media>
<md-card-header>
<div class="md-title">{{article.title}}</div>
</md-card-header>
<md-card-content>
{{article.description}}
</md-card-content>
</md-card-area>
<md-card-actions md-alignment="space-between">
<md-button class="md-icon-button" @click="onChangeBookmark(article.id)">
<md-icon v-if="article.bookmark">bookmark</md-icon>
<md-icon v-else>bookmark_border</md-icon>
</md-button>
<md-button v-bind:href="article.url" class="md-primary">Read More</md-button>
</md-card-actions>
</md-card>
</template>
<script>
import AssetsImage from "@/assets/no_image.jpg";
export default {
name: 'NewsItem',
props: {
article: Object
},
data(){
return {
assetImage: AssetsImage
}
},
methods: {
onChangeBookmark(id){
this.$store.dispatch('news/updateBookmark', id)
},
noImage(element){
element.target.src = this.assetImage
}
}
}
</script>
ブックマークのアイコンをクリックすると、onChangeBookmarkの関数から、先ほど追加したupdateBookmarkのアクションが実行されます。
これで、ブックマークの機能が完成しました！
まとめ
初めてVueとVuexを使ってアプリを作りましたが、初心者でもReactに比べて時間をかけずに作成することができました。まだまだこのアプリの改善したいところもありますが、短時間で動くアプリを作るのを目標に作ってみました。これから、Vueを使っていく上で、様々な疑問が出てくると思うので、その時はまた別の記事でまとめたいです。
我々ワウテック技術開発部はこのような環境で開発をしています。
興味を持った方がいらっしゃればいつでもご連絡下さい。
![シロカ ドリップ式コーヒーメーカー SCM-401[メッシュフィルター/ドリップ方式]](https://m.media-amazon.com/images/I/41iU3jirG6L.jpg "シロカ ドリップ式コーヒーメーカー SCM-401[メッシュフィルター/ドリップ方式]")
