環境
vue 2.6.12

エラー内容

You are using the runtime-only build of Vue where the template compiler is not available. 
Either pre-compile the templates into render functions, or use the compiler-included build.

解決方法

1. プロジェクトディレクトリ直下に vue.config.jsを作成
2. module.exports = { runtimeCompiler: true, }　を追加

vue.config.js

module.exports = {
  runtimeCompiler: true,
}

参考

Portfolio

トップページ

まず最初に，この記事では技術的な部分にはあまり触れないです．単純に初学者が作成に至るまでに参考にしたリファレンスや方法をまとめるだけです．したがって当たり前ですが，ほとんどの方にとっては何の価値もない記事となっています．

フロント未学習の大学生が1週間でVue.jsを使ったポートフォリオを作った話

この記事に触発されて，自分もvue.jsでポートフォリオを作成しました．
他の動機として，普段の研究やバイトではpythonばかり使ってるので，web系の言語も習得したいなと思って始めました．ただ最初はDjangoを使ってなにかバックエンドのものを作ろうとしたのですが，思ったよりも時間がかかりそうなので，先にvue.jsでフロントエンドを経験してみました．

完成度低いですが，最近忙しくて作業する時間がなく，どうやって作成したのかを忘れてしまいそうなので，いま記事を書いてます(本当に完成度低い)．

上記の記事では1週間で仕上げていますが，自分の経験値のなさからかそれとも自頭の違いからか，理解に時間がかかり，1か月ぐらいグダグダ勉強してた気がします．作り始めてからは1週間ぐらいだったと思います．

よく初学者にある"何がわからないのかわからない"っていう状況が非常に多くてそれを打開するために，いろいろな本や動画，記事を参照しました．

中身はよくあるVue.jsでSPAを実現したってだけの簡単なウェブサイトです．なんの新規性も技術的な深化もありません．

あとはGithubでissue管理して，作業を行いました．
以下の記事の手順で行うとチームでの作業を疑似体験できるため非常にいい経験になると思います．
Githubでissue管理して開発しよう

学習編

pythonとCとC++への理解があるだけで，フロントエンドに関しては完全未経験でした．HTMLもCSSもJavascriptも未経験でしたので1から勉強しました．

HTML, CSS, JavaScript

Progate

progate

たくさんの方が薦めていますが，私は合いませんでした．
習うより慣れよ方式なので，定義や枠組みをしっかり理解してから使いたい私のスタイルとは合わなかったです．

結局以下の本を使用しました．この本は最近読んだ技術系の本でも一番好きです．レイアウト，色使い全ていいです．おしゃれなベジタリアン向けレシピ本を読んでる感じで，一日で読み終わってしまいました．値段高めで英語ですけど，家に置いておいてもオシャレだなと思います．

HTML and CSS: Design and Build Websites

JavaScriptに関しては，あまり勉強しませんでした．理由としてはもともとpythonができるってことで，コードをみても理解不能になることなどはなかったからです．つまり何がわからないのかわからない状況にはならずに，わからない箇所があっても調べればどうにかなるって感じでした．他の言語の経験がなくてもjavascriptに関してはprogateでサラッとどんな仕様なのか見ておくだけでいいのかなと思います．

Vue.js

公式リファレンス

これもいろんな方が薦めていますが，私には難しかったです．そもそも他のweb系の技術を学んだことがなかったので，言葉の意図がわからなかったりそもそも意味がわからないってことばかりでした．

結局いろいろ本や記事を読んでみて，なんとなくわかってきたところで，以下のビデオに沿ってたくさんアプリを作りました．単純にSPA仕様のポートフォリオを作りたいだけなら必要ないですが，実際ポートフォリオ作成はコードを書く練習にはならなくて，ただ技術をなんとなく使って終わりになってしまいました．なので実際にゴリゴリコード(javascript)を書いて成長って意味でオススメです．英語で10時間ありますが，かなり初歩からの説明となっており，わかりやすいです．

Vue 3 Tutorial - Full Course 10 Hours 10 apps

もし本を読みたかったらなんでもいいと思います．数冊読んでみたのですが，全部書いてあることは同じでした．

以下の記事も参考に読みました．
Vue.js + Bootstrap4でポートフォリオサイトの雛形を作ろう！
【超簡単】Vue.jsを使って3時間で自分のホームページを作成&公開する
Vueを学び、SPA対応のポートフォリオサイトを自作するまでの道のり
Vue.jsまとめ【初心者】
vue.js＋Vuexチュートリアル

実装編

使用したツール

HTML, CSS, JavaScript, Vue.js, Bootstrap(いらない)

Vuetifyも入れようと思ったんですが，最初にnpm run devした後に入れることがうまくいかなくてやめました(Bootstrap同様にポートフォリオ作成の必要条件ではないですし…)

仕様

未完成の仕様もありますが，以下のことを試みました．

・SPA
・GitHub pagesでのdeploy
・Google font
・レスポンシブ対応(まだ微妙)
・多言語対応(まだ途中で放置)

コンテンツ

自分は完全未経験なので全然書くことがありませんが，とりあえず

・自己紹介
・スキル
・作成したもの
・投稿(Qiitaへの投稿)

にしました．

レイアウト

ここはなんのリファレンスにも頼らずに自分で適当にやってので流し読みしてください．

ワイヤーフレーム

ワイヤーフレームというWebページのレイアウトを定める設計図を作成するのが当たり前らしいです．
自分は見様見真似の自己流でやりました．
以下のサイトが無料で，デフォルトのデザインもたくさん入っていて使いやすかったです．

Figma

こんな感じで適当に，いろいろいじって遊んでました．
先にこれでデザインを決めると，HTMLとCSSを書くときに非常に楽でした．

配色

これは普段の研究室やバイトのパワポ作成で学んだ処世術ですが，基本的には三色ぐらいでまとめると見やすいです．(Webサイトにも当てはまるのか？)
その三色(もしくは四色)の決め方としては，パレットがあります．
Color paletteとググれば無限に出てきますので，その中で気に入った配色のものを使用しました．
具体的には以下のサイトを使用しました．

Color Hunt

アバター

別に必要ないですが，この機会にWebエンジニアっぽいのを作ってみました．

画像

なんでもいいと思います．
私は好きなアニメのSouth parkのアバター作成を用いました．

South Park Avatar Creator

加工

よくある丸型のアイコンの作製．
ただの画像の切り抜きなので，何のソフトでも可能ですが，私は以下のサイトを利用しました．
背景とかいろいろいじれます．

Free Profile Picture Maker

完成したアバターが以下のものになります．

SPA

詳しい技術的な仕様は，もっと詳しい方々の記事を読んでください．Single Page Applicationとあるように，ページ全体を先にロードして，ボタンぽちぽちしてもいちいちサーバ側と通信しないで済む技術です．

これはVue-routerというプラグインを導入することで，実現することができるようになります．
最初はよくわからなかったのですが，以下の記事を参考にとりあえず導入してゴチャゴチャいじってたら理解できました．

今さら聞けない？Vue Router
Vue-routerを使って、SPAをシンプルにはじめてみる

Google Fonts

フォントをこちら側で提供しないと，ブラウザによって異なるフォントになってしまいます．
なので，Google Fontを使って特定のフォントが表示されるようにしました．
なぜか?(簡単すぎるからか)リファレンスがなかったので以下の記事にしました．
Google FontsをVue.jsで使用する

GitHub pagesへのdeploy

この記事を参考にさせていただきました．
vue-cliで作ったアプリをGithub Pagesにデプロイ
しかし，うまくいかずにstackover flowで調べたところ，vue-cli3では以下のファイルが必要みたいでした．
以下のvue.config.jsを作成してconfig内に置いてやる必要があります．

vue.congig.js

module.exports = {
  outputDir: 'docs',
  assetsDir: './',
  publicPath: './'
}

これを置いたあとにbuildすれば大丈夫です．

作ってみて

思ったよりも時間がかかって大変でした．
わからないことがわからないという最悪の状況を久々に経験して，辛かったというのが率直な感想ではありますが，この経験はあくまでも登竜門というか，必ず最初には経験しないといけないことだと思います．
逆にこれを経験したからこそ今ならばvue.js以外のフレームワークにもすんなりと対応できる力が養われたと思います．

あとは，web系の技術の習得には，調べる能力?というのが結構問われてるのかなあって感じました．
大学院の研究活動やバイトでの開発業務をしているとリファレンスをたくさん探したりすることは当たり前の行為ですが，web業界も日々バージョンであったり技術の衰退が激しいので，vue.jsに限ってもバージョンやプラグインなどの違いから一つのリファレンスだけではどうにもならないっていうことが多いです．なので調べる能力？が大事なのかなあと感じました．

はじめに

天気予報API（MetaWeather）を使って、一週間分の天気を表示する簡単なアプリケーションをつくりました。備忘録として記事を残します。

Node.jsやVueの環境が準備されていることを前提として進めていきます。

環境

• Mac
• Vue CLI 4.5.11
• Vue 2.6.12
• npm 6.14.10
• Node.js 14.15.4

必要パッケージをインストール

axiosでAPIと非同期通信、Bootstrap-vueでスタイル作成を行っているので、これらをnpmインストールします。あわせて moment.js という日付の形式を変換するモジュールもインストールします。今回は vue-router は使いませんでした。

① axiosとvue-axiosをインストール

npm install axios vue-axios

② Bootstrap-vueをインストール

npm install bootstrap-vue

③ moment.jsをインストール

npm install moment

npm 5.0.0 以降からは install 時にデフォルトで save（dependenciesに追加）してくれます。今回は npm 6.14.10 なので、--saveオプションを指定する必要はありません。

追加できたか確認

package.jsonのdependenciesにインストールしたモジュールが追加され、この様になっているか確認します。

package.json

"dependencies": {
    "axios": "^0.21.1",
    "bootstrap-vue": "^2.21.2",
    "core-js": "^3.6.5",
    "moment": "^2.29.1",
    "vue": "^2.6.11",
    "vue-axios": "^3.2.4"
  },

使用したソースコード

下記がソースコードの一部です。

main.jsを編集

特に設定を弄っていなければmain.jsが最初に呼ばれているエントリーファイルなので、ここで使用するモジュールを読み込みます。axiosとbootstrap-vueはエントリーファイルでインポートするよう指定されています。

Vue.js用に作られたモジュールを使う場合に Vue.use( ) を使います。

main.js

import Vue from 'vue'
import App from './App.vue'

import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
Vue.use(BootstrapVue)

import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)


Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

template内部（HTML）

<b-card-group>などはBootstrap-vueでスタイルをつけています。

data.infos オブジェクトにAPIから取得したデータが格納されています。それをv-forの繰り返し文で表示しています。

Weather.vue

<template>
<div>
<!-- 略 -->

  <b-card-group cols="3" cols-sm="4" cols-md="6" cols-lg="7">
    <b-card v-for="info of infos" v-bind:key="info.date">
      <b-card-title>{{ info.date | moment }}</b-card-title>
      <b-card-text>
        <ul>
          <li class="small text-muted">{{ info.weather_state }}</li>
          <li><img v-bind:src="info.image_url" /></li>
          <li class="small text-muted mt-3">気温</li>
          <li>最高 {{ info.max_temp | roundUp }}°C</li>
          <li>最低 {{ info.min_temp | roundUp }}°C</li>
          <li class="small text-muted mt-2">湿度</li>
          <li>{{ info.humidity }}％</li>
          <li class="small text-muted mt-2">風速</li>
          <li>{{ info.wind_speed | roundUp }}mph</li>
        </ul>
      </b-card-text>
    </b-card>
  </b-card-group>
</div>
</template>

script内部（JavaScript）

選択された地域IDである woeid をパラメータに使用し、axiosでAPIにリクエスト。
そのaxiosで取得した情報を、data内のオブジェクトのinfosに代入しています。

Weather.vue

<script>
import axios from "axios";
import moment from "moment";

export default {
  data() {
    return {
      woeid: null, //地域ID
      infos: {},
    };
  },
  methods: {
     // 省略
     // 「getDataUrl」に天気取得のためのURLを生成

      getDataUrl.forEach((value, key) => {
        axios
          .get(value)
          .then(
            function (response) {
              var weather = response.data[0];

              this.$set(this.infos, key, {
                date: weather.applicable_date, //日付
                max_temp: weather.max_temp, //最高気温
                min_temp: weather.min_temp, //最低気温
                wind_speed: weather.wind_speed, //風速
                weather_state: weather.weather_state_name, //天候
                humidity: weather.humidity, //湿度
                image_url:
                  "https://www.metaweather.com/static/img/weather/ico/" +
                  weather.weather_state_abbr +
                  ".ico", //天気アイコン
              });
            }.bind(this)
          )
          .catch(function (error) {
            console.log(error);
          });
      });
    },
  },
  filters: {
    roundUp(value) {
      return Math.ceil(value);
    },
    moment: function (date) {
      return moment(date).format("M月DD日");
    },
  },
};
</script>

App.vueを編集

Weather.vueをinportし、template内に明示することでサイトに組み込みます。

App.vue

<template>
  <div id="app">
    <Weather />
  </div>
</template>

<script>
import Weather from "./components/Weather.vue";

export default {
  components: {
    Weather,
  },
};
</script>

<style>
/* 省略 */
</style>

まとめ

今回はVueを手軽に 実践できました。
Vueの公式ドキュメント見やすかったです。次はもっとコンポーネントの数を増やして色々やりたくなりました。Vuetify やら nuxt.jsも試したい所存。

参考文献

• axios
• Vue.js を vue-cli を使ってシンプルにはじめてみる
• BootstrapVue公式

はじめに

天気予報API（MetaWeather）を使って、一週間分の天気を表示する簡単なアプリケーションをつくりました。備忘録として記事を残します。

Node.jsやVueの環境が準備されていることを前提として進めていきます。

環境

• Mac
• Vue CLI 4.5.11
• Vue 2.6.12
• npm 6.14.10
• Node.js 14.15.4

必要パッケージをインストール

axiosでAPIと非同期通信、Bootstrap-vueでスタイル作成を行っているので、これらをnpmインストールします。あわせて moment.js という日付の形式を変換するモジュールもインストールします。今回は vue-router は使いませんでした。

① axiosとvue-axiosをインストール

npm install axios vue-axios

② Bootstrap-vueをインストール

npm install bootstrap-vue

③ moment.jsをインストール

npm install moment

npm 5.0.0 以降からは install 時にデフォルトで save（dependenciesに追加）してくれます。今回は npm 6.14.10 なので、--saveオプションを指定する必要はありません。

追加できたか確認

package.jsonのdependenciesにインストールしたモジュールが追加され、この様になっているか確認します。

package.json

"dependencies": {
    "axios": "^0.21.1",
    "bootstrap-vue": "^2.21.2",
    "core-js": "^3.6.5",
    "moment": "^2.29.1",
    "vue": "^2.6.11",
    "vue-axios": "^3.2.4"
  },

使用したソースコード

下記がソースコードの一部です。

main.jsを編集

特に設定を弄っていなければmain.jsが最初に呼ばれているエントリーファイルなので、ここで使用するモジュールを読み込みます。axiosとbootstrap-vueはエントリーファイルでインポートするよう指定されています。

Vue.js用に作られたモジュールを使う場合に Vue.use( ) を使います。

main.js

import Vue from 'vue'
import App from './App.vue'

import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
Vue.use(BootstrapVue)

import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)


Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

template内部（HTML）

<b-card-group>などはBootstrap-vueでスタイルをつけています。

data.weatherList オブジェクトにAPIから取得したデータが格納されています。それをv-forの繰り返し文で表示しています。

AppWeather.vue

<template>
<div>
<!-- 略 -->

  <b-card-group cols="3" cols-sm="4" cols-md="6" cols-lg="7">
    <b-card v-for="weather of weatherList" v-bind:key="info.date">
      <b-card-title>{{ weather.date | moment }}</b-card-title>
      <b-card-text>
        <ul>
          <li class="small text-muted">{{ weather.weather_state }}</li>
          <li><img v-bind:src="weather.image_url" /></li>
          <li class="small text-muted mt-3">気温</li>
          <li>最高 {{ weather.max_temp | roundUp }}°C</li>
          <li>最低 {{ weather.min_temp | roundUp }}°C</li>
          <li class="small text-muted mt-2">湿度</li>
          <li>{{ weather.humidity }}％</li>
          <li class="small text-muted mt-2">風速</li>
          <li>{{ weather.wind_speed | roundUp }}mph</li>
        </ul>
      </b-card-text>
    </b-card>
  </b-card-group>
</div>
</template>

script内部（JavaScript）

選択された地域IDである woeid をパラメータに使用し、axiosでAPIにリクエスト。
そのaxiosで取得した情報を、data内のオブジェクトのinfosに代入しています。

AppWeather.vue

<script>
import axios from "axios";
import moment from "moment";

export default {
  data() {
    return {
      woeid: null, //地域ID
      weatherList: {},
    };
  },
  methods: {
     // 省略
     // 「getDataUrl」に天気取得のためのURLを生成

      getDataUrl.forEach((value, key) => {
        axios
          .get(value)
          .then(
            function (response) {
              var weather = response.data[0];

              this.$set(this.weatherList, key, {
                date: weather.applicable_date, //日付
                max_temp: weather.max_temp, //最高気温
                min_temp: weather.min_temp, //最低気温
                wind_speed: weather.wind_speed, //風速
                weather_state: weather.weather_state_name, //天候
                humidity: weather.humidity, //湿度
                image_url:
                  "https://www.metaweather.com/static/img/weather/ico/" +
                  weather.weather_state_abbr +
                  ".ico", //天気アイコン
              });
            }.bind(this)
          )
          .catch(function (error) {
            console.log(error);
          });
      });
    },
  },
  filters: {
    roundUp(value) {
      return Math.ceil(value);
    },
    moment: function (date) {
      return moment(date).format("M月DD日");
    },
  },
};
</script>

App.vueを編集

AppWeather.vueをinportし、template内に明示することでサイトに組み込みます。

App.vue

<template>
  <div id="app">
    <AppWeather />
  </div>
</template>

<script>
import AppWeather from "./components/AppWeather.vue";

export default {
  components: {
    AppWeather,
  },
};
</script>

<style>
/* 省略 */
</style>

まとめ

今回はVueを手軽に 実践できました。
Vueの公式ドキュメント見やすかったです。次はもっとコンポーネントの数を増やして色々やりたくなりました。Vuetify やら nuxt.jsも試したい所存。

下記が続きになります。
この記事では、AJAX通信を行うにあたってブラウザの制約に苦戦した中で学んだことをまとめました。

• 【Vue ✕ 天気予報API③】CORS未対応APIにプロキシサーバで対応

参考文献

• axios
• Vue.js を vue-cli を使ってシンプルにはじめてみる
• BootstrapVue公式