学ぼうと思ったきっかけ 高校数学でデータの分析の課題で、表にあるデータを小さいものから順に並び替えて、そこから計算をしていくのだけれど、いちいち並び替えるのは面倒だし、ミスも連発するから、コードかけばいいやと思ったから！ sort関数を使う sort関数とはなんぞや？というと、配列の中の要素を一度文字列にして、文字コード順に並び替える！ それだけ！ だが、sort関数は引数に関数を指定できるので、渡す関数で並び替えのルール（規定）をつくることができるのだ！ index.js const array = [2,1,5,4,77,123]; console.log(array.sort()); //[1,123,2,4,5,77] このようになる！ きちんとした昇順ではない！ そこで、比較関数を引数に渡せばいい！！ 比較関数（引数に渡す関数）とは、ソートするルールを決めるものぐらいの認識でいい！ index.js const array = [2,1,5,4,77,123]; function compare(a,b){ return a - b; } console.log(array.sort(compare)); //[1,2,4,5,77,123] 二つの配列の要素の差で考える ・戻り値が正なら、引数１を引数２の後ろに並び替え ・戻り値が負なら、引数１を引数２の前に並び替え ・戻り値が０ならば並び替えない 今回は昇順を取り上げたが、降順なら引数に渡す値を index.js const array = [2,1,5,4,77,123]; function compare(a,b){ return b - a; //bとaを逆にすると良い } console.log(array.sort(compare)); もっときれいな書き方やまちがいがあったらぜひぜひ教えてください！！

スマホ時に頻出のハンバーガーメニュー クリック時にクラスを追加したり消したりするだけのシンプルな動きで実装。 【ポイント】 ・✖️アイコンなど以外にも背景クリック時にも元の画面に戻れるように実装する script.js jQuery('.drawer-icon').on('click', function (e) { e.preventDefault(); //aタグなどクリック時の動作を初期化、クリックイベント作成時には必ずつける jQuery('.drawer-icon').toggleClass('is-active'); jQuery('.drawer-content').toggleClass('is-active'); jQuery('.drawer-background').toggleClass('is-active'); return false;//古いブラウザへの対処 }); //背景クリック時 jQuery('.drawer-background').on('click', function (e) { e.preventDefault(); jQuery('.drawer-icon').toggleClass('is-active'); jQuery('.drawer-content').toggleClass('is-active'); jQuery('.drawer-background').toggleClass('is-active'); return false; });

jQueryの基本構文 これからよく使うであろう。。。 jQuery $(セレクター).イベント(function() { $(セレクター).命令 });

こんにちは。日本語もプログラミング言語もできるか怪しいちゃむじです。 さて、今回は並べ変えの処理について書いていきたいと思います。 自分のための備忘録としてなので、説明が所々省いてある箇所もあるかもしれないです。 基本的に並び替えは昇順、降順のどちらかで行いますよね？ はい、先生まず質問です。昇順、降順ってなんですか？　（すっとぼけ） 昇順とは コンピューターで、あるデータを並べ替える際、値が小さい順に並べること。文字列の場合、文字コードが小さい順となる。逆の順番に並べることを降順、並べ替えのことをソートという。 https://bit.ly/3blHVYL 降順とは 数を大から小へ数えた順序。逆順。 コンピューターで、あるデータを並べ替える際、値が大きい順に並べること。文字列の場合、文字コードが大きい順となる。逆の順番に並べることを昇順、並べ替えのことをソートという。 https://dictionary.goo.ne.jp/word/%E9%99%8D%E9%A0%86/#jn-73304 ということで昇順、降順の意味がわかりましたね。 たまに僕もわからなくなります。関係ありませんが以上以下、超過未満もたま~にわからなくなります。（白目） はい、突然ですが以下の乱数配列をプログラミングで昇順、降順にそれぞれ並べ変えてください [34, 54, 9, 23, 52, 57, 83, 40, 67, 56, 3, 18, 11, 25, 55, 91, 10, 82, 0, 19, 20, 39, 45, 59, 73, 84, 70, 79, 13, 42, 95, 78, 60, 32, 62, 41, 12, 37, 5, 6, 1, 77, 7, 90, 63, 61, 99, 89, 53, 33, 86, 48, 65, 92, 21, 28, 31, 30, 51, 100, 50, 36, 76, 44, 75, 4, 68, 96, 29, 16, 85, 98, 46, 49, 87, 80, 17, 71, 15, 22, 69, 14, 47, 24, 72, 93, 66, 2, 35, 81, 27,88, 58, 97, 94, 38, 64, 43, 8, 26, 74]; 並び替えるロジックを作ればいいんだな！！！！！となったはいいが、for文やmap使って繰り返しながらif文で条件分岐して、配列の変数作って順番に１から値いれて〜〜ってそんなことはハイパーめんどくさい。。。。 何か楽なものはないか。。。。 あります。 Sort関数 公式サイトから引用 簡単に説明すると 配列の値を並べ替えてくれて、引数の指定方法によって昇順、降順にしてくれる超便利な関数 https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/sort 昇順 引数a-bを指定すると昇順 var numbers = [4, 2, 5, 1, 3]; numbers.sort(function(a, b) { return a - b; }); console.log(`昇順${numbers}`); //出力結果1,2,3,4,5 降順 引数a-bを指定すると降順 numbers.sort(function(a, b) { return b - a; }); console.log(`降順${numbers}`); //出力結果5,4,3,2,1 上記内容を踏まえてさっきのランダム配列を昇順、降順で表示するロジックを組むとこうなる。 const arrayRandom=[34, 54, 9, 23, 52, 57, 83, 40, 67, 56, 3, 18, 11, 25, 55, 91, 10, 82, 0, 19, 20, 39, 45, 59, 73, 84, 70, 79, 13, 42, 95, 78, 60, 32, 62, 41, 12, 37, 5, 6, 1, 77, 7, 90, 63, 61, 99, 89, 53, 33, 86, 48, 65, 92, 21, 28, 31, 30, 51, 100, 50, 36, 76, 44, 75, 4, 68, 96, 29, 16, 85, 98, 46, 49, 87, 80, 17, 71, 15, 22, 69, 14, 47, 24, 72, 93, 66, 2, 35, 81, 27,88, 58, 97, 94, 38, 64, 43, 8, 26, 74]; //昇順 arrayRandom.sort(function(a, b) { return a - b; }); console.log(`昇順順${arrayRandom}`); //出力結果[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100] //降順 arrayRandom.sort(function(a, b) { return b - a; }); console.log(`降順${arrayRandom}`); //出力結果[100,99,98,97,96,95,94,93,92,91,90,89,88,87,86,85,84,83,82,81,80,79,78,77,76,75,74,73,72,71,70,69,68,67,66,65,64,63,62,61,60,59,58,57,56,55,54,53,52,51,50,49,48,47,46,45,44,43,42,41,40,39,38,37,36,35,34,33,32,31,30,29,28,27,26,25,24,23,22,21,20,19,18,17,16,15,14,13,12,11,10,9,8,7,6,5,4,3,2,1,0] まとめ 簡単に並び替えてくれるのは便利だな〜って思いました。 おわり。

data Vue2で定義していたdataプロパティ内の変数はcompositionAPIからはreactive又はrefの中に定義する <script lang="ts"> import { defineComponent } from 'vue' export default defineComponent({ setup() { const state = reactive({ hoge: 'huga' }) return { state } } }) </script> 型定義する場合 <script lang="ts"> import { defineComponent } from 'vue' export default defineComponent({ setup() { const state = reactive<string>({ hoge: 'huga' }) return { state } } }) </script> computed Vue2ではcomputedプロパティ内で記述していたメソッドはCompositionAPIではかなり異なる <template> <div>{{fullName}}</div> </template> <script lang="ts"> import { defineComponent, computed } from 'vue' interface UserName { firstName: string lastName: string } export default defineComponent({ setup() { const state = reactive<UserName>({ firstName: 'hoge', lastName: 'huga' }) const fullName = computed(():string => state.firstName + state.lastName) return { state, fullName } } }) </script> method Vue2ではmethodプロパティ内でメソッド定義していたがCompositionAPIでは異なる <template> <div> <button @click="clickEvent()">Click Me!<button> </div> </template> <script lang="ts"> import { defineComponent } from 'vue' export default defineComponent({ setup() { const clickEvent = ():void => alert('Clickしたよ!') return { clickEvent } } }) </script> 関数型でかけていい感じ！ Vue+TypeScriptの公式

はじめに 仕事で使う事になったので1からVue.jsについて学んだ。 ちゃんと覚えておかないとまずそうな事を備忘録として1つ1つ残しておく。 $emitメソッドの正体　コンポーネント(子→親)の間のデータ受け渡しでやってる事 カスタムイベントを定義・発火させることができるメソッド1。 このメソッドを応用して、コンポーネント間（子→親）のデータの受け渡しを行う事ができる。 動画のソースコードは以下2。 parent-component.vue <template> <div> <LikeHeader></LikeHeader> <h2>{{ number }}</h2> <LikeNumber :total-number="number" @my-click="number = $event"></LikeNumber> </div> </template> <script> import LikeHeader from "./components/LikeHeader.vue"; export default { data() { return { number: 10, }; }, components: { LikeHeader, } }; </script> <style scoped> div { border: 1px solid blue; } </style> child-component.vue <template> <div> <p>いいね({{ halfNumber }})</p> <button @click="increment">+1</button> </div> </template> <script> export default { props: ["totalNumber"], computed: { halfNumber() { return this.totalNumber / 2; }, }, methods: { increment() { this.$emit("my-click", this.totalNumber + 1); }, }, }; </script> <style scoped> div { border: 1px solid red; } </style> ここでは、child-component.vue(子)からparent-component.vue(親)へデータの受け渡しを行っている。 上記の考え方としては、 child-component.vueの方で$emitメソッドでカスタムイベントmy-clickを定義し発火させる その際に$emitメソッドでは第二引数を取る事ができるので、第二引数に値this.totalNumber + 1を渡すようにする parent-component.vueでは、v-onディレクティブでカスタムイベントmy-clickが発火した際に何らかの処理を行うように設定する事を考える v-onディレクティブの@hoge=""の""はJavaScriptを書く事ができるのでそこでparent-component.vueのdataプロパティの値を$eventの値に変更するようにする というもの。$emitメソッドでカスタムイベントを発火させた場合、$eventには$emitメソッドの第二引数3の値が渡る仕様になっているので、上記のような考え方で実装する事で、$emitメソッドを応用して「子→親のコンポーネント間データ渡し」が実現できる。 ※補足 $emitメソッドでは第二引数は任意の引数で省略可能4。 つまり、$emitメソッドは純粋にカスタムイベントを定義・発火させるためのメソッドであり、オプションとして第二引数にデータを設定するとイベント発火時に$eventにデータを渡す事ができるというだけ。 子→親のデータの受け渡しは$emitメソッドのカスタムイベント発火機能に便乗して実現されている。 @my-click="number = $event"の書き換え @my-click="number = $event"は以下のような実装に書き換える事もできる。 sample.vue <template> <!-- ・・・ --> <LikeNumber :total-number="number" @my-click="increaseNumber"></LikeNumber> <!-- ・・・ --> </template> <script> // ・・・ }, methods: { increaseNumber(value) { this.number = value; }, }, // ・・・ </script> ※v-onディレクティブのJavaScriptの部分がmethodsプロパティで定義された関数でかつその引数が$eventしかない場合は省略可能なので、上記の実装では@my-click="increaseNumber"と書いている。 propsのように簡単でないのはなぜ？ propsを用いると、親→子のコンポーネント間データ渡しが簡単にできるが、その逆（子→親）はなぜ$emitメソッドを使うなど面倒な事をしなければ実現できないのか？という事を思うだろう。 これはVue.jsが、単一方向のデータ渡ししかできないようにする事で、データフローを親→子へのみに限定し、データフローの複雑化を防止してシンプルになるようにしているため。 つまり、Vue.jsのコンポーネントでは、 子は親(のdata)に依存する 親は子(のdata、props)に依存しない という設計がなされている。 ※ちなみに、子コンポーネントで親から渡ってきたデータを変更すると Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "totalNumber"（親コンポーネントが再レンダリングされるたびに値が上書きされるため、プロップを直接変更することは避けてください。 代わりに、小道具の値に基づいてデータまたは計算されたプロパティを使用してください。 変更されるプロップ： "totalNumber"） というエラーが出る。 Vue.jsでは親→子のコンポーネント間データ受け渡しをする（子が親に依存する）場合、子側で親から渡ってくるデータを変更しないようにオススメしている。 propsでオブジェクト・配列を渡す時は参照渡しになるのでより注意する オブジェクト・配列を変数に格納すると参照渡しになるように、Vue.jsでも親→子でコンポーネント間データ渡しでオブジェクト・配列をpropsで渡すと参照渡しになってしまう。 この場合、子コンポーネントでpropsで渡ってきた値を書き換えた時、親のdataの値も書き換えられるという影響が出るので注意が必要。 ※基本的には上記で述べたように、子側で親から渡ってくるデータを変更しないが原則なので、予期せぬバグを発生させないためにも子側で親から渡ってきたpropsを変更しないようにする。 $emitメソッドのカスタムイベント名はケバブケースで カスタムイベントはHTML上5に書く事になるので、基本的にはHTML側の慣例にならいケバブケースで書くのがオススメ。 Vue.jsの勉強メモ一覧記事へのリンク Vue.jsについて勉強した際に書いた勉強メモ記事のリンクを集約した記事。 https://qiita.com/yuta-katayama-23/items/dabefb59d16a83f1a1d4 Vueインスタンスに標準で定義されているもの ↩ ソースコード全体を見たい場合はここ ↩ interfaceを見ると$emit(event: string, ...args: any[]): this;となっている第二引数は...args: any[]で、これはarrayだが1つの要素しかない場合はその値が$eventに渡される ↩ 上記の例で言えば、単にthis.$emit("my-click");と書く事もできるという事 ↩ 正確にはsingle file componentのtemplate ↩

はじめに 仕事で使う事になったので1からVue.jsについて学んだ。 ちゃんと覚えておかないとまずそうな事を備忘録として1つ1つ残しておく。 $emitメソッドの正体 カスタムイベントを定義・発火させることができるメソッド1。 このメソッドを応用して、コンポーネント間（子→親）のデータの受け渡しを行う事ができる。 動画のソースコードは以下2。 parent-component.vue <template> <div> <LikeHeader></LikeHeader> <h2>{{ number }}</h2> <LikeNumber :total-number="number" @my-click="number = $event"></LikeNumber> </div> </template> <script> import LikeHeader from "./components/LikeHeader.vue"; export default { data() { return { number: 10, }; }, components: { LikeHeader, } }; </script> <style scoped> div { border: 1px solid blue; } </style> child-component.vue <template> <div> <p>いいね({{ halfNumber }})</p> <button @click="increment">+1</button> </div> </template> <script> export default { props: ["totalNumber"], computed: { halfNumber() { return this.totalNumber / 2; }, }, methods: { increment() { this.$emit("my-click", this.totalNumber + 1); }, }, }; </script> <style scoped> div { border: 1px solid red; } </style> ここでは、child-component.vue(子)からparent-component.vue(親)へデータの受け渡しを行っている。 上記の考え方としては、 child-component.vueの方で$emitメソッドでカスタムイベントmy-clickを定義し発火させる その際に$emitメソッドでは第二引数を取る事ができるので、第二引数に値this.totalNumber + 1を渡すようにする parent-component.vueでは、v-onディレクティブでカスタムイベントmy-clickが発火した際に何らかの処理を行うように設定する事を考える v-onディレクティブの@hoge=""の""はJavaScriptを書く事ができるのでそこでparent-component.vueのdataプロパティの値を$eventの値に変更するようにする というもの。$emitメソッドでカスタムイベントを発火させた場合、$eventには$emitメソッドの第二引数3の値が渡る仕様になっているので、上記のような考え方で実装する事で、$emitメソッドを応用して「子→親のコンポーネント間データ渡し」が実現できる。 ※補足 $emitメソッドでは第二引数は任意の引数で省略可能4。 つまり、$emitメソッドは純粋にカスタムイベントを定義・発火させるためのメソッドであり、オプションとして第二引数にデータを設定するとイベント発火時に$eventにデータを渡す事ができるというだけ。 子→親のデータの受け渡しは$emitメソッドのカスタムイベント発火機能に便乗して実現されている。 @my-click="number = $event"の書き換え @my-click="number = $event"は以下のような実装に書き換える事もできる。 sample.vue <template> <!-- ・・・ --> <LikeNumber :total-number="number" @my-click="increaseNumber"></LikeNumber> <!-- ・・・ --> </template> <script> // ・・・ }, methods: { increaseNumber(value) { this.number = value; }, }, // ・・・ </script> ※v-onディレクティブのJavaScriptの部分がmethodsプロパティで定義された関数でかつその引数が$eventしかない場合は省略可能なので、上記の実装では@my-click="increaseNumber"と書いている。 propsのように簡単でないのはなぜ？ propsを用いると、親→子のコンポーネント間データ渡しが簡単にできるが、その逆（子→親）はなぜ$emitメソッドを使うなど面倒な事をしなければ実現できないのか？という事を思うだろう。 これはVue.jsが、単一方向のデータ渡ししかできないようにする事で、データフローを親→子へのみに限定し、データフローの複雑化を防止してシンプルになるようにしているため。 つまり、Vue.jsのコンポーネントでは、 子は親(のdata)に依存する 親は子(のdata、props)に依存しない という設計がなされている。 ※ちなみに、子コンポーネントで親から渡ってきたデータを変更すると Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "totalNumber"（親コンポーネントが再レンダリングされるたびに値が上書きされるため、プロップを直接変更することは避けてください。 代わりに、小道具の値に基づいてデータまたは計算されたプロパティを使用してください。 変更されるプロップ： "totalNumber"） というエラーが出る。 Vue.jsでは親→子のコンポーネント間データ受け渡しをする（子が親に依存する）場合、子側で親から渡ってくるデータを変更しないようにオススメしている。 propsでオブジェクト・配列を渡す時は参照渡しになるのでより注意する オブジェクト・配列を変数に格納すると参照渡しになるように、Vue.jsでも親→子でコンポーネント間データ渡しでオブジェクト・配列をpropsで渡すと参照渡しになってしまう。 この場合、子コンポーネントでpropsで渡ってきた値を書き換えた時、親のdataの値も書き換えられるという影響が出るので注意が必要。 ※基本的には上記で述べたように、子側で親から渡ってくるデータを変更しないが原則なので、予期せぬバグを発生させないためにも子側で親から渡ってきたpropsを変更しないようにする。 $emitメソッドのカスタムイベント名はケバブケースで カスタムイベントはHTML上5に書く事になるので、基本的にはHTML側の慣例にならいケバブケースで書くのがオススメ。 Vue.jsの勉強メモ一覧記事へのリンク Vue.jsについて勉強した際に書いた勉強メモ記事のリンクを集約した記事。 https://qiita.com/yuta-katayama-23/items/dabefb59d16a83f1a1d4 Vueインスタンスに標準で定義されているもの ↩ ソースコード全体を見たい場合はここ ↩ interfaceを見ると$emit(event: string, ...args: any[]): this;となっている第二引数は...args: any[]で、これはarrayだが1つの要素しかない場合はその値が$eventに渡される ↩ 上記の例で言えば、単にthis.$emit("my-click");と書く事もできるという事 ↩ 正確にはsingle file componentのtemplate ↩

はじめに 仕事で使う事になったので1からVue.jsについて学んだ。 ちゃんと覚えておかないとまずそうな事を備忘録として1つ1つ残しておく。 $emitメソッドの正体　コンポーネント(子→親)の間のデータ受け渡しでやってる事 カスタムイベントを定義・発火させることができるメソッド1。 このメソッドを応用して、コンポーネント間（子→親）のデータの受け渡しを行う事ができる。 動画のソースコードは以下2。 parent-component.vue <template> <div> <LikeHeader></LikeHeader> <h2>{{ number }}</h2> <LikeNumber :total-number="number" @my-click="number = $event"></LikeNumber> </div> </template> <script> import LikeHeader from "./components/LikeHeader.vue"; export default { data() { return { number: 10, }; }, components: { LikeHeader, } }; </script> <style scoped> div { border: 1px solid blue; } </style> child-component.vue <template> <div> <p>いいね({{ halfNumber }})</p> <button @click="increment">+1</button> </div> </template> <script> export default { props: ["totalNumber"], computed: { halfNumber() { return this.totalNumber / 2; }, }, methods: { increment() { this.$emit("my-click", this.totalNumber + 1); }, }, }; </script> <style scoped> div { border: 1px solid red; } </style> ここでは、child-component.vue(子)からparent-component.vue(親)へデータの受け渡しを行っている。 上記の考え方としては、 child-component.vueの方で$emitメソッドでカスタムイベントmy-clickを定義し発火させる その際に$emitメソッドでは第二引数を取る事ができるので、第二引数に値this.totalNumber + 1を渡すようにする parent-component.vueでは、v-onディレクティブでカスタムイベントmy-clickが発火した際に何らかの処理を行うように設定する事を考える v-onディレクティブの@hoge=""の""はJavaScriptを書く事ができるのでそこでparent-component.vueのdataプロパティの値を$eventの値に変更するようにする というもの。$emitメソッドでカスタムイベントを発火させた場合、$eventには$emitメソッドの第二引数3の値が渡る仕様になっているので、上記のような考え方で実装する事で、$emitメソッドを応用して「子→親のコンポーネント間データ渡し」が実現できる。 ※補足 $emitメソッドでは第二引数は任意の引数で省略可能4。 つまり、$emitメソッドは純粋にカスタムイベントを定義・発火させるためのメソッドであり、オプションとして第二引数にデータを設定するとイベント発火時に$eventにデータを渡す事ができるというだけ。 子→親のデータの受け渡しは$emitメソッドのカスタムイベント発火機能に便乗して実現されている。 @my-click="number = $event"の書き換え @my-click="number = $event"は以下のような実装に書き換える事もできる。 sample.vue <template> <!-- ・・・ --> <LikeNumber :total-number="number" @my-click="increaseNumber"></LikeNumber> <!-- ・・・ --> </template> <script> // ・・・ }, methods: { increaseNumber(value) { this.number = value; }, }, // ・・・ </script> ※v-onディレクティブのJavaScriptの部分がmethodsプロパティで定義された関数でかつその引数が$eventしかない場合は省略可能なので、上記の実装では@my-click="increaseNumber"と書いている。 propsのように簡単でないのはなぜ？ propsを用いると、親→子のコンポーネント間データ渡しが簡単にできるが、その逆（子→親）はなぜ$emitメソッドを使うなど面倒な事をしなければ実現できないのか？という事を思うだろう。 これはVue.jsが、単一方向のデータ渡ししかできないようにする事で、データフローを親→子へのみに限定し、データフローの複雑化を防止してシンプルになるようにしているため。 つまり、Vue.jsのコンポーネントでは、 子は親(のdata)に依存する 親は子(のdata、props)に依存しない という設計がなされている。 ※ちなみに、子コンポーネントで親から渡ってきたデータを変更すると Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "totalNumber"（親コンポーネントが再レンダリングされるたびに値が上書きされるため、プロップを直接変更することは避けてください。 代わりに、小道具の値に基づいてデータまたは計算されたプロパティを使用してください。 変更されるプロップ： "totalNumber"） というエラーが出る。 Vue.jsでは親→子のコンポーネント間データ受け渡しをする（子が親に依存する）場合、子側で親から渡ってくるデータを変更しないようにオススメしている。 propsでオブジェクト・配列を渡す時は参照渡しになるのでより注意する オブジェクト・配列を変数に格納すると参照渡しになるように、Vue.jsでも親→子でコンポーネント間データ渡しでオブジェクト・配列をpropsで渡すと参照渡しになってしまう。 この場合、子コンポーネントでpropsで渡ってきた値を書き換えた時、親のdataの値も書き換えられるという影響が出るので注意が必要。 ※基本的には上記で述べたように、子側で親から渡ってくるデータを変更しないが原則なので、予期せぬバグを発生させないためにも子側で親から渡ってきたpropsを変更しないようにする。 $emitメソッドのカスタムイベント名はケバブケースで カスタムイベントはHTML上5に書く事になるので、基本的にはHTML側の慣例にならいケバブケースで書くのがオススメ。 Vue.jsの勉強メモ一覧記事へのリンク Vue.jsについて勉強した際に書いた勉強メモ記事のリンクを集約した記事。 https://qiita.com/yuta-katayama-23/items/dabefb59d16a83f1a1d4 Vueインスタンスに標準で定義されているもの ↩ ソースコード全体を見たい場合はここ ↩ interfaceを見ると$emit(event: string, ...args: any[]): this;となっている第二引数は...args: any[]で、これはarrayだが1つの要素しかない場合はその値が$eventに渡される ↩ 上記の例で言えば、単にthis.$emit("my-click");と書く事もできるという事 ↩ 正確にはsingle file componentのtemplate ↩

アロー関数式は最高だ。 私たちの人生を豊かに彩ってくれる。 ところが、泣く泣くfunction式を使う状況がある。 例 (function f(){ console.log(1234); setTimeout(f,500); })(); 即時関数を再帰的に呼び出したいとき、function式を使ってこのように書けば、名前空間を汚さずに実現できる。 しかし、私はfunctionガチアンチなのでfunctionは絶対に使いたくない。 functionを使わず、名前空間も汚さず同様の処理を表現するにはどうすればいいのか？ 解決策 (f=>f(f))(f=>{ console.log(1234); setTimeout(()=>f(f),500); }); こうすればよい。 これで忌々しきfunctionの脅威は消え去った。 まとめ いやどう見てもfunctionの方が簡潔だろ

アロー関数は最高だ。 私たちの人生を豊かに彩ってくれる。 ところが、泣く泣くfunctionを使う状況がある。 例 (function f(){ console.log(1234); setTimeout(f,500); })(); 即時関数を再帰的に呼び出したいとき、functionを使ってこのように書けば名前空間を汚さずに表現できる。 しかし、私はfunctionガチアンチなのでfunctionは絶対に使いたくない。 functionを使わず、名前空間も汚さず同様の処理を表現するにはどうすればいいのか？ 解決策 (f=>f(f))(f=>{ console.log(1234); setTimeout(()=>f(f),500); }); こうすればよい。 これで忌々しきfunctionの脅威は消え去った。 まとめ いやどう見てもfunctionの方が簡潔だろ

物が動くと面白い。 その速度が変化すればより面白い。 等速直線運動だけでは面白くない。 動き始めたものにはそのうち止まってほしい。 つまり、摩擦を実装したい。 画像の表示にはpixi.jsを利用する。 scsript.js //Aliases let Application = PIXI.Application, loader = PIXI.loader, resources = PIXI.loader.resources, id = loader.resources, Sprite = PIXI.Sprite; //アプリケーション宣言 const width = 500; const height = 600; let app= new Application({ width:width, height:height, antialias: true, transparent: false, resolution: 1, autoResize: true, backgroundColor:0xAAAAAA, }); //貼り付け document.getElementById("game").appendChild(app.renderer.view); //画像 loader.add("image.png"); loader.load(setup); const vel = 40;//加算速度 const friction = 0.5;//摩擦 const p = 0.2;//加速するか否かの確率 let image;//移動する画像 function setup(){ image = new Sprite(id["image.png"].texture); image.vx = image.vy = 0;//初期速度は０ image.anchor.set(0.5); app.stage.addChild(image); image.position.set(Math.random()*width, Math.random()*height);//初期位置はランダム app.ticker.add(play); } function play(){ /*ここの部分がこの記事の肝*/ image.vx -= Math.sign(image.vx)*Math.min(Math.abs(image.vx),friction); image.vy -= Math.sign(image.vy)*Math.min(Math.abs(image.vy),friction); /*ここの部分がこの記事の肝*/ //端で跳ね返る if(image.x+image.vx > width || image.x+image.vx < 0) image.vx = -image.vx; if(image.y+image.vy > height || image.y+image.vy < 0) image.vy = -image.vy; image.x += image.vx; image.y += image.vy; //速度がゼロならたまに加速 if(image.vx == 0 && image.vy == 0 && Math.random()<p){ image.vx += (Math.random()-0.5)*vel; image.vy += (Math.random()-0.5)*vel; } } image.vx -= Math.sign(image.vx)*Math.min(Math.abs(image.vx),friction); image.vy -= Math.sign(image.vy)*Math.min(Math.abs(image.vy),friction); ここがこの記事で紹介したいところだ。 この思想は「速度が0でなければフレームごとにfrictionだけ速度の絶対値を小さくしたい。しかし、速度の絶対値がfrictionよりも小さい場合はfrictionを引いても速度が0にならないので、自身を引く。」と説明できる。 Math.sign(image.vx)とMath.abs(image.vx)は「絶対値を小さく」という言葉に掛かっている。正なら正の値を引き、負なら負の値を引く。 Math.min(image.vx,friction)の部分は、「frictionよりも小さい場合は～」に掛かっている。こうしないと速度がきっちり0にならずに小さい値の正負を反復横跳びするため、静止せずにﾋﾞｸﾝﾋﾞｸﾝとなってしまう。

はじめに 個人的に全体像の把握のために、勉強した内容をざっくりまとめただけなので、詳細の正しさなどは担保していない備忘録として作成。 モダンJSとは？ ES2015（JavaScript の 2015 年バージョン）以降の JavaScript を指していると思われます。 特にモジュール機能の獲得こそが JavaScript のモダン化にとって最も重要な要素だと考えられます。 モダンJS前に発生していた問題 名前空間や依存関係によるバグ 他のプログラミング言語では名前空間を自由に設定できることが多いですが、残念ながらJavaScriptでは名前空間は１つしかもつことができません。そのことから、同じ命名の関数が被ってしまうことが頻発しました。 また、読み込み順などにより発生する依存関係でのトラブルも頻発しており、JavaScriptは衰退していきかけました。 しかし、この解決してくれたのが、 モジュールとnpmでした。 簡単にいえば、 モジュールは名前空間の問題を解決し npm（パッケージ管理）は依存関係の問題を解決してくれました！！ ここらへんからモダンJavaScriptになっていったと考えていいですね。 何を伝えたいか？ ブラウザでモジュールを使うために模索した結果、 コードを事前に変換することが主流となった。コードを事前に変換するとモジュールを使える以外にも恩恵があること。 Node.jsの誕生 Node.jsは2009年に誕生。最初はCommonJSのモジュールAPIに準拠。 しかし、CommonJSのコミュニティーがうまく機能しなくなり、 Node.js独自の進化を遂げていく。 パッケージ管理システム サーバーサイドでモジュールが使われるようになると、 次にほしくなるのはパッケージ管理システム そもそもパッケージとは？ packege.jsonで記述されたファイルやディレクトリのこと。 共有したい機能の単位とも言える。 パッケージ管理システムは大きく分けると以下の機能を持っている 1. リポジトリの購読 2. パッケージのインストール・削除 3. 依存関係の解決 4. 設定管理 リポジトリの購読 ローカル環境にインストールしたパッケージを更新できる。また検索したりできること 依存関係の解決 パッケージに必要な別のパッケージを自動的にインストールしたり、更新したりできること 設定管理 設定を書くことで１、２、３を自動化できる。 毎回手動でパッケージを入れたりする必要がなくなりチームでの環境を簡単揃えたりできる。 npmの誕生 Node Package Managerの略で、元々はNode.jsのパッケージ管理ツールとしてうまれた。 パッケージを手動でインストールするのは非効率。 パッケージをいい感じにインストールしたり、管理できるのがパッケージ管理ツール。 ここまではサーバーサイドの話・・・フロントエンドは解決していない。 事前にブラウザ向けに変換するという流れが起きる フロントエンド側でも様々な取り組みがあったようですが、満足できるものがないなかで 大きなパラダイムシフトが起きる。 それが、「事前にブラウザ向けに変換をする」ということで、 書いたコードと動くコードが違うということです ビルド 書いたコード→ブラウザ向けに変換→ブラウザで動くコード という流れができるわけです。 このブラウザ向けに変換をしてくれる行為こそがビルドになります。 そしてその時に出てきた概念が Bundle（バンドル） Compile（コンパイル）という二つの概念です。 Bundleについて 正式な文章ではないですが以下のようにまとめます。 1.CommonJSモジュールを開発 2.モジュールの依存関係を事前に解決して１ファイルに変換（これがバンドル） 3.変換したコードをいつも通りScriptタグで読み込む この考え方によってそれを実装した１つのバンドルツールができあがります。 それが Browserigyというものです。 結局何ができるようになったかというと ブラウザでもBrowserifyを使うとrequireを使うコードが使用できるようになったということです。 これにより、ブラウザでもrequire構文を用いて、モジュール開発ができるようになり、Node.jsのパッケージがブラウザ向けに移植されることになりました。 Node.jsのパッケージ管理ツールであるnpmにたくさんあったパッケージがBrowserifyを通すことでブラウザ側でも使用できるようになり、ブラウザでもnpmが使われるようになった。 そして現在では、その上位互換にあたるバンドルツールの「Webpack」が2012年に誕生し主流となっています。 ここで大切なのは Browserifyはcjs形式のモジュールをバンドルするのに対して Webpackはどんな形式でもバンドルするということです。 ES Modules　の誕生 今までのモジュール開発というのは、common.jsや何とかブラウザ向けにモジュール開発できないかと半ば強引に変換をしたりしていたわけで、JavaScriptそのものがもっている仕様というのはなかった。 しかし、ここで遂にES ModulesというjavaScript独自のモジュールの使用が誕生する。 ただし、この段階ではIEなどのブラウザの対応がされていなく、サポートがなかったため、Webpackなどのモジュールバンドラーが必要だという流れは変わっていなかった。 つまりこの段階ではES Modulesを使用してブラウザで表示するためにはWebpackなどモジュールバンドラー必要だったってこと。 WebpackがES Modulesをネイティブ対応化 Webpack version2でES Modulesをネイティブ対応かするという対応をしたおかげで、 ES Modulesを使用したいという需要に答え、Webpack一強の時代となります。 Compileのお話 もう一つの概念であったCompileを使うと 1.開発時ではブラウザでは使えないけど開発に便利な機能を使ってコードをかける 2.書いたコードをブラウザで動くように変換する（これがコンパイル） 3.変換したコードをいつも通りScriptタグで読み込む ここで混乱するので１つまとめておくと バンドルはモジュールを利用する際の依存関係の処理に焦点を当てたもの コンパイルはモジュール以外の便利な機能を使う際の処理に焦点を当てたもの ES２０１５でモジュール以外にも let,const,class,Promiss,アロー関数,分割代入,スプレッド構文,テンプレート文字列...など沢山の使用が追加された。（これがコンパイルの際に使いたい便利機能） Babelの誕生 これを解決するために出てきたのがBabel。 ES２０１５などで書かれたコード（モジュール・便利機能を利用したって意味）を従来の環境でも動くように古いJavaScriptに変換するコンパイラ。 Webpackと一緒に使えた。 Webpackの設定でbabelを一緒に使うことができた。 これによって、モジュールが使えるようになるだけでなく、ES２０１５の便利機能も使えるようになり、JavaScriptが便利になっていった。 これによっていろんなパッケージが流行り出す React(.jsx) Vue(.vue) TypeScript(.ts) など、現在主流になっているもの。これがコンパイルによって使えるようになっていく。 今回の流れで大切なことまとめ ブラウザでモジュールを使うことを模索した結果、*事前にコードを変換することが主流になる。 パラダイムシフト 過去 Scriptタグでjqueryを読み込む→ブラウザで動くコードを書く→当然ブラウザで動く 現在 開発でモジュールや便利機能を使い開発→バンドル・コンパイルによって事前にブラウザで動くjsファイルに変換→ブラウザで動く この流れが非常に大切なこと。

JavaScript に於いて，関数は特殊なオブジェクトのため，普通にサブクラスすることはできません．そこで，普通に関数を作成して，その関数に対して必要な定義を行うこととなります．ここで，工夫して定義を行うと，普通のサブクラス可能な関数コンストラクタを定義することができることを発見いたしました．以下にそのコードを示します． コード なお，このコードは Apache 2.0 ライセンスで利用可能なものとします． { let _; const ExtensibleFunction = function ExtensibleFunction(){return _(new.target)}; Reflect.setPrototypeOf(ExtensibleFunction, Function); ExtensibleFunction.CALL = Symbol('[[Call]]'); ExtensibleFunction.CONSTRUCT = Symbol('[[Construct]]'); ExtensibleFunction.prototype = Object.create(Function.prototype); ExtensibleFunction.prototype.constructor = ExtensibleFunction; ExtensibleFunction.prototype.toString = function(){return"function anonymous() {\n [native code]\n}"}; ExtensibleFunction.prototype[Symbol.toStringTag] = 'ExtensibleFunction'; ExtensibleFunction.prototype[ExtensibleFunction.CALL] = function(thisArgument, argumentsList){}; ExtensibleFunction.toString = function(){return"function ExtensibleFunction() {\n [native code]\n}"}; _ = function (newTarget) { let _; const _this = function(...a){return _(this, a, new.target)}; delete _this.length; delete _this.name; Reflect.setPrototypeOf(_this, newTarget.prototype); _ = function (thisArgument, argumentsList, newTarget) { if ('undefined' == typeof newTarget) { return _this[ExtensibleFunction.CALL](thisArgument, argumentsList); } else if ('function' == typeof _this[ExtensibleFunction.CONSTRUCT]) { return _this[ExtensibleFunction.CONSTRUCT](argumentsList, newTarget); } else { throw new TypeError('Not a constructor'); } } return _this; }; globalThis.ExtensibleFunction = ExtensibleFunction; } 使い方 クラスを作る class MyClass extends ExtensibleFunction { constructor(n) { super(); this.prototype.number = +n; } [ExtensibleFunction.CALL]() { throw new TypeError("class constructors must be invoked with 'new'"); } [ExtensibleFunction.CONSTRUCT]() { return { _id: 'foo', }; } [Symbol.hasInstance](obj) { return obj && obj._id === 'foo'; } } const myClass42 = new MyClass(42); console.log((new myClass42) instanceof myClass42); // true console.log((new myClass42).number); // 42 関数を作る class MyFunction extends ExtensibleFunction { constructor(value) { super(); this.value = value; } [ExtensibleFunction.CALL]() { return this.value; } } const myFunction42 = new MyFunction(42); console.log(myFunction42()); // 42 new myFunction42; // TypeError 総括 この様にして，自由自在に関数オブジェクトを動的に作ることができましょう．ご意見等 お待ちしております．

プログラムを学ぶとき、良質なサイトを探すのにかなりの時間を浪費した。 他の人にはそうなってほしくないので、今まで役立ったサイトを公開する。 なお、強くオススメしたいサイト順に並ばせる。 随時更新予定。 JavaScript （Webで動きを付けたいときに使う有名なアレ） ・JavaSciptチートシート　（まとまっていてわかりやすい） 　https://jsprimer.net/cheatsheet/ ・JavaScriptの業務スキルレベル　判別表（この記事はだいぶ古いが今でも有用） 　https://language-and-engineering.hatenablog.jp/entry/20100111/p1 ・MDNエラーリファレンス 　https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Errors ・Excel VBAプログラマーのためのGoogle Apps Script入門 　https://www.atmarkit.co.jp/ait/series/5004/ ・JavaScript Minifier（ブックマークレット作成にお世話になった） 　https://javascript-minifier.com/ [electron]　デスクトップアプリが作れる ・[Electron] 多言語対応する – i18n（jsonで多言語ファイル作ればいい！でもその具体的な方法は？と困ったときにお世話に。） 　https://blog.katsubemakito.net/nodejs/electron/electron-i18n [Puppeteer]　Web自動 ・Puppeteerで複数のURLはPromise.allで処理したほうが倍以上高速（Web自動化で遊ぶ。セレニウム？それは美味ですかな？） 　https://iwb.jp/puppeteer-multiple-url-promise-all-several-times-faster/ [Next.js]　Reactを使った自動ルーティングで今はやり ・Next.jsでGoogle Analyticsを使えるようにする 　https://panda-program.com/posts/nextjs-google-analytics TypeScript (JavaScriptを型の制約を付けたもの。) ・仕事ですぐに使えるTypeScript（数あるDocの中でもかなり分かりやすいし詳しい。イチオシ） 　https://future-architect.github.io/typescript-guide/index.html ・TypeScript Deep Dive 日本語版 　https://typescript-jp.gitbook.io/deep-dive/ ・TypeScriptの型入門（食事をとりながらスマホで学習したいときに最適だった） 　https://qiita.com/uhyo/items/e2fdef2d3236b9bfe74a#conditional-type%E3%81%AB%E3%82%88%E3%82%8Bdeepreadonlyt ・TypeScriptお試し(コンパイル後のコードはどうなっているのか。そういうのもみれる) 　https://www.typescriptlang.org/ja/play?#code/IYGwpgTgLgFARACTCEB7ABAFQJ4AcwDKAxhAJa5RwCUA3EA HTML ・dCodes v2（サイト構築のための部品がいろいろ） 　http://www.dcodes.net/2/docs/index.html ・HTML reference.io（各HTMLタグの詳細） 　https://htmlreference.io/ C (ポインタで躓きたまえ…！そう囁くんだ…) ・苦しんで覚えるＣ言語(分かりやすい、面白い) 　https://9cguide.appspot.com/index.html ・組込みの門（検索すると出てくるアレ） 　https://www.uquest.co.jp/embedded/index.html#outline C# (Cと名前は似ているが互換性はない) ・C# によるプログラミング入門 　https://ufcpp.net/study/csharp/ PHP (JavaScriptと構文が似ていてありがたい) ・PHPDoc リファレンス(JSでも使える良質なアノテーション記述法) 　https://zonuexe.github.io/phpDocumentor2-ja/references/phpdoc/index.html Python ・note.nkmk.me 　https://note.nkmk.me/python/ ・お気楽 Python3 プログラミング超入門 　http://www.nct9.ne.jp/m_hiroi/light/pythonb02.html#abc09 ・PyQt5とpython3によるGUIプログラミング：実践編 　https://qiita.com/kenasman/items/b9ca3beb25ecf87bfb06#qt-designer%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6 ・Python3チートシート(基本編) 　https://qiita.com/1429takahiro/items/710a877b1afb1626334f#%E3%82%AF%E3%83%A9%E3%82%B9%E3%81%AE%E7%B6%99%E6%89%BF ・【機械学習初心者向け】scikit-learn「アルゴリズム・チートシート」の全手法を実装・解説してみた 　https://qiita.com/sugulu_Ogawa_ISID/items/e3fc39f2e552f2355209 ・PyQ ドキュメント 　https://docs.pyq.jp/index.html ・Python入門 　https://www.python.ambitious-engineer.com/introduction-index ・Django(Python)でシステム開発できるようになる記事_入門編 　https://qiita.com/Saku731/items/ed64190a12a4498b9446 ・【Pygame入門】ゲームプログラミング【Python】 　https://algorithm.joho.info/programming/python/pygame/ Ruby （Railsが優秀過ぎてそればかり持ち上げられているやつ） ・Ruby on Rails チュートリアル　第4版(最新版は有料。) 　https://railstutorial.jp/ PowerShell （バッチ処理楽しい） ・今から使う PowerShell 　https://www.vwnet.jp/Windows/PowerShell/2018022301/GettingStartedWithPowerSehll-01.htm MarkDown (簡素な記述でHTMlが精製できちゃう凄いヤツ) ・UML超入門（趣味や遊びで読むにはかなりきつい） 　http://objectclub.jp/technicaldoc/uml/umlintro1 git (version管理。ゲームのセーブ&ロードと思うと分かりやすい) ・git book(下手に探すよりこのサイト見たほうが理解が早い) ＊VS Codeなんかでは拡張機能でワンタッチでコマンドが自動実行できるため、いちいち覚える必要すら実はあまりなかったりする。 　http://git-scm.com/book/ja/v2 ・【必須】Gitコミットの書き方・作法【prefix/emoji】(プレフィックスはわかりやすいよんｂ) 　https://suwaru.tokyo/%E3%80%90%E5%BF%85%E9%A0%88%E3%80%91git%E3%82%B3%E3%83%9F%E3%83%83%E3%83%88%E3%81%AE%E6%9B%B8%E3%81%8D%E6%96%B9%E3%83%BB%E4%BD%9C%E6%B3%95%E3%80%90prefix-emoji%E3%80%91/ ・今日からはじめるGitHub ～ 初心者がGitをインストールして、プルリクできるようになるまでを解説 　https://eh-career.com/engineerhub/entry/2017/01/31/110000#Git%E3%81%A7%E3%81%AF%E3%83%AD%E3%83%BC%E3%82%AB%E3%83%AB%E3%81%A7%E9%96%8B%E7%99%BA%E3%82%92%E9%80%B2%E3%82%81%E3%82%8B%E3%81%93%E3%81%A8%E3%81%8C%E3%81%A7%E3%81%8D%E3%82%8B Adobe XD （Webサイトの試作品を作れるアレ。設計を先に決めてないと詰む系） ・Adobe XD でのデザイン、プロトタイプ、共有 　https://helpx.adobe.com/jp/xd/user-guide.html/jp/xd/help/adobe-xd-overview.ug.html ・Adobe XDでWebデザインをしよう！画面作成からページ推移までの手順を紹介 　https://www.webcreatorbox.com/inspiration/adobe-xd-steps ・Adobe XD でのアートボードの使用 　https://helpx.adobe.com/jp/xd/user-guide.html/jp/xd/help/get-started-with-artboards-in-XD.ug.html Docker （お手軽仮想環境。win10ならver 2.5.0.1を使ったほうがエラーが出ない。今のところは。） ・【連載】世界一わかりみが深いコンテナ & Docker入門 〜 （詳しいが、話が難解） 　https://tech-lab.sios.jp/archives/18811#i-3 ＊書籍 ・読まれない名著「人月の神話」を本気で読み込んでみた（まとめ） 　https://www.gixo.jp/blog/4978/ プログラミング言語の歴史 ・プログラミング言語年表 　https://ja.wikipedia.org/wiki/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E8%A8%80%E8%AA%9E%E5%B9%B4%E8%A1%A8

Over view GoogleAnalytics（GA）でリンクごとのクリック数を計測したい LPなんかのサイト分析の時にリンクごとのクリック数を計測する時とかに便利 onclickタグを１つ導入するだけで簡単に設定できます Code index.html <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'ここに個別のidが入ります'); </script> <a href="#" onclick="gtag('event', 'click', {'event_category': 'course_big', 'event_label': 'main', 'value': 1});">Hello,world!</a> 'event' => そのまま記述しましょう。 'click' => イベントの種類を判定でき,clickやdownloadと任意で設定できます 'event_category' => イベントの種類をさらに細かく設定でき、「亀さんプラン」「うさぎさんプラン」のような複数のクリックリンクがある場合に便利ですね。基本複数のリンクがある時はこれを設定しましょう。 'event_label' => 複数のリンクをグループングする際に便利なものです。サイト内にたくさんうさぎさんプランがある時などにheader, footerなど場所を指定するのもありですね。 'value' => 計測の単位です。今回は１クリックあたりに増えていく数字ですが、基本１がいいと思います。商品金額が300だからと300にするより1にしてjs側で商品単価と掛け合わせた方が汎用性が高いと思います。

課題 Bootstrapのd-flexが有効な場合 $element.fadeOut() が効かなかった。 **子要素の列が消えてくれない。 原因 どうやらこいつだ。 結論 d-flex を外すと効いた。 jquery $element.removeClass('d-flex') $element.fadeOut(300)

配列に動的に値を追加して描画できなかったので、Obejctにしなさいよという教訓から書きます 間違い等ありましたら、ご指摘していただけると幸いです。 リアクティビティ Vue は、配列における次の変更は検知できません: インデックスと一緒にアイテムを直接セットする場合、例えば vm.items[indexOfItem] = newValue 配列の長さを変更する場合、例えば vm.items.length = newLength 上記の内容に引っかかって配列にひたすらpushして悩んでいました。(ちゃんとドキュメント読もうね...) またリアクティブプロパティの宣言も行っておらず、カオスな状況でしたので原因の発見に遅れました。 Paramedit.vue <template> <form id="form"> <table border="1"> <tr v-for="(sec, index) in task.params" :key="index"> <td>Name</td> <td><input v-model="sec.Name" /></td> <td>Path</td> <td><input v-model="sec.ValueFrom" /></td> <td><button @click.prevent="deleteParam(index)">削除</button></td> </tr> </table> <a @click.prevent="addParam">追加</a> </form> </template> <script> export default { data() { return { // 更新対象 task: { // リアクティブプロパティの宣言必須 // params: [], params: [ { Name: "test1", ValueFrom: "test/path/1" }, { Name: "test2", ValueFrom: "test/path/2" }, ], } addForm: { Name: "", ValueFrom: "" }, }; }, created() {}, methods: { deleteParam: function (id) { let self = this; self.task.params.splice(id, 1); }, addParam: function () { let self = this; self.task.params.push(self.addForm); }, }, }; </script>

■　innnerHTML とは innerHTMLを使用すると、HTML要素の取得や書き換えを行うことができる 例えば、以下のように指定した要素の文字列を取得・操作することができます。 ■イメージ図　⬇️ 今日の投稿は以上です。 wagaでした！

初めに javascriptを学習したら、高階関数という概念が出てきたのでそれについて自分なりに理解した内容をまとめてみました。 ※内容に間違いなどがある場合はご指摘をよろしくお願いします。 高階関数とは 関数の引数に関数を取る関数のこと。英語ではhigher order functionsという。 なぜ使うのか 一度定義した関数に自分なりに味付けをして細かい内容を追加したりしてカスタマイズができるメリットがあるから。その他にも理由があるらしい。 取り敢えず使ってみた 数字をブラウザに表示するシンプルな関数を定義しました。 <script> function printNumber(inputNumber) { document.write(inputNumber); } printNumber(1) </script> ブラウザに数字を表示するこの関数の機能をそのままに残して、足し算や掛け算した結果を表示するように拡張してみたいという場面がありますよね。早速高階関数を定義して使ってみます。 function calcNumber(val1, val2, printNumber) { const sumNumber = val1 + val2 const multiNumber = val1 * val2 printNumber(sumNumber); printNumber(multiNumber); } calcNumber(3, 4, printNumber); calcNumberという高階関数を定義して、その引数としてval1,val2と先ほど定義したprintNumberを入れました。printNumberはただ数字をブラウザーに表示するだけですが、calcNumberは足し算した結果や掛け算した結果が表示されます。 高階関数はjavascriptだけのものではない 実はこの高階関数という概念は他の言語にもあります。pythonで高階関数を試してみました。 def printVal(callId): print(f"プリントするのは{callId}ですね。") def calc(val,height, printVal): printVal(val * height) calc( 2 , 3, printVal) 画面に文字列を出力する普通の関数printValを定義します。そしてval,heightという引数の他にprintValという関数も引数にしています。 結果はちゃんと掛け算した結果を出力してくれます。 終わりに 高階関数は関数を引数として使える便利なものです。いろいろと応用できそうなので、試してみてはどうでしょうか。 参考記事 https://se-tomo.com/2019/02/06/%E3%80%90javascript%E3%80%91%E9%AB%98%E9%9A%8E%E9%96%A2%E6%95%B0%E3%81%A8%E3%82%B3%E3%83%BC%E3%83%AB%E3%83%90%E3%83%83%E3%82%AF%E9%96%A2%E6%95%B0%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6%E7%90%86%E8%A7%A3/ https://qiita.com/elipmoc101/items/c34b38ddbbd9b52d0a4f https://qiita.com/may88seiji/items/8f7e42353b6904af5e9a

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>順番に文字を表示</title> <script> var interval; var count=1; var start_f = false; //004----------interval関数の発動--------------------------------------------------------- function start() { //----------二度押しを防止-------------------------------------------- if (start_f === false) { //005----------2秒に一回、typing関数を発動--------------------------------------------- interval = setInterval(typing, 500); start_f = true; } } //006----------typing関数の発動--------------------------------------------------------- function typing() { //007----------2秒毎に出力するブロックのIDを取得------------------------------------------------ var out = document.getElementById('out'); //008----------テキストボックスのIDの値を取得------------------------------------------------ var msg = document.getElementById('msg').value; //009----------テキストボックスの文字数が1以上ならば-------------------------------------------- if(count <= msg.length){ //010----------テキストボックスの文字列を切り出す。開始位置ゼロ、終了位置が1.2.3.4....----------- out.innerHTML = msg.substring(0, count); console.log(count, msg.substring(0, count)); // 任意 count++; } else { //011 クリアインタータバル interval関数を止める 最後のintervalしか止められない clearInterval(interval); alert("処理が終わりました。"); //01２ テキストボックスを初期化 // document.getElementById('msg').value=''; //01３ 2秒毎に出力するブロックを初期化 out.innerHTML=''; } } //001----------javascriptの開始--------------------------------------------------------- window.onload = function(){ //002----------1文字ずつ表示ボタンのIDを取得------------------------------------------------ var btn= document.getElementById('botton'); //003----------ボタンを押下することで、イベント発火、interval関数を実行----------- btn.addEventListener('click',start,false); } </script> </head> <body> <!-- テキストボックスの作成 --> <input type="text" id="msg" size="18" value="順番に文字を表示"> <!-- 1文字ずつ表示ボタの作成 --> <button id="botton">1文字ずつ表示</button> <!-- 2秒毎に出力するブロックを作成 --> <div id="out"></div> </body> </html> ※備考 文字を1文字づつ出すのではなく、 順 順番 順番に 順番に文 順番に文字 順番に文字を 順番に文字を表 順番に文字を表示 と出している。

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>実行タイミング</title> <script> /* 課題処理を追加 */ function background_black(){ document.body.style.color='white'; document.body.style.backgroundColor = "black"; } function background_white(){ document.body.style.color='black'; document.body.style.backgroundColor = "white"; } window.onload = function(){ var black = document.getElementById("black"); var white = document.getElementById("white"); black.addEventListener("click",background_black,false); white.addEventListener("click",background_white,false); } </script> </head> <body> <p>ボタンクリックにより背景色と文字色を変化</p> <button id="black">背景黒</button> <button id="white">背景白</button> </body> </html>

(VSCodeを使ってたある日のこと...) おっと、どうやら更新の通知が来たようだ。..ってアレ？ステータスバーに「JS/TS 言語機能を初期化しています」 てのがずっとグルグルしてるんだけど、これいつ終わるんだ？？ そのまま再起動していいのかもしんないけどちょっと怖いな... でもこのまま終わるの待ってるのも嫌だな... という訳で、何かしらの解決方法があるかもしれないのでググってみた。 結論 どうやらこれは、VSCodeにデフォルトで搭載されている組み込み拡張機能というものらしい。これが一体どういうものなのか、なぜ初期化の作業がずっと続いているのかは不明。しかし、無効/有効を切り替える方法は分かったので、一旦はこれで対処することにした。 前提条件 macOS Catalina ( 10.15.7 ) Visual Studio Code ( 1.56.1 ) ※あくまでこのブログ執筆時のバージョン 組み込み拡張機能を無効化 commnad + shift + xで拡張機能のサイドバーを開く。 検索ボックスに@builtinと入力。 今回はJS/TSの言語機能なので、『機能』項目内のTypeScript and JavaScript Language Featuresというものを選択。 他の拡張機能と同様に、ワークスペース内、若しくはVSCode全体で無効/有効の切替可能。 無効にしたら一度再起動して、上記1~3を繰り返し有効にし直す。 一度これも「初期化してまーす」と通知が来たんだけど、ステータスバーを非表示にしていたら多分気付かずにそのまま再起動してたんだろうなぁ。まぁ警告メッセージとかは出たのかもしんないけど。 参考記事 特定のプロジェクトで「JS/TS言語機能の初期化」を無効にするにはどうすればよいですか？ 関連投稿記事 VSCode関連で独自にちょっとだけカスタマイズした環境設定を晒す(part. 3/3) - Qiita