JavaScript

【Vue.js #1 Advent Calendar 2017】Vue.js + Element でフォームダイアログをいい感じに呼び出す【24日目】

Vue.js #1 Advent Calendar 2017 24日目の記事になります。 少し前に Electron + Vue.js + Element でネイティブアプリの開発を行っていたのですが、その時に利用したコードなどを簡単に紹介してみようかと思います。 Element とは Element(element-ui) とは…

node-prune を使ってみた

JavaScript で開発を行っていると npm でモジュールを導入する、モジュールを導入すると node_modules が肥大化する、node_modules が肥大化すると dropbox の同期が死ぬ。 ってことで割と node_modules が肥大化するのは切実に困っていたんですが、最近公開…

Vue で親の値が変わったら子コンポーネントも更新する

Vue で親が子コンポーネントに対して値を渡す場合、以下のように props を介して渡します。 index.html <script type="text/x-template", id="child"> <div> <input v-model="message"> <a>Child message is: {{ message }}</a> </div> </script> <div id="example"> <input v-model="message"> <a>Parent message is: {{ message }…</a></div>

JavaScript で Array と Object がネストしたデータを展開したかった

以下のような Object が保持してる配列をいい感じに展開したかった。 元データ const obj = [ { name: "name1", children: [ { name: "name2" }, { name: "name3", children: [ { name: "name4" }, { name: "name5" }, ] }, ], }, { name: "name6" } ] 結果 …

JavaScript で数値をソートするときの注意

JavaScript 界隈では常識だと思うんですが、知らなかったので覚書。 配列のソート行う Array.prototype.sort() 関数は、 compareFunction (比較関数) が与えられなかった場合、要素はそれぞれの文字列に変換したものを比較して辞書 (あるいは電話帳。数的で…

node.js で全ての階層のディレクトリを作成する

node.js の Path の mkdirSync でディレクトリを作成する場合、階層のディレクトリが存在しない場合は新しいディレクトリはつくってくれません。 const FS = require("fs-extra"); // hoge, foo, bar というディレクトリは存在しない場合 FS.mkdirSync("./ho…

lodash を使って JavaScript でオブジェクトのコピーを行う

昨日書いたオブジェクトのコピーですが、lodashというユーティリティライブラリを使うのが手っ取り早そう // npm install lodash -g const _ = require("lodash"); const obj = { // Object のプロパティ name: { sei: "yamada", mei: "tarou" }, age: 24 };…

JavaScript でオブジェクトのコピー

さて、JavaScript ではオブジェクトの値を代入した場合に参照としてコピーされます。 const obj = { name: "tarou", age: 24 } // obj を代入する const other = obj; // コピーした値を変えると other.name = "hanako"; other.age = 17; // コピー元のオブ…

JavaScript でセミコロンを省略した場合の弊害

JavaScript でセミコロンを付けるべきか否かっていうは割と宗教的な違いがあると思います。 じゃあ、実際セミコロンをつけなかった場合にどういう弊害があるのか、というのを簡単に調べてみました。 その中で気になった記述をいくつかピックアップしてみます…

npm install で github のリポジトリからインストールする

npm install で github のリポジトリを指定してインストールする方法の覚書。 $ npm install osyo-manga/thomash-node-audio-metadata また #{branch 名} を付けることで任意のブランチからインストールすることも出来ます。 $ npm install osyo-manga/thoma…

ES2015(ES6)以降 の JavaScript でオブジェクトのキーに変数を使う

次のように JavaScript でオブジェクトのキーに変数を使おうとしても当然ですが変数は展開はされません。 const key = "age"; const value = 14; const obj = { key : value }; console.log(obj); // => { key: 14 } 通常このような場合は obj[key] = value …

browser-sync を使ってお手軽にライブリロードする

今までライブリロードといえば gulp を使っていたんですが、 『動作確認用のサンプルコードとかでいちいち gulpfile.js を用意するのめんどいなー』 と思い、もっとお手軽にライブリロード出来ないか探していたんですが Browsersync というのがよさそうでし…

Vue.js + UIkit でアイコンが2つ表示される場合の対処方法

Vue.js + UIkit でアイコンを表示させようとしたら2つ表示される事があったので対処方法を覚書。 再現する環境 Vue : 2.4.4 UIkit : 3.0.0 beta 30 jQuery : 3.2.1 再現コード <html> <head> <title>Welcome to Vue</title> </head></html>

Electron で jQuery 使う場合の注意点

Electron で UIkit を使っていたらハマったので覚書。 問題点としては、 Electron で jQuery を使おうとするとエラーが出た 上記の問題を解決した結果、gulp のライブリロードが動作しなくなった という2つの不具合が発生した。 先に書いておくと手元では下…