- 投稿日:2020-07-10T23:50:15+09:00
v-forで表示するアイテムを絞り込む
どっかの本にこんな感じで記載されていた。
book.html<body> <div id="app"> <!-- v-ifはBooksの配列がある場合表示する設定 --> <table v-if="books.length"> <th>ISBN</th><th>書名</th><th>価格</th> <tr v-for="b in expensiveBooks"> <td>{{ b.isbn }}</td> <td>{{ b.title }}</td> <td>{{ b.price }}</td> </tr> </table> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script> <script src="vue.js"></script> </body>book.jsnew Vue ({ el: '#app', data: { books: [{ isbn: '978-4-7981-5757-3', title: 'Javascript逆引きレシピ', price: '2800' }] }, computed: { expensiveBooks: function(){ return this.books.filter(function(b){ return b.price >= 2500; }) } }, });アプリを作成した時に気づいたことだが、jsのfind(),some(),filter(),map()は結構使っていたので、どこがでまとめることにする。
- 投稿日:2020-07-10T23:12:14+09:00
DockerでNuxt.jsプロジェクト新規作成セット
概要
- nuxt.jsのセットアップ、新規プロジェクト作成、サーバー起動までをかんたん手順で行えます。
- Dockerコンテナとして構築するので、お手元のPCを汚しません。
- 複製、破棄、構築し直しも、手軽に行えます。
github(一式ダウンロード)
https://github.com/yagrush/docker-nuxtjs
必要なもの
- Docker
- docker-compose
- makeコマンド
がインストールされている Mac / Linux。
(WindowsではnodeのDockerコンテナが起動しませんでした。要調査。)使い方
https://github.com/yagrush/docker-nuxtjs のリポジトリをcloneまたはダウンロード&解凍する。
以下の2つのファイルを編集する。
.env
PROJECT_NAMEの値をご自分の希望に合わせて編集してください。
この値は、nuxt.jsプロジェクトのディレクトリ名にもなります。PROJECT_NAME=my_projectMakefile
Makefileは、makeコマンド用の設定ファイルです。
これを使うと、複数のコマンド操作に名前を付けて、ショートカットのように簡単に呼び出せます。さて、最近のバージョンでは、
create-nuxt-app
(nuxt.jsプロジェクト作成コマンド)実行時、途中でカスタム内容の指定を求められます。
本一式ではその入力を自動化するために create-nuxt-app実行時のオプション --answers で予めカスタム内容を指定するようにしています。カスタム項目一覧はこちらの公式ソースコードからご確認いただけます。
nuxt.js公式リポジトリ内、prompts.js
--answers のパラメータをJSON形式で指定して、ご自分のご希望に合わせて下さい。... ... create-nuxt-app: docker-compose exec dev bash -c 'create-nuxt-app $$PROJECT_NAME --answers "{ \ \"name\": \"$$PROJECT_NAME\", \ \"language\": \"js\", \ \"pm\": \"yarn\", \ \"ui\": \"vuetify\", \ \"features\": [\"axios\"], \ \"linter\": [\"eslint\"], \ \"test\" : \"jest\", \ \"mode\" : \"universal\", \ \"target\" : \"static\", \ \"devTools\": [\"jsconfig.json\"] }" \ ' ... ...※ エスケープが若干複雑ですみません。
Makefile
>docker-compose
>bash -c
と入れ子になっているので…
基本的にサンプルをコピペ&編集して頂ければ大丈夫かとは思います。
(サンプルの設定は、単なる私の好みです。)コマンドインターフェースを起動する。
ダウンロードしたフォルダの中に移動する。
# git cloneした場合 cd docker-nuxtjs # ZIPをダウンロードして解凍した場合 cd docker-nuxtjs-master以下のコマンドを実行する。
make init成功すると、このようなコマンドログになります。↓
... ... yarn run v1.22.4 $ eslint --ext .js,.vue --ignore-path .gitignore . --fix Done in 24.57s. ? Successfully created project my_project To get started: cd my_project yarn dev To build & start for production: cd my_project yarn build yarn start To test: cd my_project yarn test docker-compose exec dev bash -c 'sed -i -e "s@export default {@export default {\n telemetry: false,\n@g" $PROJECT_NAME/nuxt.config.js' docker-compose exec -d dev bash -c 'cd $PROJECT_NAME && npm run dev' $ちょっぴり解説コーナー
docker-compose exec dev bash -c 'sed -i -e "s@export default {@export default {\n telemetry: false,\n@g" $PROJECT_NAME/nuxt.config.js'nuxt.config.jsのexport default節に
telemetry: false
を追記します。
これにより、最近npm run dev
実行時に「サービス向上のため情報送信に協力するか?」の回答入力を要求されてしまうのを自動的に回避(falseだと拒否)します。Nuxt.jsサンプルページが起動しているはずなのでアクセスしてみる。
↑ こんなページ、見れましたでしょうか?
見れたら成功です。本リポジトリ内の
app/
(make initすれば生成されます)とdockerコンテナ内の/work/app
が同期(ボリュームマウント)しているので、例えばapp/$PROJECT_NAME/pages/index.vue
を編集すれば、即座に↑のサンプルページに反映されます。Dockerコンテナを停止する
make stopDockerコンテナを起動する
make upDockerコンテナを再ビルドする
make remake※ Nuxt.jsプロジェクトの再作成はしません。Dockerコンテナとしての再ビルドです。
本一式を完全廃棄する
make destroy※ このコマンドだけではapp/や本一式の内容物をいきなり削除はしないのでご安心ください。
そのあと、ご自身の手で本一式のディレクトリを削除してください。
あとがき
js界隈は変化が速過ぎて、WEB文献そのままでは全然動かず苦労します。
これを流用して少しでもショートカットして、みなさんのコーディング時間確保などに役立てれば幸いです。また、nginxで動かすproduction版など改善の余地がまだまだあるので、時間あるときにまた更新していきます。
- 投稿日:2020-07-10T22:47:11+09:00
v-radioのチェックでinputを変える
ラジオを使うことがあまりなかったため改めて基礎的ないい勉強になった。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue.js</title> </head> <body> <div id="app"> <fieldset> <legend>支払方法</legend> クレジットカード: <input type="radio" name="pay" value="credit" v-model="pay"> 銀行振込: <input type="radio" name="pay" value="bank" v-model="pay"> <hr> <!-- keyがない場合、radioを変えても、入力したフィールド内は変更されない --> <div v-if="pay==='credit'"> カード番号: <input type="text" key="credit"> </div> <div v-else-if="pay==='bank'"> 口座番号: <input type="text" key="bank"> </div> </fieldset> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script> </body> </html>new Vue ({ el: '#app', data: { pay: 'credit' }, });
- 投稿日:2020-07-10T22:47:11+09:00
vue.js radioのチェックでinput(text)の表示を変える
ラジオを使うことがあまりなかったため改めて基礎的ないい勉強になった。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue.js</title> </head> <body> <div id="app"> <fieldset> <legend>支払方法</legend> クレジットカード: <input type="radio" name="pay" value="credit" v-model="pay"> 銀行振込: <input type="radio" name="pay" value="bank" v-model="pay"> <hr> <!-- keyがない場合、radioを変えても、入力したフィールド内は変更されない --> <div v-if="pay==='credit'"> カード番号: <input type="text" key="credit"> </div> <div v-else-if="pay==='bank'"> 口座番号: <input type="text" key="bank"> </div> </fieldset> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script> </body> </html>new Vue ({ el: '#app', data: { pay: 'credit' }, });
- 投稿日:2020-07-10T22:11:03+09:00
【Vue.js】各種プロパティについて
はじめに
前日からの続きで、月曜からの新規プロジェクトへアサイン前に、引き続きVue.jsについて勉強を進めていきました。
備忘録として、学んだコードを踏まえて補足等記載していきます。
HTMLファイルにscriptタグを記述して1ファイルで完結するようコードを作成しています。HTMLファイルのフォーマットは前回やったので、こちらをご確認ください。
入力文字の反転
最初はv-onを使って入力した文字を反転する簡単のボタンを設置しました。
html<div id="app"> <p> {{ message }} </p> <p v-text=message></p> <p v-once> {{ message }} </p> <button v-on:click="reverseMessage">メッセージ反転</button> </div>vue.js<script> var app = new Vue({ el: '#app', data: { message: 'いろはにほへと', } }, methods: { reverseMessage: function() { this.message = this.message.split('').reverse().join('') } } }) </script>文字反転イメージ
こんな感じで文字反転を実装する事ができました。
{{ message }}
v-text=message
この2つは、記述方法は違いますが、意味は同じです。
もし記載内容を変更したくない場合、v-onceを使用する事で、反転しないようにすることができています。event関連
ここでは、以下を実装しています。
- クリックしたら数字が上がっていくカウントアップのボタン
- 座標を取得する実装
- URLのリンクを遷移しないように処理を止める
- input内でenterを押したらポップアップ表示
以上を実装しました。
html<div id="app2"> <p>現在{{ number }}回クリックしています</p> <!-- カウントアップの操作 --> <button v-on:click= "countUp(1)">カウントアップ</button> <!-- マウスを載せている間の処理 --> <p v-on:mousemove="changeMousePosition(3, $event)">この文字上でマウスを動かすと座標が動きます <span v-on:mousemove.stop>【ここの要素はマウスを動かしても反応しない】</span></p> <p>X軸:{{ x }},Y軸:{{ y }}</p> <!-- .preventでURLへ遷移しないようにできる --> <a v-on:click.prevent href="https://google.com">このGoogleリンクはpreventで無効</a> <br> <!-- キーアップを使う事でキーボード処理に介入できる --> <p>⬇︎エンターを押したらポップアップ表示</p> <input type="text" v-on:keyup.enter="myAlert"> </div>vue.js<script> var app2 = new Vue({ el: '#app2', data: { number: 0, x:0, y:0 }, methods: { countUp: function(times){ this.number += 1 * times }, changeMousePosition: function(divideNumber,event) { this.x = event.clientX; this.y = event.clientY; }, myAlert() { alert('エンターを押下したら表示されるアラート'); } } }) </script>イメージ
こんな感じで動かす事ができるようになりました。
もっとじっくりと確認しながらどのような動きをするのか把握できるようになれたらいいなと感じてます。
- 投稿日:2020-07-10T22:05:58+09:00
Nuxt.js(Vue.js)でボタンコンポーネントを作る
はじめに
Visual Studio Code で Nuxt.js を使った Docker コンテナ内での開発
作成した環境でボタンコンポーネントを作ってみます。下記リポジトリをクローンすれば開発できる状態になります。
https://github.com/nakazawaken1/nuxt_in_docker.git差分が確認できるように GitHub の差分ページのリンクを載せていきます。
仕様
色、左右マーク、ボタン文字をプロパティで指定できるようにする。
コンポーネントファイルを作成
components/MyButton.vue ファイルを作成する
最低限の内容を入力し保存
components/MyButton.vue<template> <a>ボタン</a> </template>
pages/index.vue に配置してみる
index.vue はプロジェクト作成時に作成されて内容が入っているが、以下に書き換える。
pages/index.vue<template> <div class="container"> <div> <MyButton /> </div> </div> </template> <script> import MyButton from "~/components/MyButton.vue"; export default { components: { MyButton } }; </script> <style> .container { margin: 0 auto; min-height: 100vh; display: flex; justify-content: center; align-items: center; text-align: center; } </style>
- template 内に <MyButton タグを記載します。
- script 内に MyButton を使用するための import と components 登録を記述します。
開発サーバを起動し、ブラウザをみてみると以下のように表示されます。
スタイルを適用する
MyButton.vue に <style> を追加します。
色合いを決める時は以下のサイトが便利です。
https://color.adobe.com/ja/create/color-wheelcomponents/MyButton.vue<template> <a class="MyButton">ボタン</a> </template> <style> .MyButton { background-color: #00a656; border-radius: 1.5em; box-shadow: 0 0.2em 0.5em rgba(0, 0, 0, 0.2); padding: 1em 2em; color: #ffffff; font-weight: bold; text-decoration: none; } </style>ブラウザで確認すると以下のようになっているはずです。
色を指定できるようにする
以下の2つのファイルを書き換えます。
components/MyButton.vue<template> <a class="MyButton" :style="{'background-color': back_color, color: fore_color}">ボタン</a> </template> <script> export default { props: { back_color: { type: String, default: "#00a656" }, fore_color: { type: String, default: "#ffffff" } } }; </script> <style> .MyButton { border-radius: 1.5em; box-shadow: 0 0.2em 0.5em rgba(0, 0, 0, 0.2); padding: 1em 2em; font-weight: bold; text-decoration: none; } </style>
a タグの style 属性の前に : をつけると値にJavaScriptの式がかけます。
style の場合は、ここでオブジェクト式を書くとキーがスタイル名、値がスタイルの値となります。
background-color を back_color、 color を fore_color というカスタム属性で指定できる様にしています。script タグの export default するオブジェクトの中に props: を指定すると、
カスタム属性を作成できます。
back_color, fore_color の型と省略時の既定値を指定しています。style タグからは background-color, color の定義を消しました。
pages/index.vue<template> <div class="container"> <div> <MyButton back_color="#666666"/> </div> </div> </template> <script> import MyButton from "~/components/MyButton.vue"; export default { components: { MyButton } }; </script> <style> .container { margin: 0 auto; min-height: 100vh; display: flex; justify-content: center; align-items: center; text-align: center; } </style>
- MyButton タグに作成したカスタム属性 back_color を指定しています。
- fore_color は指定していないので、既定値が使用されます。
ボタンを並べてみました
矢印の有無指定ができるようにする
以下の2つのファイルを書き換えます。
components/MyButton.vue<template> <a class="MyButton" :style="{'background-color': back_color, color: fore_color}" :class="{left_arrow, right_arrow}" >ボタン</a> </template> <script> export default { props: { back_color: { type: String, default: "#00a656" }, fore_color: { type: String, default: "#ffffff" }, left_arrow: { type: Boolean, default: false }, right_arrow: { type: Boolean, default: false } } }; </script> <style> .MyButton { border-radius: 1.5em; box-shadow: 0 0.2em 0.5em rgba(0, 0, 0, 0.2); padding: 1em 2em; font-weight: bold; text-decoration: none; } .MyButton.left_arrow { padding-left: 0; } .MyButton.left_arrow::before { content: "〈"; padding-right: 1em; } .MyButton.right_arrow { padding-right: 0; } .MyButton.right_arrow::after { padding-left: 1em; content: "〉"; } </style>
- class 属性もオブジェクト式を指定すると、キーがクラス名、値がtrueの時のみそのクラス名がつくという書き方ができます。新しいJavaScriptの文法でキーと同名の変数がある場合はキーを省略して書けます。
- left_arrow, right_arrow という 真偽値型の属性を追加しています。
- left_arrow が true の場合は .left_arrow クラスがつくので、CSSで矢印の文字を表示するよう指定しています。
- right_arrowも同様です。
pages/index.vue<template> <div class="container"> <div> <MyButton /> <MyButton back_color="#666666" /> <MyButton back_color="#330000" fore_color="#ffeeee" /> <MyButton left_arrow /> <MyButton right_arrow /> <MyButton left_arrow right_arrow /> </div> </div> </template> <script> import MyButton from "~/components/MyButton.vue"; export default { components: { MyButton } }; </script> <style> .container { margin: 0 auto; min-height: 100vh; display: flex; justify-content: center; align-items: center; text-align: center; } </style>
- left_arrow のみをつけたボタン
- right_arrow のみをつけたボタン
- left_arrow, right_arrow 両方つけたボタン
を追加しました。
ブラウザで確認すると以下の様に表示されます。
ボタン文字を変更できるようにする
カスタム属性を追加してもできますが、今回は slot というものを使用してみます。
以下の2つのファイルを書き換えます。
components/MyButton.vue<template> <a class="MyButton" :style="{'background-color': back_color, color: fore_color}" :class="{left_arrow, right_arrow}" ><slot>ボタン</slot></a> </template> <script> export default { props: { back_color: { type: String, default: "#00a656" }, fore_color: { type: String, default: "#ffffff" }, left_arrow: { type: Boolean, default: false }, right_arrow: { type: Boolean, default: false } } }; </script> <style> .MyButton { border-radius: 1.5em; box-shadow: 0 0.2em 0.5em rgba(0, 0, 0, 0.2); padding: 1em 2em; font-weight: bold; text-decoration: none; } .MyButton.left_arrow { padding-left: 0; } .MyButton.left_arrow::before { content: "〈"; padding-right: 1em; } .MyButton.right_arrow { padding-right: 0; } .MyButton.right_arrow::after { padding-left: 1em; content: "〉"; } </style>
- <slot>タグを追加しました。タグ内には省略時の既定値を書きます。
pages/index.vue<template> <div class="container"> <div> <MyButton /> <MyButton back_color="#666666" /> <MyButton back_color="#330000" fore_color="#ffeeee" /> <MyButton left_arrow /> <MyButton right_arrow /> <MyButton left_arrow right_arrow /> <MyButton>実行</MyButton> </div> </div> </template> <script> import MyButton from "~/components/MyButton.vue"; export default { components: { MyButton } }; </script> <style> .container { margin: 0 auto; min-height: 100vh; display: flex; justify-content: center; align-items: center; text-align: center; } </style>
- MyButton タグ内に書いた内容がボタンの文字として表示されます。
ブラウザで確認すると以下の様に表示されます。
- 投稿日:2020-07-10T19:56:33+09:00
axiosを利用してVue.jsからサーバーサイドにFormDataを送る方法
vuejsからサーバーサイドへFormDataを送る方法を備忘録として載せます.
方法
axiosはデフォルトではjson形式としてリクエストを送信する.
そのためFormDataとしてリクエストを送るためには, 以下のように FormData オブジェクトを作成, インスタンス化した後, append() メソッドで送りたい値を付与する.const params = new FormData() params.append( key, value );具体例
v-model='mailAddress' v-model='password'import axios from 'axios' const params = new FormData(); params.append('mailAdress', this.mailAddress); params.append('password', this.password); axios.post( ' URL ', params, { headers: {'Content-Type':'application/json'} } //Content-Typeを記述 ) .then(response => { ... });このようにすることでサーバーサイドにFormDataとして送ることができる.
参考文献
- 投稿日:2020-07-10T19:30:51+09:00
【Vue.js】コンポーネントで props を用いてデータを渡す方法
はじめに
Vue.js を学習していてコンポーネントの props でのデータのやりとりに少しつまづいたので書きます。
この記事で書くこと
Vue.js のコンポーネント props を使って 親 → 子
親Vueインスタンスから子コンポーネントにデータを渡す2つの方法
- 静的なデータの渡し方
- 動的なデータの渡し方
1.コンポーネントに静的なデータを渡す
コンポーネントにデータを渡すには、props というオプションを使う。関数を定義するときの引数(仮引数)に似ている。
実際のデータはコンポーネントに属性として渡す。これは関数で言う所の引数(実引数)を渡して関数を呼び出すことに相当する。main.js// 子コンポーネントを定義 const nameComponent = { props: ['name'], // テンプレート内で props name に渡されたデータを利用 template: ` <div>{{ name }}</div> `, }; // 親コンポーネントを定義 new Vue({ el: '#app', // コンポーネントの登録 components: { // '登録名(HTMLで呼び出す名前)': 登録するコンポーネント名 'name-component': nameComponent, }, });ここでは props を ['値'] という配列の形で定義したが、オブジェクトの形で定義して、値を検証するためのルール(バリデーション)を定義することもできる。
詳しくはリファレンスを参照。
プロパティ - Vue.jsテンプレート内での記述
index.html<div id="app"> <!-- Vueインスタンスに登録したコンポーネントの呼び出し --> <name-component name="マツダ"></-component> </div>このHTMLタグ要素内の name="マツダ" の部分で という値をコンポーネントの props にセットしている。
ブラウザでは
マツダ
と渡したデータが表示される
2.コンポーネントに動的なデータを渡す
main.jsconst likeComponent = { props: ['firstNumber'], // propsの値を直接変更するのではなく、propsにはあくまで初期値を設定し、 // 値を変更する際はdataを経由して変更する data() { return { count: this.firstNumber }; }, // methods で data の値 count の値に 数値を1ずつ足していく関数を定義 methods: { countUp() { this.count += 1; }, }, // テンプレート内は必ずルートを一つに限定する // 「@」は「v-on」の省略形 ボタンをクリックで methods で定義した関数を呼ぶ template: ` <div> <button @click="countUp"> いいね!! </button> <div>{{ count }}</div> </div> `, }; new Vue({ el: '#app', components: { // コンポーネントの登録 // '登録名(HTMLで呼び出す名前)': 登録するコンポーネント名 'like-component': likeComponent, }, });propsの値を直接変更するのではなく、props firstNumberには初期値としてセットする。
その上で、ボタンをクリックするとpropsではなくdataの値を変更するようにする。以下の記述は悪い例↓↓
main.js// 悪い例 main.js コンポーネントのみ抜粋 // このように直接 props のデータを変更しようとするとエラーがでる。 const likeComponent = { props: ['firstNumber'], methods: { countUp() { this.firstNumber += 1; }, }, template: ` <div> <button @click="countUp"> いいね!! </button> <div>{{ firstNumber }}</div> </div> `, };記述方法の注意点ですが、
コンポーネントの props:likeComponent とキャメルケースで記述
テンプレートの属性名(コンポーネントを登録するとき):like-Component とケバブケースで記述index.html<div id="app"> <!-- v-bindディレクティブで関連付け(「:」は「v-bind」の省略形) --> <like-component :first-number="10"></like-component> </div>:first-number="10"でpropsに数値として値を渡すことができる。
表示はこのようになり、「いいね!!」ボタンを押すと10に数字が1ずつ加算されていく。
最後に
記事をお読みいただきありがとうございます!!
Vue.js も JavaScript も楽しいですが難しい部分も多々!誤り等々ありましたら、ご指摘等いただければ幸いです!
- 投稿日:2020-07-10T17:08:54+09:00
【Nuxt.js】Nuxt文法編:@submit
? この記事はWP専用です
https://wp.me/pc9NHC-p9前置き
今回はイベントハンドラ の一種、
@submitについて?基本的な記法や
イベントの種類、
イベント修飾子などは
こちらで既に解説済みです???
https://wp.me/pc9NHC-ht@submitの使用例を
主に解説していきます?@submit
イベントの種類
MDN
が
submitイベントは
送信された時に発生します?
formタグ自身につくもので、
form内のinputやbuttonでは発生しません?
consoleでエベントの種類を
確認してみましょう✅ ?JavaScriptイベントハンドラ
--| submitイベント/
----| @submitSubmitEventの中の
typeがsumit(@submit)とありますね?コード
.preventについては後述します。
index.vue<template> <div class="page"> <form @submit.prevent="submit"> <input type="text" placeholder="テキストを入力" > <button type="submit">送信</button> </form> </div> </template> <script> export default { methods: { submit () { console.log(event) }, }, } </script>使用例
こちらの記事が分かりやすいかと思います?
Step3: ログイン機能の実装
https://wp.me/pc9NHC-ikfirebaseAuthを使用して、
emailとpasswordを
submitしています??コード
index.vue<template> <div class="page"> <form class="form" @submit.prevent="login" > <label class="label"> <span class="label"> email </span> <input class="input" type="text" v-model="email" > </label> <label class="label"> <span class="label"> password </span> <input class="input" type="password" v-model="password" > </label> <button class="button" type="submit" > Login </button> </form> </div> </template> <script> import firebase from '~/plugins/firebase' export default { data() { return { email: '', password: '' } }, methods : { login() { firebase.auth().signInWithEmailAndPassword(this.email, this.password) .then(user => { console.log('成功!')// eslint-disable-line }).catch((error) => { alert(error) }); }, } } </script>.prevent修飾子
? 続きはWPでご覧ください?
https://wp.me/pc9NHC-p9
- 投稿日:2020-07-10T15:40:54+09:00
VuePressを使って爆速でブログを作成する、ついでにfirebaseにデプロイする
はじめに
エンジニアというのは暇があればブログを作り、作って満足して放置し削除、しかしまた暇になればブログを作りという無限ループを行う罪深き存在、、、
今回はブログを作りたいが時間をかけたくない、多機能さは不要でサクッと作成したい、という方に向けたVuePressでブログを作る記事です。前提条件
- node.js 8.6以降
- yarn
- vuepressはnpmでも導入できますが、方法によってはyarnでの導入が推奨されています。自分はとりあえずyarnで導入しました
- firebaseでアカウント作成、CLIをインストールしている
ブログを作るよ
$ yarn create vuepress? Select the boilerplate type blog //テンプレートスタイルの選択、ここではblog ? What's the name of your project? // プロジェクトネームを記入します ? What's the description of your project? // プロジェクトの説明を記入します What's your email? // メールアドレスを記入 ? What's your name? // ? What's the repo of your project.
これでブログができました。爆速でしたね。本当にできているの?確認してみましょう
$ yarn $ yarn run dev
http://localhost:8081/
にアクセスしましょうできていますね。基本的な機能として
タグ
やブログ内検索
がついてます。作成されたディレクトリは以下のようになっていると思います。
├── README.md ├── blog | └── _posts // この中に記事を作成、保存します | └── .vuepress // vueファイルやらページに必要なデータが入っています ├── firebase.json ├── node_modules ├── package.json ├── public └── yarn.lockあまりにも爆速でできてしまったので時間が余って仕方のない方のために、作成したブログをFirebaseでデプロイして、爆速でネットの海に公開する方法を書きます。
Firebaseにデプロイする
vueファイルはそのまま使うのではなく、一度
html
に変換してデプロイします。$ yarn build
blog/.vuepress
ディレクトリにdist
ディレクトリが作成されます。
中を見るとビルドされたファイル等が格納されています。このdistをfirebaseにデプロイします。$ firebase init ? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices. (*) Hosting: Configure and deploy Firebase Hosting sites ? Please select an option: (*) Use an existing project ? Select a default Firebase project for this directory // 使いたいプロジェクトを選択 ? What do you want to use as your public directory? public // blog/.vuepress/distと入力します、デプロイしたいディレクトリを指定します ? Configure as a single-page app (rewrite all urls to /index.html)? Yes // デフォルトはno SPAなのでYesこれでfirebase側の設定はOKです。本当に設定できているか確認したい場合は
$ firebase serveこちらのコマンドを実行するとローカルURLが表示されるので、そこを確認して、ブログが表示されていればOKです。
では最後にブログをデプロイします。$ firebase deployHosting URLに出力されているURLに接続し、ブログが表示されていたら完了です。
終わりに
これで皆さんも気軽にブログを作っては破壊を繰り返せますね!ちなみに自分はVuePress + Firebaseで作ったブログを放置してすでに1週間です。
最後までご覧いただきありがとうございました。
- 投稿日:2020-07-10T12:46:16+09:00
Vue の props で、function を使って default の値を決める
小技紹介
props のバリデーション要素に function が使えることがわかって嬉しかった話
どういうこと?
例えば、日付を表示するだけのコンポーネントがあったとする
./src/Day.vue<template> <p class="day-font"> {{ date }} </template> <script> export default { data() { return: { date: 0 } }, created() { this.date = new Date().getDate() } } </script>./src/app.vue<template> <day /> </template> <script> import day import "./Day" export default { components: { Day } } </script>こんな感じになる。
もう少しそれっぽく書くと
./src/Day.vue<template> <p> {{ day }} </template> <script> export default { props: { date: { type: Number, required: true } } } </script>./src/app.vue<template> <day :date="date" /> </template> <script> import day import "./Day" export default { components: { Day }, data() { return: { date: 0 } }, created() { this.date = new Date().getDate() } } </script>こんな感じになる。
props を渡さないといけない状態になる。
つまり、当日日付を親側で与えないといけないのである。日付を司っているのは、Day コンポーネントで、
App コンポーネントは、日付を司っていない。App が他に日付操作を行うのであれば、問題はないと思うが、単に Day コンポーネントを呼んで、
当日日付を表示したいだけ、であれば、 App コンポーネントで Date オブジェクトの操作を行うのは避けたい。function を使って解決
./src/Day.vue<template> <p> {{ day }} </template> <script> export default { props: { date: { type: Number, required: true default: function() { return new Date().getDate() } } } } </script>./src/app.vue<template> <day /> </template> <script> import day import "./Day" export default { components: { Day } } </script>ずいぶんとスマートになったのではないだろうか。
「date は必須ではない、ただ何も定義しなかった場合、当日日付を返却する。」
という非常に使い勝手の良いコンポーネントに進化した。
- 投稿日:2020-07-10T12:01:21+09:00
titap editor タイトルだけ取得
タイトルだけ取得したい。
そんな場合は json を取得して分解する。let title = this.editor.getJSON().content[0].content[0].text;
- 投稿日:2020-07-10T02:38:42+09:00
【Vue.js】スライダーのぽちぽちのカラーを変えたい[carouselのpagination]
carouselのpaginationの色を変えたくて 小一時間/ひとぽち くらいは使ったかなと思うのでまとめます。
どこ
この例でいうところの
真ん中の
下のここ! です。
簡単に変えられそう? と思ったら、この情報へのたどり着き方がわからなくて「もうこのぽちぽちのこと考えるのやめようかな」って思うところだったり、そうでもなかったりしました。うまくいった例
pagination-color="#ffffff" pagination-active-color="red"
pagination-color
はノンアクティブのぽちぽち。
pagination-active-color
はアクティブになっているスライドのぽち。
なお、色の書き方はお好みです。下記のような形でスライド1枚1枚が作成されていて、
carousel
の後にカスタマイズしたい情報を詰め込めるようになっていますね。他と同様に、このなかで指定します。<carousel :per-page="1" :navigation-enabled="true" navigation-prev-label="〈" navigation-next-label="〉" pagination-color="#ffffff" pagination-active-color="red"> <slide> <div class="slide1">1枚目!</div> </slide> <slide> <div class="slide2">2枚目!</div> </slide> <slide> <div class="slide3">3枚目!</div> </slide> </carousel>以上でちゃんと色がつく、はずです。
うまくいかなかった例
ちなみに、私は最初以下のように書いていて、
paginationColor="#ffffff" paginationActiveColor="red"consoleに教えられました。
Prop "paginationcolor" is passed to component <Anonymous>, but the declared prop name is "paginationColor". Note that HTML attributes are case-insensitive and camelCased props need to use their kebab-case equivalents when using in-DOM templates. You should probably use "pagination-color" instead of "paginationColor".参考
ぽちぽち以外にもできることがはたくさんありますが、なんとしてもぽちぽちを自分色に染めたかったので記事にしました。以下のような感じで、他のカスタマイズもGitHubにまとまっています。
Property Type Default Description paginationActiveColor String #000000 The fill color of the active pagination dot. Any valid CSS color is accepted. paginationColor String #efefef The fill color of pagination dots. Any valid CSS color is accepted. 【参考】SSENSE/vue-carousel - GitHub
さいごに
この記事が参考になることがあればうれしいです。
- 投稿日:2020-07-10T01:14:01+09:00
atomic designでコンポーネント指向な開発を進めよう
atomic designとは?
アトミックデザインは、ビューコンポーネントライブラリの粒度の定義で、アメリカのWebデザイナーBrad Frost氏が考案・提唱しました。
http://atomicdesign.bradfrost.com/
VueやReactでコンポーネント設計でよく使われる手法です。
この図はコンポーネントの粒度を表しています。
上記のように5分割してコンポーネントを構成していきます。Atoms
ラベル、インプット、ボタンなどこれ以上分解できない最小の単位のものがAtomsになります。
Molecules
Atomsを組み合わせたものがMoleculesです。
上の図だとひとつ前のAtomsの図で3つのAtomsを全て組み合わせて検索フォームのMoleculesを作成しています。Organisms
Moleculesを組み合わせたものがOrganismsです。図はロゴとメニューと先ほどの検索フォームを合わせたヘッダーになっています。
Templates
Moleculesを組み合わせて、ページの構造を作成したものがTemplatesです。ワイヤーフレームの役割で、ページ内容についてはまだこの階層では仮のものとなります。
Pages
配置されたUIの外観を決めるテンプレートの文章や画像などといった内容を持つのがPagesとなります。
一連のコンポーネントの粒度を理解した上で、instagramで表したこの図を見るのが一番理解が深まりそうです。(わかりやすい!!)
出典: https://atomicdesign.bradfrost.com/chapter-2/
ディレクトリ構造の一例(Vue.js)
components/ ├── atoms │ ├── Link │ │ ├── NormalLink.vue │ │ └── BoldLink.vue │ ├── Button │ │ ├── NormalButton.vue │ │ └── BoldButton.js │ └── Table │ ├── HeaderCell.vue │ └── ContentCell.vue ├── molecules │ ├── Article │ │ ├── MainArticle.vue │ │ └── SubArticle.vue │ └── Table │ ├── TableHeader.vue │ └── TableContent.vue ├── organisms │ ├── Header │ │ ├── MainHeader.vue │ │ └── SubHeader.vue │ └── Table │ ├── MainTable.vue │ └── SubTable.vue └── templates └── Main ├── DashboadTemplate.vue └── MainTemplate.vueこんな感じでatomic designの名称のファイルの配下にさらにLinkやButtonなどのディレクトリを作ってあげれば整理できて見易いかな思います。
atomsなどの直下にどんどん突っ込んでいくパターンでもありかとは思います。悩むポイント
どの粒度で分類する?
これがmoleculesなのか、organismsなのかと迷う場面は出てくるかもしれませんが基本的には上記にも書いた通り、atomsの組み合わせはmolecules、moleculesの組み合わせはorganismっていうシンプルな思考でざっくりやってくのが良いかと思います。
organismsとorganismsを合わせたコンポーネントはどうなる?
パーツとしてのコンポーネントが3階層なので、このようなことが起きるのはどうしてもしょうがないです。
organisms内ではネストしてしまって良いルールで運用するのが1番簡単そうかなと思います。データの変更はどこで行うの?
基本的にデータはPagesに持たせて、変更はきちんとPagesで行うのが良いです。
理由としてはdataを持つ場所を決めず、複数箇所に持たせてしまうといちいちどこで階層でデータを操作しているのか探さなければいけなくなるのでデータの流れが複雑化しスパゲティ化します...
書くのは楽でも後のことを考えて、きちんとクリックイベントなどはemitさせて親にイベントを渡して変更するのが良いです。どんなコンポーネントがあったかわからなくならない?
StoryBookの導入してカタログ化すると良さそうです。
デザイナーとの認識合わせもこれでスムーズに行えそうです。
参考: https://qiita.com/masaakikunsan/items/dad8d84807918f3a43cb実は、SmartHRさんはStoryBookとコンポーネントのソースコード公開してたりします。(Reactですが)
https://smarthr.invisionapp.com/share/ADUDJ8BW74C#/screens/403704083導入メリット
デザインが崩れにくくなる
コンポーネントを使いまわしながらデザインをしていくようになるため、デザインが分からない人でもコンポーネントを当て込むだけで画面を構成することができるので、デザインに一貫性が生まれ、崩れにくくなります。
当たり前ですが、パーツごとのCSSの変更箇所も1箇所に集約されるため修正忘れのリスクが大きく減ります。コンポーネントの作成方法を共有認識化できる
指針としてアトミックデザインを導入すれば、コンポーネント作成の粒度を上記に合わせるだけなので、認識を合わせやすくなります。個人開発であればある程度好きにやればよさそうですが、大勢が好き勝手にコンポーネントを作成するとどこに保存するコンポーネントなのか不明瞭になりがちです。
実装量の削減
コンポーネントの再利用が簡単にできるため開発効率が上がります。最初は大量のファイルを作るので少し大変かもしれませんが、その後のコストは大きく削減できるはずです。
参考文献
https://qiita.com/japboy/items/9576301456b2bffb1fac
https://qiita.com/kei-tamiya/items/cd34c120a860f20622dd
https://tech.connehito.com/entry/learn-and-failure-atomic-design時間がある方は、この動画が死ぬ程わかりやすいのでおすすめです!!
【プログラミング】チームリーディング フロントエンドコンポーネントの指針 音ズレ修正Ver.
https://www.youtube.com/watch?v=oYdSLEixVFo&t=385s