Google Spreadsheet でデータを用意する。実際には複数列あるデータの中から QUERY 関数で必要なデータのみ抽出したシートを用意し、そのシートのデータから JSON を出力する。
Sheet ID: XXXXXXXX
Sheet Name: _sheet_name_
タグ: JavaScript
Vue.js の render で描画
JSON オブジェクトの中身を v-for で描画する際、シンプルな {{マスタッシュ}} ではなく、render 関数で複雑なプロパティや入れ子を実現する。
参考：描画関数とJSX
CodeSandbox で static な Sandbox を作ったけど Sass のコンパイルはしたい時
表題の通り。ローカルでサーバーを立てるどころか、Visual Studio Code を起動するのも煩わしい。全て CodeSandbox でやってしまおう、もちろん静的な HTML も。…と思って static な template の Sandbox を作ったものの、完全 static なので Sass のコンパイルもできない。せめて scss から css へのトランスパイルくらいはして欲しい。そんな場合のメモ。
Continue reading “CodeSandbox で static な Sandbox を作ったけど Sass のコンパイルはしたい時”JavaScript で JSON ファイルの読み書き
とりあえず「ボタンをクリックしたら」という挙動で。
Continue reading “JavaScript で JSON ファイルの読み書き”ウィンドウの横幅を監視するには window.matchMedia を使おう
JavaScript でウィンドウがリサイズされた際に横幅に応じて処理を実行する場合、window.onresize よりも window.matchMedia の方が設定されたブレイクポイントをまたいだ時だけ発火するのでエコ。
Continue reading “ウィンドウの横幅を監視するには window.matchMedia を使おう”JavaScript でページの title と description を設定する
filter() で配列から条件に合った要素を取り出す
配列というか JSON オブジェクトの検索に。
Continue reading “filter() で配列から条件に合った要素を取り出す”Vue.js + axios で get した時の this
axios 内で this で自分を参照できないので self = this とかしていたけど、
Continue reading “Vue.js + axios で get した時の this”Vue.js でクリックした DOM の内容をクリップボードにコピーする
Vue.component('TestComponent', {
template: [
'<div @click="copyContent">コピーする内容</div>'
],
methods: {
copyContent(e) {
navigator.clipboard.writeText(e.currentTarget.innerHTML);
}
}
})clipboard.writeText() は Internet Expolorer 非対応
Vue.js のコンポーネント内で定義した filters で数値の3桁区切り
Vue.component('TestComponent', {
template:[
'<div>合計は {{ total | digit }} 円です。</div>'
],
data: function() {
return {
total: "1234567"
}
},
filters: {
digit: function(a) {
//与えられたデータが文字列かもしれないので Number() で数値に変換
return Number(a).toLocaleString();
}
}
}<div>合計は 1,234,567 円です。</div>JavaScript のヒアドキュメント内で変数を使う
テンプレートリテラルというやつ。${var} で変数を展開。Internet Explorer 11 非対応。
const username = 'ヨースケ';
const message = `こんにちは！
${username} さん！`;
console.log(message);> こんにちは！
ヨースケ さん！