牌語備忘録 -pygo

あくまでもメモです。なるべくオフィシャルの情報を参照してください。

牌語備忘録 -pygo

Javascript

(再)ChatGPT に ReactJS + react-router + redux を利用した検索機能がある一覧表示のサンプルコードを教えてもらったのでメモ

前置き ChatGPT に質問 最終的な reactjs + react-router v6 + redux を利用した App.js のコード ブラウザで表示させる 前置き 前回 と少し変えて質問してみた 同じ質問でも違うこと返答になるけど、質問の仕方で ChatoGPT の返答の質が上がりそうな気もす…

ChatGPT に ReactJS + react-router + redux を利用した検索機能がある一覧表示のサンプルコードを教えてもらったのでメモ

追記2023-03-14: 別記事でスクリーンショット付きでやり直してみた (コードも若干違くなった) 問い「reactjs と react-router v6 と redux を利用した検索機能がある一覧表示のサンプルコードを教えてください」 ChatGPTの返答 提示されたコードが途中で切…

Javascript でうる覚えな 演算子たち ??=, ??, ?. のメモ

Null 合体代入 (??=) Null 合体演算子 (??) オプショナルチェーン (?.) Null 合体代入 (??=) const a = { duration: 50 }; a.duration ??= 10; console.log(a.duration); // expected output: 50 a.speed ??= 25; console.log(a.speed); // expected output:…

Javascript の find で配列に入れたオブジェクトの中の id を指定して取得する場合のメモ

find の存在を忘れるのでメモ const family = [ {id: 1, name: 'Loid'}, {id: 2, name: 'Anya'}, {id: 3, name: 'Yor'}, ] const person = family.find(f => f.id === 2); console.info(person.name); //-> Anya

Javascript の配列で重複してる値のみ取り出してみるメモ

const getDupeList = (arr) => { return Array.from(new Set(arr.filter((v, i, array) => { return !(array.indexOf(v) === i); }))); } console.log(getDupeList([1, 2, 3, 1, 2, 4, 5, 1])); //-> [ 1, 2 ]

ローカルでCORSエラーの確認するためgetたたくだけのindex.htmlのメモ

クロスオリジン要求をブロックしました: 同一生成元ポリシーにより~ みたいなエラーが出るか確認するためのメモ <html lang="ja"> <head> <meta charset="utf-8"> <title>example</title> </head> <body> <h1>hoge!!!1</h1> <script> var myRequest = new Request("http://localhost:8000/api/hoge"); fetch(myRequest).then(function(response) { retu</body></html>…

Javascript で url のパラメータを取得するメモ

const url = new URL('http://example.com/?foo=bar'); const params = new URLSearchParams(url.search); params.get('foo') # -> "bar" 参考メモ https://developer.mozilla.org/en/docs/Web/API/URLSearchParams

Vue.js/Nuxt.js でインプット入力してエンターキー押下でサブミットして欲しい場合のメモ

要望 ボタン配置せずにinputに入力してエンターキーでサブミットして欲しい 解決策 @keyup.enter="FUNC" でいけるっぽい <v-form> v-model="searchText" @keyup.enter="clickSearch" /> </v-form> 参考 https://stackoverflow.com/questions/42951967/handling-enter-key-in-v…

Nuxt.js の nuxt-link でオブジェクトの状態によってリンクをクリックできないようにするメモ

<template> <div> <nuxt-link :event="obj.isPublished ? 'click':''" :to="`/objects/${obj.id)}`"> <span>{{ obj.name }}</span> </nuxt-link> </div> </template> obj.isPublished が true だったらクリックできるけど false だったらできないようになる

Nuxt.js で構造化データの json-ld のメモ

参考リンク https://developers.google.com/search/docs/data-types/review-snippet?hl=ja https://search.google.com/structured-data/testing-tool/ https://qiita.com/ryota-yamamoto/items/2c43c606d9a96fc4de5f https://qiita.com/dorarep/items/07d4b2…

Javascript で複数の配列を繋げるメモ

配列を連結する const a = [1, 2, 3] const b = [4, 5, 6] const c = [7, 8, 9] const result = [] [a, b, c].forEach(arr => result.push(...arr)) console.info(result) //-> [1, 2, 3, 4, 5, 6, 7, 8, 9]

Python と Javascript の replace() の違いメモ

python javascript 最初の一つしか置換されない すべて置換するには正規表現を使う python In [1]: 'hoge,fuga,moge,'.replace(',', '') Out[1]: 'hogefugamoge' javascript 最初の一つしか置換されない 'hoge,fuga,moge,'.replace(',', '') //-> "hogefuga,…

Javascript の配列をランダムにシャッフルしてみるメモ

const shuffle = (arr) => { const list = [ ...arr ] list.sort(() => { return 0.5 - Math.random() }) return list } const a = [1, 2, 3, 4, 5, 6] console.info(shuffle(a)) console.info(a) 実行結果(例) [ 4, 1, 5, 6, 3, 2 ] [ 1, 2, 3, 4, 5, 6 ]…

Vuetify の Tabs のメモ

(Vuetify v2.0.0-alpha.3) <template> <v-container> <v-tabs v-model="activeTab" class="mb-2" fixed-tabs > <v-tab v-for="(tabName, index) in tabNames" :key="index" :href="`#${tabName.key}`" > {{ tabName.label }} </v-tab> </v-tabs> <v-divider class="my-3" /> <v-tabs-items v-model="activeTab"> </v-tabs-items></v-divider></v-container></template>

Vuetify ドキュメントでよく参照しそうなリンクのメモ

Grid Helper classes Styles & themes UI Components その他 開発版の v.2.0.0 alpha.x のドキュメントを参照してるので next.vuetifyjs.com の方(通常のドキュメントは こちら ) Grid https://next.vuetifyjs.com/ja-JP/framework/grid Helper classes ht…

Javascript の値渡しと参照渡しのメモ

let a = [1,2,3] let b = a b[0] = 0 console.info(b) //-> [0, 2, 3] console.info(a) // コピー元も変わる //-> [0, 2, 3] let c = a.concat() // 配列をコピー c[0] = 100 console.info(c) //-> [100, 2, 3] console.info(a) //-> [0, 2, 3] 参考 Array.p…

ナウい Javascript のオブジェクトの複製のやり方メモ

const obj = {hoge: 'HOGE'} const obj1 = Object.assign({}, obj) const obj2 = {...obj} obj.fuga = 'FUGA' console.info(obj) console.info(obj1) console.info(obj2) //-> {hoge: "HOGE", fuga: "FUGA"} //-> {hoge: "HOGE"} //-> {hoge: "HOGE"} {...ob…

Javascript で配列に arr.push() で配列を追加するメモ

let a = [1,2,3] console.info(a) //-> Array(3) [ 1, 2, 3 ] let b = [4,5,6] a.push(...b) console.info(a) //-> Array(6) [ 1, 2, 3, 4, 5, 6 ] ...arr が何だったか忘れがちなのでメモ

Nuxt.js で /hoge?q=fuga みたいなリンクのurlのクエリを取得するメモ

遷移してきたときは created か mountedで 同じ画面でリンク踏んでqueryを変更する場合は beforeRouteUpdate で export default { data () { return { query: '', } }, created() { this.setQuery() }, beforeRouteUpdate(to, from, next) { next(); this.se…

Javascript でオブジェクトを Object.assign とかでコピーして処理しないとヤバそうなのでメモ

処理 const DATA = {id:1, name:'hoge'} const update = (data) => { delete data.id data.name = 'fuga' return data } const main = (data) => { const result = update(data) console.info('result', result) } オブジェクトをコピーしないで実行 元のオ…

近頃の Javascript の関数の書き方メモ

関数定義 追加と上書き的なやつ 関数定義 アロー関数だと this が空 const funcs = { foo: function({a, b}) { console.info(`${a} ${b}!!!1`) console.dir(this) }, bar({a, b}) { console.info(`${a} ${b}!!!2`) console.dir(this) }, baz: ({a, b}) => { …

Nuxt.js で vue-input-tag を使ってみるメモ

Nuxt.js でやってみる plugins 新規作成 src/plugins/vue-input-tag.js import Vue from 'vue' import VueInputTag from 'vue-input-tag' Vue.component('vue-input-tag', VueInputTag) nuxt.config.js に設定を追加 plugins: [ { src: '@/plugins/vue-input…

Nuxt.js と vee-validate でエラーメッセージは日本語でバリデーションするメモ

前提 npm install する場合 plugins/vee-validate.js nuxt.config.js pages/hoge.vue CDN 使う場合(追記20181031) plugins/vee-validate.js nuxt.config.js 参考リンク 前提 nuxt.js でプロジェクト作成済み前提 (nuxt2.0.0) npm install する場合 $ npm i…

css helper 的なやつを Javascript で簡単に生成してみるメモ

Javascript const lineList = [ '.w100 {width: 100%;}', '.text-left {text-align: left;}', '.text-center {text-align: center;}', '.text-right {text-align: right;}', '.text-justify {text-align: justify;}', ]; lineList.forEach(line => { console…

Javascript で非同期処理を async/await を使わない場合・使った場合のメモ

async/await を使わない場合 async/await を使った場合 (あくまでもこんな感じという擬似コードなので動かないです) async/await を使わない場合 promise.then(() => { console.info('ペ'); asyncFunc1.then(() => { console.info('ン'); }).then(() => { …

Node.js でファイルのパスからファイル名や拡張子を取り出すメモ

(node v8.x) const path = require('path'); const filePath = 'hoge/fuga/moge.png'; console.info(path.basename(filePath)); console.info(path.dirname(filePath)); const ext = path.extname(filePath); console.info(ext); console.info(path.basename…

Javascript で非同期処理の戻り値を実行順で取りたい場合のメモ

処理完了順 実行順 処理完了順 function func() { const data = [1, 4, 3, 2,]; for (let i = 0; i < data.length; i += 1) { new Promise(resolve => { setTimeout(() => { resolve(data[i]); }, 1000 * data[i]); }).then(result => console.info(result))…

Tone.js で相対音感を鍛えるイヤートレーニングできるようにしてみるメモ

元ネタ 実装テーマ ソースコード デモサイト 参考 元ネタ これっぽいことを簡単な実装でやってみる 相対音感を鍛える、究極のイヤートレーニング動画【保存版】 実装テーマ jQuery, React, Vue は使わない。単純なコードで。 動作確認は Chrome for Mac のみ…

Javascript で Python の 『[n for n in range(10)]』 みたいなことをやるメモ

python In [1]: [n for n in range(10)] Out[1]: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] javascript (ES6以降) [...Array(10).keys()] > (10) [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] 参考リンク JavaScript function similar to Python range() - Stack Overflow

Javascript で現在時間の unixtime を取得するメモ

const now = Date.now() console.info(now) //->1534838352015 参考 Date.now() - JavaScript | MDN