「Web技術速習テキスト 実践編」の感想・備忘録

スポンサーリンク

書籍「Web技術速習テキスト 実践編」のまとめ。

点数

84点

感想

書籍名のイメージとは異なり、Vue.js、Vuetify、Firebaseについての解説本だった。

説明がとても丁寧で、Vue.jsを扱っている他の書籍よりも優れていると思う。

Veutifyのバージョンが1.5だったのが残念。

Vuetifyをもう少し触って、今後使っていきたい。

Vue CLI

  1. npm init -y
  2. npm install @vue/cli --save-dev
  3. vue create my-first-app
  4. cd my-first-app
  5. npm run serve

ビルド

npm run build

デフォルトではHTML内のパス指定がドキュメントルートからの絶対パスになっている。
相対パスにするには、vue.config.jsを作成しPublicPathを指定する必要がある。

https://cli.vuejs.org/config/#publicpath

module.exports = {
  publicPath: './'
}

コンポーネント間のやりとり

props

配列で定義する。
props: ['city', 'hoge'],

型指定する場合はオブジェクトで定義する。

props: {
  city: String,
  hoge: String
},

emit

子コンポーネント

<button class="btn text-white" @click="deleteCity">
  <i class="fas fa-trash-alt"></i>
</button>

<script>
// methodsにメソッドを定義
deleteCity() {
  this.$emit('deleteCity', this.city)
}
</script>

親コンポーネント

<Child v-for="city in cities" :city="city.name" :key="city.id" @delete-city="deleteCity" class="card shadow"/>

<script>
// methodsにメソッドを定義
deleteCity(delCity) {
  const index = this.cities.findIndex((city) => {
    return city.name === delCity;
  });
  if (index >= 0) {
    this.cities.splice(index, 1);
  }
}
</script>

Bootstrap

  1. npm install bootstrap jquery popper.js
  2. main.jsなどに以下を追加
    import 'bootstrap';
    import 'bootstrap/dist/css/bootstrap.min.css‘;
Webpack
Webpack 3 を使ってどのように Bootstrap をインストールするか学びましょう。

jumbotron

<div class="jumbotron">
  <h1>Web技術速習テキスト 実践編</h1>
</div>

card

<div class="card-deck">
  <HelloWorld v-for="city in cities" :city="city.name" :key="city.id" class="card shadow"/>
</div>
<!-- HelloWorld.vue -->
<template>
  <div>
    <div class="card-header text-white bg-primary text-center h3">{{ city }}</div>
    <div class="card-body h2">{{ time }}</div>
  </div>
</template>

Font Awesome

https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself
ダウンロードしてall.min.cssをlinkタグで読み込む。
<link rel="stylesheet" href="./css/all.min.css">

以下のように使用する。

<button class="btn text-white" @click="deleteCity">
  <i class="fas fa-trash-alt"></i>
</button>

Bootstrap Vue

Bootstrap用のタグを使えるようになる。
(通常のクラス指定でも使うことができる)

  1. npm install bootstrap-vue
  2. main.jsなどに以下を追記
    import BootstrapVue from 'bootstrap-vue';
    Vue.use(BootstrapVue);
    import 'bootstrap/dist/css/bootstrap.min.css';
    import 'bootstrap-vue/dist/bootstrap-vue.min.css';
<button class="btn btn-info">クラスによる指定</button>
<b-btn>タグによる指定</b-btn>

// テーブルはBootstrap Vueの方が便利。
<b-table striped hover :items="cities" :fields="fields"></b-table>

axios

npm install axiosでインストール

<b-card v-for="picure in pictures" :key="picure.id">
  <b-card-body>
  <b-card-title>{{picure.id}}:{{picure.filename}}</b-card-title>
  <b-img :src="`./img/${picure.filename}`"></b-img>
  </b-card-body>
</b-card>

<script>
import axios from 'axios'

// methods内のメソッドに処理追加
axios.get('./pictures.json', {params: {hoge: 'hogehoge'}})
    .then((response) => {
      this.pictures = response.data.pictures;
    })
    .catch((error) => {
      console.log(error);
    });
</script>

Contentful

https://www.contentful.com/
記事の管理画面はあるが、ユーザーが記事を閲覧する画面は存在しないCMS。 ユーザー側はAPIのみ用意されている。
ドイツ企業のサービス。

Vuetify

Vue.jsで使用できるマテリアルデザインのUIフレームワーク。
Bootstrap Vueのマテリアルデザイン版のようなもの。

vue add vuetifyでインストール
App.jsを見ると、<template>の次に<v-app>がある。
Vuetifyではこの<v-app>の中にタグを書く必要がある。

<v-app>
  <v-main>
    <v-container>
      <v-row>
        <v-col sm="4" class="yellow">行1</v-col>
        <v-col sm="4" class="blue">行2</v-col>
      </v-row>
    </v-container>
  </v-main>
</v-app>

<div class="col-xs-12 col-sm-8 col-md-6>
というBootstrapの記述はVuetifyでは以下のようになる。
<v-col cols="12" sm="8" md="6">

マテリアルデザインとは?

現実世界の光や影、奥行き、重なりをフラットなデザインに取り入れたもの。Googleが発表・推奨。
フラットデザインの問題点「クリックできる箇所やテキストが入力できる箇所が直感的に認識しづらい」を解消したもの。

グリッドレイアウト

https://vuetifyjs.com/ja/components/grids/
  • コンテンツは<v-main>で囲む。
  • コンテナは<v-container>または<v-container fluid>
    (Bootstrapの<div class="container"><div class="container-fluid">)
  • <v-row>は行を表す。
    (Bootstrapの<div class="row">)
  • <v-col>は列を表す。
    (Bootstrapの<div class="col">)

余白

ma-2pt-3などのクラスで余白の設定が可能。

redred--textなどのクラスで色の変更、text-lighten-2text-darken4などで濃淡を変更が可能。

コンポーネント

ボタン

https://vuetifyjs.com/ja/components/buttons/
<v-btn x-small class="ma-2" color="success">success</v-btn>
<v-btn x-large class="ma-2" color="info">info</v-btn>

※colorはredなど色名またはprimary, secondary, accent,error, info, success,warningのテーマ名
https://vuetifyjs.com/ja/customization/theme/

カード

https://vuetifyjs.com/ja/components/cards/
<v-card max-width="344">
  <v-card-title class="primary lighten-3">ここにタイトルが入ります</v-card-title>
  <v-card-text>ここに本文が入ります</v-card-text>
  <v-card-actions>
    <v-btn color="warning">ボタン</v-btn>
  </v-card-actions>
</v-card>

ピッカー

<v-date-picker v-model="date" :landscape="false"></v-date-picker>
<v-time-picker v-model="time" :landscape="false" format="24hr"></v-time-picker>

ダイアログ

<v-dialog v-model="isShowDialog" max-width="300">
  <template v-slot:activator="{ on }">
    <v-btn v-on="on">
      Open
    </v-btn>
  </template>
  <v-card>
    <v-card-title class="headline">ダイアログです。</v-card-title>
    <v-card-text>よろしいですか?</v-card-text>
    <v-card-actions>
    <v-btn max-width="100" color="success">OK</v-btn>
    <v-btn max-width="100" color="info">キャンセル</v-btn>
    </v-card-actions>
  </v-card>
</v-dialog>
<!-- 表示をv-dialogの外側から行う場合は.stop修飾子が必要 -->
<v-btn color="warning" @click.stop="isShowDialog=!isShowDialog">ダイアログ表示/非表示</v-btn>

※v-slotの部分はスコープ付きスロット
https://jp.vuejs.org/v2/guide/components-slots.html#%E3%82%B9%E3%82%B3%E3%83%BC%E3%83%97%E4%BB%98%E3%81%8D%E3%82%B9%E3%83%AD%E3%83%83%E3%83%88

コメント