Javascript

Javascript関連

VueのDataにファンクションをセット
Vuejs

VueのDataにファンクションをセット

Vueで、今まで全然気がつかなかったというか使ってなかったというかこんな使い方ができたのね😅 アプリ共通の関数ってやっぱ必ずありますよね。 Vueの基盤オブジェクトを作っておいてextendするような実装を今までしてたけど、ありモノをそのまま使いたいとかもあるじゃないですか。momentとかunderscoreとか。 今までは、結局、Vueの基盤オブジェクトを作ってそこにラップした関数を定義してたわけですよ。 仮に以下のような使い回ししたい関数があった場合。 $myfunctions = { parsehoge: function(val) { /* ゴニョゴニョ */ }, formathoge: function(val) { /* ゴニョゴニョ */ }, } 今までは... $vuebase = { methods: { parsehoge: function(val) { return $myfunctions.parsehoge(val); }, formathoge:

Javascriptのawait/asyncのloopでハマる
Javascript

Javascriptのawait/asyncのloopでハマる

Javascriptのawait/asyncのループ処理でハマったのでメモ。 深く考えず、というかこう書けばいいと勝手に思い込んでたが以下のコードだとawait axios.postが非同期で動いてしまう。 await this.appendix.map((blob) => { var config = { header: { "Content-Type": "multipart/form-data", }, }; try { var data = new FormData(); data.append("

VuejsからスレッドセーフにjQueryでの操作を行う
Javascript

VuejsからスレッドセーフにjQueryでの操作を行う

Vuejsの仮想DOMがレンダリングされる前にjQueryでのDOM操作を行うとスレッドセーフではないので色々と問題が発生する。よくsetTimeoutで実行を遅らせたりするのを見かけるが、クライアント環境でうまく行ったり行かなかったり。 全てにおいて完全と言うわけではないが、VuejsにはnextTickという仮想DOM構築後のコールバックがあるのでそれを利用してjQueryの操作を行うという技。 onEditClick: function (event) { //Vue側のDOM変更が入る操作; .... this.$nextTick(() => { //jQueryでDOM変更が入る操作 $('#foo').hide(); $('#hoge').show(); }); },

VS Codeでsailsjs開発
Javascript

VS Codeでsailsjs開発

5年ほど前、オリンピックに向けて飲食店のメニューをバイリンガル表示するWEBアプリを作ろうかと、その時nodejsでフレームワークに採用したsails。当時はバージョン0.10とか0.11とかだったけど痒い所に手が届くもやりすぎないフレームワークでかなり気に入って使ってた。ドキュメントも英語だけど結構ちゃんと書いてくれてたしね。 5年ぶりそんなsailsjsを弄ってみる(特に作るもんは決めてないけど) 5年前は、Macでviメインで開発してたんだけど、今回はWindows、Linux、Mac環境で動くVS Codeを利用してみる。 sailsjsのバージョンは1.2.4。開発環境は、会社のWindowsマシン。 Sails本家 nodejsのインストール nodejsからダウンロードしてまずはnodejsのインストール。 sailsjsのインストール nodejsをインストールすればnpmも利用できるようになるので、以降必要なパッケージはnpmでインストールです。 Powershellを立ち上げて npm install sails

Javascript

Angulrajsのng-gridでDatePicker

Angulrajsのng-gridで編集時にDatePickerを使おうとしてハマったのでメモ。 解決ネタは、http://blog.mitsuruog.info/2015/02/input-date-trouble-tips-in-angularjs.html ng-gridでは、カラムの編集用のコンテンツをテンプレートとして設定できるので、columnDefsで editableCellTemplate : '<input type="date" ng-class="\'colt\' + col.index" ng-input="COL_FIELD" ng-model="COL_FIELD" data-date-format="yyyy/MM/ddTHH:mm: