ocamlって面白いなー javascriptに若干似てるなー とか思ってたらocamlをjavascriptっぽくかけるreasonって言語があることを知った。ocamlの考え方のままjavascriptと同じようにかけるからいいと思う。 いくつか例 ocamlだと let add1 = func x -> x+1 {name…

techblog.scouter.co.jpこんなふうに使うのか。 とても参考になった。

firebaseの設定はまとめて外部ファイルに。 firestoreへのaddとかlistenerはvuexに。 コンポーネントではlistenerの起動と停止を付け加えた。こう分けるとわかりやすいし、前のwebストレージ版からそんなに変更せずにできた。 listenerとかはvuexのactionに…

vueでデータを保存したいとき。 vuexのstateであればめっちゃ簡単に保存できる$ npm install vuex-persistedstate import createPersistedState from "vuex-persistedstate";const store = new Vuex.Store({ // ... plugins: [createPersistedState()] });こ…

vueでcrudアプリを作ってみた。 railsのscaffoldでできるのとほぼ同じ感じをイメージ。 rails formのアクションをcontrollerで受け取る controllerでdbからデータ取り出す。 取り出したデータをviewに渡す。vue formのアクションを同じファイルのmethodsで受…

linuxのコマンドやgitの使い方から解説。 web開発を本格的に初めてみたいって人向け。 とてもわかり易いし、自分もここで躓いたなってとこが解説されててとても良い。 こんな感じの教材で授業が進めてもらえたら、誰でもまずまずのものが作れるようになると…

//store.js //stateに変数、mustaitonsにstateのsetterを書く //exportにモジュール名を書く const countNum = { namespaced: true, state: { count: 0, }, mutations: { increment: state => state.count++, decrement: state => state.count--, }, } const…

javascriptを学び始めたときに読み、最近ぱらっと読み返してみた。 初期の頃はとりあえず写経をしていた。 四角の図形はこう書くんだー、キーの入力はこう受け取るんだーとか知らないことをしれてよかった。でも、今読み返してみると初心者には難しい気がす…

vm.$forceUpdate()2次元配列とかはvm.$setでリアクティブに変更できなそう。 そんなときはvm.$forceUpdateでdataに基づいてdomを再描画させる。

javascriptのオブジェクトは参照渡しである。 直接オブジェクトを代入するとまずいんだろうと思ってたけどそんなもんじゃなかった。 function takePlace(arr) { arr[1] = 9 return arr } let arr = [1,2,3] let arr2 = takePlace(arr) console.log(arr); // …

Font Awesome5のjavascript版だとマスク機能が使える。 2つのアイコンを重ねて切り抜ける。Font Awesomeはcss版とjs版があるけどjs版のほうが多機能だからとりあえずjs入れとけばおk

動的に変わる部分はdataを経由するクリックされたら画像が変わる →dataにsrc用のurlを用意特定の条件でclassを付け替える →dataにclass付け替え用のboolen値を用意data自体をいじり、v-bindや{{}}でdataを表示 target.srcとかclassList.removeとかは使うべき…

今気づいたバッドプラクティスについてまとめv-forで要素作って、クリックされた要素の画像を変えるってものを作ろうとしたとき $event.target.srcを変えてたんだけどこれはDOMにアクセスしてるから良くないんだろうね。 実際読みづらいし。srcに入れるよう…

javascriptでの配列宣言において、大きさと初期値を指定したい場合 let arr = Array(10).fill(false) これで長さ10,初期値falseの配列ができる

<div v-for="(card,idx) in cards"> <button @click="clicked($event)" :data-index="idx">ボタン</button> </div> methods:{ clicked(e){ console.log(e.target.dataset.index) }

vue.jsでクリックされた"その要素"を知りたいってときjavascriptだと event.targetで取得できる vue.jsでもevent.targetで取得できる //javascript addEventListener('click', (event) => { console.log(event.target }) //vue.js <div @click="clicked($event)"> </div> //clickedだけでもいいん…

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

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

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

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(開始位置, 切り出す長さ ) 戻り値 = 切り出した値が配列で入る 元の配列 = 切り出された値いろいろあるけどとりあ…