#48 Vue.js + Rails アプリ開発アウトプット

2021年5月22日 21:35

こんばんは！hiroです😃
5月22日は "イエメン・ナショナルデー" です。1990年(平成2年)のこの日、 "イエメン・アラブ共和国" と "イエメン民主人民共和国" が統合され、イエメン共和国となったことを記念とする日みたいです。
こういう機会でしか調べないので、少しイエメン共和国について調べてみました。首都はサヌアになります🇾🇪公用語はアラビア語、人口は約2,900万人（2018年現在）です。主要産業は、 "石油" "天然ガス産業" "農業" "漁業" になります。アラブの最貧国の1つで、全人口の8割にあたる約2,400万人が何らかの人道支援と保健を必要としているみたいです。特に "食料" "医療" "衛生状況" は深刻で、約1,000万人が慢性的な食料不足状態にあるとの事です。
▼詳細はこちら
https://www.mofa.go.jp/mofaj/area/yemen/data.html

本日も学習した内容をアウトプットをします！😃

Vuetify

■public/index.htmlファイル
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet"> 
    <link href="https://cdn.jsdelivr.net/npm/vuetify@1.5/dist/vuetify.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuetify@1.5/dist/vuetify.js"></script>
    <title>Snippet App</title>
  </head>

  <body>
    <v-app id="app">
      <v-toolbar color="red lighten-3" dark>
        <v-toolbar-title>Snippet App</v-toolbar-title>
        <v-spacer></v-spacer>
        <v-btn flat>New Snippet</v-btn>
      </v-toolbar>
    </v-app>
    <script>
      new Vue({
        el: '#app',
        data(){
          return{
          }
        },
        mounted(){
      
        },
        methods:{
      
        }
      })
    </script>
  </body>
</html>

・Vue.jsのUIライブラリー。Googleが提唱したマテリアルデザインにのっとっており、直感的で使いやすいコンポーネントを利用することが出来る。
・デザインの知識が全く無くても、簡単にUIを作れる便利なもの。

■public/index.html（Googlefontの読み込み）headタグ2行目に記述
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">

■public/index.html（Vuetify で指定されている css ファイルの読み込み）
headタグ3行目に記述
<link href="https://cdn.jsdelivr.net/npm/vuetify@1.5/dist/vuetify.min.css" rel="stylesheet">

■public/index.html（Vuetify の JavaScriptファイルを CDN から読み込ませる）headタグ5行目に記述
<script src="https://cdn.jsdeliver.net/npm/vuetify@1.5/dist/vuetify.js"></script>

・<body>タグ1行目、<div id='app'> の代わりに "<v-app id='app'>" とする。
・<body>タグ2行目、 "v-toolbar" はツールバーを表示。
・<body>タグ3行目、 "v-toolbar-title" はツールバーのタイトルを表示。
・<body>タグ4行目、 "v-spacer" は、余白を作成。このタグのあとに指定されたタグは "右寄せ" で配置される。
・<body>タグ5行目、 "v-btn" で、ボタンを配置。
・ v- から始まる Vuetify で使えるパーツのリストや使い方の詳細はこちら。
　https://v15.vuetifyjs.com/ja/getting-started/quick-start/

普段実装するHTML/CSSよりも記述が簡単で、今回記述した内容だけで以下の装飾が出来ました！すごい便利です😃
https://gyazo.com/229ea20fbda8e2af75b7659c2d21a144
Vuetifyを習得する事で実装の幅も広がると思うので、引き続き学習を進めていきます😇

本日も最後まで読んで頂き、ありがとうございました！🙇‍♂️

※本日時点で学習した内容を備忘目的で投稿しております。各項目を全て網羅している内容では無いため、「駆け出しが張り切ってアウトプットしてるな〜」程度で温かい目で読んで頂けると幸いです😇

■参考教材TechPit　
Rails × Vue.js でメモアプリを作成しながらモダンな開発を学ぼう！

この記事が気に入ったらサポートをしてみませんか？