Motomichi Works Blog

その日学習したことについて書いている日記です。誰かの役に立ったらそれはそれで嬉しいです。

javascript

JSでテストコードを書く その0002-02 sinon.jsのstubでapiのテストを書いてブラウザでテストを実行する

参考にさせて頂いたページ sinon.jsのstubを使ったajaxテスト - Qiita 以前書いた記事 mochaとchaiを使うことについて以前書いた記事です。 この続きという感じでsinon.jsのstubを使っていきます。 JSでテストコードを書く その0002-01 mochaとchaiでテスト…

JSでテストコードを書く その0003-02 package.jsonをリポジトリのrootに配置せずにCircleCI上でユニットテストを実行する

参考にさせて頂いたページ package.jsonをroot以外のディレクトリに置いてnpm installする方法について node.js - npm - install dependencies for a package in a different folder? - Stack Overflow karmaのconfファイルを指定して--single-runする方法に…

JSでテストコードを書く その0003-01 karma+mocha+chaiの組み合わせでCircleCI上でユニットテストを実行する

参考にさせて頂いたページ 全体的なこと Sprockets管理のJavaScriptを強引にユニットテスト | Money Forward Engineers' Blog karmaのこと Karmaを試してみる - Qiita はじめに Railsで生成されるapplication-xxxxxxxx.jsみたいなのをテストしたい目的があり…

JSでテストコードを書く その0002-01 mochaとchaiでテストを書いてブラウザでテストを実行する

参考にさせて頂いたページ 日本語の参考ページ mochaとchaiの最も基本的な使い方 - 30歳からのプログラミング mocha の checkLeaks と globals の使い方 | それなりブログ mocha公式 Mocha - the fun, simple, flexible JavaScript test framework chai公式 …

JavaScript学習日記 その0005 ブラウザバック時の挙動と対策について考えてみる

参考にさせて頂いたページ ブラウザの戻るボタンで戻ったときに呼ばれるイベントとかキャッシュとかそこらへんのこと - koumiyaの日記 ブラウザバックで元の画面が復元される問題 - Qiita まずa.htmlとb.htmlを作成する a.html a.htmlはbody内に以下のように…

vue.js 2.x その0003-02 トランジション開始前、進行中、完了後、途中キャンセルのタイミングで任意のjs処理を実行する

参考にさせて頂いたページ 公式ページ トランジション効果 - Vue.js 以前書いた記事 vue.js 2.x その0003-01 トランジション効果 簡単なフェードインとフェードアウトをやってみる - Motomichi Works Blog はじめに 以前簡単なトランジションのサンプルを作…

vue.js 2.x その0009 watchで配列(array)や連想配列(object)を監視する

参考にさせて頂いたページ vue.js $watch array of objects - Stack Overflow Vue.js tips - $watch を使ってデータの変更を監視しよう | phiary サンプルコード 連想配列のObjectを丸ごと監視したい場合は、処理はhandler: function(){},の方に記述して、de…

vue.js 2.x その0008 テキストフィールドに数字だけ入力を許可する (郵便番号フィールド)

参考にさせて頂いたページ HTML5におけるinput要素のpattern、type属性のおさらい - Qiita サンプルソース 以下のように書いてみました。 <div id="vue-app"> <h1>Vue.jsのサンプル 静的なページ</h1> <input type="text" v-model="postcode1"> - <input type="text" v-model="postcode2"> </div> <script src="js/vue.js"></script> <script> var vm = new Vue({ el: '…

vue.js 2.x その0007 v-forのindexを使って連番のclassを付与する

参考にさせて頂いたページ vue.js, simple v-for / v-bind to add index to class name - Stack Overflow クラスとスタイルのバインディング - Vue.js サンプルコード 以下のように書いてみました。 <div id="vue-app"> <ul> <li v-for="(item, index) in items" v-bind:class="['hoge-' + index]"> {{item}} </li> </ul> </div> <script src="js/vue.js"></script> <script> …

vue.js 2.x その0006 refで要素を参照する

参考にさせて頂いたページ Vue.js サンプルコード 以下のように書いてみました。 <div id="vue-app"> <button v-on:click="clicked">click here</button> <div> <my-component ref="hogeElm" /> </div> <div ref="fooElm"> foo<br>foo </div> </div> <script src="js/vue.js"></script> <script> new Vue({ el: '#vue-app', data: { }, components: { 'my-com…

vue.js 2.x その0005 lodashのdebounce()とthrottle()で処理の実行を遅らせる

参考にさせて頂いたページ 公式チュートリアルから始めるVue.js vol.1「Markdown エディタ」 - to-R Media Vue 1.x からの移行 - Vue.js Markdown エディタ - Vue.js lodashの_.throttleと_.debounceの使用例 - Qiita はじめに vue.jsの0.xと1.xではdebounce…

vue.js 2.x その0004 アコーディオンを作る(jQueryのslideToggleみたいなものを作る)

サンプルコード(v-forで出力した要素にそれぞれ) v-forで出力した要素それぞれにアコーディオンを入れるイメージで、以下のように書いてみました。 <style> .accordion{} .accordion__trigger{} .accordion__contents-outer-wrap{ transition: max-height 2s; max-h</style>…

vue.js 2.x その0003-01 トランジション効果 簡単なフェードインとフェードアウトをやってみる

参考にさせて頂いたページ transitionについて トランジション効果 - Vue.js 動的コンポーネントについて コンポーネント - Vue.js サンプルコード 以下のような感じで書いてみました。 <style> .hoge-enter-active, .hoge-leave-active { transition: opacity 2s }</style>…

vue.js 2.x その0002 v-forで表示しているリストの並べ替え

参考にさせていただいたページ sortについて JavaScript つい忘れてしまう配列のソート方法 - Qiita v-forについて リストレンダリング - Vue.js ソースコードサンプル すごく適当にデータを用意して、以下のように書いてみました。 <div id="sort-app"> <h1>Vue.jsの練習 静的なペ</h1></div>…

vue.js 2.x その0001 カスタムフィルタ(Custom Filters)を登録する基本サンプル

参考にさせて頂いたページ カスタムフィルタ - vue.js Vue 1.x からの移行 - Vue.js Vue.js 2.xのフィルタについて調べてみた - Qiita ソースコードサンプル1 ソースコードサンプルは以下の通り。 <div id="filter-app"> <input type="text" v-model="message"> <div>{{message | reverse}}</div> </div> <script src="js/vue.js"></script> <script> Vue.filter('reverse',…

JSでテストコードを書く その0001 まずは記事を色々読んでみる

参考にさせて頂いたページ Mocha公式 Mocha - the fun, simple, flexible JavaScript test framework Chai公式 Chai 概要が書かれている日本語のページ 以下の三つと、そこからリンクされているページを読んだら全く知識の無い状態からなんとなくわかってき…

npmでeslint-config-airbnbを導入してみる

参考にさせて頂いたページ ESLintでReactとES2015の構文チェック(eslint-config-airbnb) - dackdive's blog ESLintをAtomに導入し、Reactの構文にも対応したAirbnbのJSスタイルガイドを使う | mae's blog これまでのこと 以前「gulp-eslintの.eslintrcを作成…

gulp-eslintの.eslintrcを作成する

参考にさせて頂いたページ .eslintrcを公開してくださっているページ .eslintrc晒す - Qiita eslint eslint gulp-eslint gulp-eslint babelとか関係なくeslintについて包括的な基礎のこと [GitHub 奮闘記] gulp で eslint 設定とコード チェック環境の共有 -…

JavaScript学習日記 その0004 jQueryの$.ajaxでjsonpを取得する

参考にさせて頂いたページ 今回これを参考に動かしてみた jQuery.ajaxでphpから出力したjsonpを扱った時のメモ | ミラボ jsonpって何なのか JSONPで悩むある程度の人々へ はじめに ドメインが違うサーバーから、オブジェクトのデータを取得したい場合はdataT…

JavaScript学習日記 その0003-01 jQuery UIのDatepicker | 曜日ごとに色を変える、任意の座表に絶対配置する、インラインに配置する

参考にさせて頂いたページ 絶対表示の位置変更について position() jQuery UI Datepicker(カレンダー)表示位置の調整 | Eniod's Blog jQuery UI Datepicker(カレンダー)表示位置の変更 サンプル .position() | jQuery UI API Documentation jQuery UI の…

JavaScript学習日記 その0002 ES5入門とES2015入門のこと

参考にさせて頂いたページ ES5について ECMAScript 5 (ES5) 新機能 まとめ - galife ES2015(ES6)な時代だからこそ、ES5を改めて調べたJavaScript初級者のメモ - Qiita ES2015について ES2015 (ES6)についてのまとめ - Qiita 春からはじめるモダンJavaScript …

JavaScript学習日記 その0001 thisとかオブジェクト指向、call、applyのこと

参考にさせて頂いたページ javascriptにおけるpublicとprivateについて // Speaker Deck 最強オブジェクト指向言語 JavaScript 再入門! [A 3]SSJSでも使える!Javascriptでオブジェクト指向プログラミング入門 applyとcallの使い方を丁寧に説明してみる - …

vue.js 1.0 その0001-001 公式ドキュメントを読む(ガイド編) 自分用インデックス

参考にさせて頂いたページ vue.js はじめに 公式ドキュメントのガイドを見返すときに、「あれはどこに書いてあったかなー?」というのが、左カラムの大きい見出しだけ見てもまだよくわからなかったりするので、小さい見出しを展開したうえで少し要約して、と…

JavaScriptのfor文でオブジェクトの要素数だけループする

参考にさせて頂いたページ for..in文 - 繰り返し処理 - JavaScript入門 keyの取得と出力 例として以下の通り。 var obj = { "hoge" : "hoge", "foo" : "foo", "fuga" : "fuga", } for(var key in obj){ console.log(obj[key]); } 最近は、モダンなブラウザ向…

さくらvpsとcakephp2.6.7で開発日記 その0018 jQueryを使用してAjaxでテーブルデータを取得する

参考にさせて頂いたページ CakePHPとJSONでAjax用APIを作る方法 CakePHPでjQueryのAjaxを使う方法 以前作成したお問い合わせフォーム 以前以下の記事でお問い合わせフォームを作成したので、試しにcontactsテーブルのデータを非同期で取得してみようと思う。…

AngularJS1.x その0014 DI(依存性注入)コンテナー機能を使う

参考にさせて頂いたページ AngularJSの依存性注入を利用するには? - Build Insider AngularJSのDIの仕組み、minify対策は覚えておこう! - Qiita 依存性注入(DI) | AngularJS 1.2 日本語リファレンス | js STUDIO DIを使用しない記述 これまではcontroller…

AngularJS1.x その0013 標準モジュール

参考にさせて頂いたページ AngularJSでモジュールを定義するには? - Build Insider 標準モジュール 自分で作成するモジュールの他に標準で用意された以下のようなモジュールがあるようです。 ng ngAnimate ngAria ngCookies ngMessages ngMock ngMockE2E ng…

AngularJS1.x その0012 モジュールの作成とその構成部品に何があるのか見てみる

参考にさせて頂いたページ AngularJSでモジュールを定義するには? - Build Insider モジュールの構成部品としてcontrollerを登録する controllerだけは以前やった。 AngularJS1.x その0004 myAppモジュールを作成して、その構成部品のcontrollerとしてSampl…

AngularJS1.x その0011 タグを自作する(Custom Elementsを作成する) templateとng-transclude

参考にさせて頂いたページ Angular.jsについて AngularJSカスタムディレクティブのtranscludeオプション、ng-transcludeディレクティブの使用例 | VPSサーバーでWebサイト公開 備忘録 ~Linux、MySQLからAJAXまで AngularJS Directive なんてこわくない(その…

AngularJS1.x その0010 Controller自身のDOMを選択したり、その他のプロパティを取得する

参考にさせて頂いたページ javascript - How do i get current scope dom-element in AngularJS controller? - Stack Overflow ng-app.jsの記述内容 例として以下の通り。 // myAppモジュールを作成 var app = angular.module('myApp', []); // myAppモジュ…