グリッドレイアウトってめっちゃ便利やね。 これあればmarginいらないんじゃないのって思ってたらそんな記事があった。 これからのCSSはmargin禁止！？CSSグリッドレイアウトやコンポーネント指向なCSSについて、矢倉さんに聞いてきた！ | HTML5Experts.jpbo…

css gridは入れ子ができる。 bodyで全体をグリッドに分け 細かいのはそれぞれでまたグリッドにすると見やすそう。細かいマージンはグリッドで作らずにそれぞれの要素で作る

3章まで読み終わった。 わかりやすいし、サンプルもとてもよい。 css gridを使いこなせれば好きなレイアウトが作れるような気にさせてくれる。 自分でなにか作る際は積極的に使って練習しよう。ただ、全く同じ名前の本があるのはいただけない。 検索しづらい…

JavaScriptユーザのための関数型プログラミング(前編) | POSTD概要を把握するだけならここがとてもわかりやすい

読んでいる最中。 日本語訳が下手で読みにくい。 関数型プログラミングとは何なのかだけでも理解したい。

研究はしばらくお休みするcheckioを進めた

研究が進まず不安でお腹が痛いしよく眠れない。不安に対して認知療法 不安を簡単に取り除く方法 【精神科医・樺沢紫苑】 - YouTube不安の90％は現実には起こらない。 ほとんどが取り越し苦労である。その上で解消法は2つ。 1つ目は日記を書く。 どんなときに…

checkioをはじめた homeを終えたぐらいだけどちょうどいい難易度で勉強になる

forは言語構文である forの中に書かれる文は単純に繰り返されるだけ returnすると外側で実行しているメソッドの返り値となるforEachはメソッドである forEachに渡されるのは関数であり、これが1要素ごとに適用される returnすると関数を現在適用している要素…

rubyの真偽値 偽 - nil, falseのみ 真 - 偽以外javascriptの真偽値 偽 - null, false, undefined, 0, NaN, ""(空文字) 真 - 偽以外javascriptで下記のように書いたときの注意点 if (hoge) { ... } ・hoge=0もfalseになる ・hoge=""はfalseだが、hoge=[]とhog…

let data = [[11,12],[21,22],[31,32]] console.log(data[-1]) //undefined console.log(data[-1][1]) // Cannot read property '1' of undefined 存在しない配列へアクセスするとundefinedになる しかし、2次元配列だとエラーになってしまう。 だから存在し…

forEach 配列の値を元に処理を行う 値は返さない map 元の配列の値を変形させたものを返す filter 元の配列から条件に当てはまるものを返す reduce 元の配列を使って結果を返す

console.log(toString.call([1,2,3])) // [object array] toString.call(target)を使う

スプレッド演算子と残余引数は見た目は同じだけど若干違う スプレッド演算子 ばらして渡す //個々の値に展開する1 let arr = [a,b,c,d] Math.max(a,b,c,d) //一つずつしか引数を渡せない Math.max(...arr) //まとめて渡しても展開してくれる //個々の値に展…

javascriptのソートは自分で大小の関数を書かないといけない。 めんどいと思ってたけどおかげで柔軟にかけそう。 オブジェクトの値でソートする方法 function objSort(data) { return data.sort((a, b) => b.price - a.price) } objSort([ {"name": "meat", …

javascriptでの正規表現の使い方 string.match(/正規表現/g) //正規表現をスラッシュで囲む、最後にgを付けると配列で結果を返してくれる //次に変数を使う場合 let reg = new RegExp(`正規表現`,'g'); string.match(reg) //RegExpを使い、文字列で指定 //バ…

javascriptには見た目はarrayっぽいけどarrayじゃないってオブジェクトがいくつかある。 nodelistやstringなど arrayだったらforEach使えるのになって時に無理やり使う方法まとめ。 let moz = 'hello' Array.prototype.forEach.call(moz, (el) => { }) ;[].f…

文字列の取り出し方 string.substr(開始位置, 切り出す長さ ) 戻り値 = 切り出した文字 元の文字列 = 元のまま配列の取り出し方 array.splice(開始位置, 切り出す長さ ) 戻り値 = 切り出した値が配列で入る 元の配列 = 切り出された値いろいろあるけどとりあ…

adobe Xdでお絵かき学ぼうとしたらアンカーやハンドルとかわからないから調べた。 ベジェ曲線というのがあるらしい。 ガバガバ理解でまとめる。 以下、2つの関数の間の点を求めることを線形補間という。 始点と終点を線形補間すると得られる線分を1次ベジェ…

//親 <MyComp v-model="data"/> //子 props:['value'], data:{ return{ data: this.value } } watch:{ data(val){ this.$emit('input',val) } v-model使うと名前がvalueになっちゃうからdataでローカル変数にする。 watchで変更があるたびに親に渡す。 これでカスタムコンポーネント</mycomp>…

vueと相性が良いらしいsvgを触る

//親→子 //親 属性で指定 <MyComp :data="data"/> //子 propsで受け取る props:[data] //子→親 （個人的にわかりやすいやつ） //親 v-modelで受け取る <MyComp v-model="data"/> //子 emitで送る @input=$emit('input',data) //子→子 vuexを使う</mycomp></mycomp>

よくわからないけどパスをrequire()で囲まないと読み込まないことがある。 何でだろう Vue.jsでimgタグのsrcをバインドさせる際の注意点

//store.js const moduleA = { namespaced: true, state: { count: 0, msg: '' }, mutations: { increment (state, num) { state.count += num }, setMsg(state, msg){ state.msg = msg } } }; const moduleB={省略} export default new Vuex.Store({ module…

vuexでいくつかの状態を扱うためにモジュール化してみた。モジュール化すると this.$store.state.モジュール名.stateの値 のようにstateにアクセスする際にモジュール名を入れる必要がある。 アクション、ミューテーション、ゲッターはデフォルトでグローバ…

cssでのハンガーバーメニューと考え方はほぼ同じだが、実装がだいぶ楽。 ついでにbulma(cssフレームワーク)も使えばレイアウトも簡単。 というかbulmaのモーダルのドキュメントに＠clickイベントいくつか付けるだけでできる。 (vueの方でmodalプロパティも必…

切り替えタブ | 基礎から学ぶ Vue.js を読んでいて詰まったこと（本は買って読みました） <TabItem v-for="item in list" v-bind="item" :key="item.id" v-model="currentId"/> v-model カスタムコンポーネントを一つの入力フォームのように使える v-bind 引数を省略するとオブジェクトを渡せるv-bindに関してはオブジェクト名を属性として渡し</tabitem>…

<input v-model="searchText"> ってやるとデータバインディングしてくれる これは以下の構文のシンタックスシュガー <input v-bind:value="searchText" v-on:input="searchText = $event.target.value" > inputがあるたびにvalueを更新 だからカスタムコンポーネントで使うには props: ['value'] v-on:input="$emit('input', 送りたい値)" で使える 親の値を子の入力で変更…

vue-cliのバージョン3を使ってみる。 guiでプラグインの管理ができてとても便利。

Vue.js VueRouter Vuex VueServerRenderer VueMetaをまとめてくれてるらしい 下2つを調べる