イイダリョウのブログ。【Vue.js】UIフレームワーク「Vuetify」をCDNリンクで事始めた2019-08-25【Vue.js】UIフレームワーク「Vuetify」をCDNリンクで事始めたJSVue.jsの続きでず。前回まではコンポーネントについて触れましたが今回からはVue.jsのUIフレームワーク、Vuetifyにトライしてみます。CDNリンクで事始めることができました。クモのようにコツコツとVuetifyはUIフレームワークまずVuetifyとは何ぞや、というところから。日本語公式サイトには「マテリアルデザインコンポーネントフレームワーク」とある。Vuetify.jsVue.jsシリーズの初回にも書いたようにVue.js自体もフレームワークなんだが、その中にさらにフレームワークがあるとはこれいかに。コンポーネントフレームワークとのことだがコンポーネントも前回まで触れていたVue.jsの機能だ。クモのようにコツコツとマテリアルデザインとはGoogleの提唱するUIデザイン。サルワカの記事がとてもわかりやすい。いうデザインはGoogleだけでなく多くのWebアプリやスマホアプリで見られる。※参考:【2018年版】マテリアルデザインとは?作り方とガイドラインまとめつまりVuetifyはVue.jsにマテリアルデザイン的なUIデザインを簡単に導入ができるフレームワーク。UIフレームワーク、またはCSSフレームワークというわれるジャンルに入る。有名どころではBootstrapなどがある。world.BootStrapは自分も以前使ってみた。いわゆる「BootStrap臭」といわれるほうな似たようなデザインになりがちで、それを消し去るのは手間がかかった。Webアプリのダッシュボードなどデザインよりも使いやすさが重視される仕事では有効な手段と感じた。Vuetifyも同様にVue.jsで作るWebアプリの管理画面などのUIには有効と思われる。CLIやWebpackなどを使ったインストール方法がいろいろ書かれているが、頑張ってスクロールすると下の方にCDNのリンクで始める方法も書かれている。Vuetify.jsとりあえずCodePenでハローワールドしてみた。CodePen.CDNリンクのおかげでCodePenで体験できた!HTMLコード。<v-container>こんにちは、びゅうてぃふぁい。src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script></body>#appタグ#appタグの中にv-appコンポーネントv-appコンポーネントの中にv-contenコンポーネントv-contenコンポーネントの中にv-containerコンポーネントv-containerコンポーネントの中にハローワールド的なテキストbodyの閉じタグの直前にvue.jsをリンク同じくvuetify.jsをリンクheadの中にはVuetifyのCSSが、bodyの閉じタグの直前にはVue.jsとVuetifyのJSファイルがリンクされている。})Vueインスタンス作成elオプションで#appと紐付けvuetifyオプションでVuetifyインスタンス作成コンポーネントで書き出されたコードさっきの画面は見た目はなんだか単に「ハローワールド」を表示しただけじゃないか、と感じる。デベロッパーツールでHTMLを見てみるたら#appの中身はこんなコードになっていた。class="container">こんにちは、びゅうてぃふぁい。</div></div>#appの中にdivタグやmainタグが何層にも入れ子になっており、class名、id名に元コードのコンポーネント名が見受けられる。自分で書いたJSにはこれらの設定はない。#appとvuetifyインスタンスを紐づけただけだ。それだけでVuetifyコンポーネントがこのDOM要素に置き換わったことがわかる。class名の中にv-xxxxという名前がいくつかある。この中で例えば.v-applicationはvuetify.cssの設定が見受けられた。フォントをRobotoにせよ、文字サイズを2.5remにせよ、などのスタイルが書いてある。vuetify.jsの中にも.v-applicatioに関する設定が見受けられた。}render関数ということで「ページが読み込まれたときにdivタグに.v-applicationを追加する」といった処理が書かれている。自分で書くコードは最小限なまま、裏でvuetify.cssやvuetify.jsが動いてくれていることがわかった。最後にということで、VuetifyをCDNリンクで手軽に事始めてみた。このままではまだどんな恩恵があるのかまだよくわかりませんね。UIフレームワークらしい便利な機能に触れていきたく思います。JSフレームワークReact、はじめました。今回は初回...2019-11-01【Vue.js】Nuxt.jsのプロジェクトを作成するVue.jsの続きです。前回はNuxt.jsのインストールと簡易ページを...2019-09-18【Vue.js】Nuxt.jsで何ができるのか調べた(SSR、ルーティング、静的ファイル生成など)Vue.jsの続きです。前回まではVue.jsのUIフレームワーク、Vueti...2019-09-04【Vue.js】Vuetifyにヘッダー、フッターを配置(v-app-bar、v-footer)Vue.jsの続きです。前回はボタンを配置してみました。今回はヘ...2019-08-29【Vue.js】Vuetifyでボタンを並べてみる(v-app、v-content、v-contai...Vue.jsの続きです。前回はVuetifyを事始めました。はてなブログProフロントエンドエンジニア。神奈川に住まう四十路のオジキ。DTP→Webデザイナーから転向し今に至る。引き続きコツコツの日々。(24)リンクTwitterInstagramYoutubeCodePenGitHubPinterestQuolaFacebooknoteQiitaはてなブログをはじめよう!idr_zzさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。