javascript
参考にさせていただいたページ 【JavaScriptの応用】thisの振る舞い | ワードプレステーマTCD
参考にさせていただいたページ Day.js公式 GitHub - iamkun/dayjs: ⏰ Day.js 2kB immutable date-time library alternative to Moment.js with the same modern API Installation · Day.js その他 Day.jsの簡単な使い方 便利な日付操作ライブラリ parse '202…
参考にさせていただいたページ InputEvent#isComposing とIME有効/無効の検出 · GitHub たにしきんぐダム はじめに 以下のタイミングで任意の処理を実行したい。という動機から調査を始めました。 IMEを伴わない半角文字入力や文字削除などをしたときは即座…
参考にさせていただいたページ using Symbol causes exception in IE11 · Issue #514 · zloirock/core-js · GitHub reactjs - 'Symbol' is undefined in IE after using babel - Stack Overflow 解決したい問題 IE11で「'Symbol' は定義されていません。('S…
参考にさせて頂いたページ 半角かどうかの判定について 半角を判別する 全角文字、あるいは半角文字が含まれているかチェックする | JavaScript Tips 半角カナかどうかの判定について Unicode 内のそれぞれの文字種の範囲 - みちのぶのねぐら 工作室 旧館 第…
サンプル textareaタグに複数行の文字列が入力された場合などに以下のようにします。 let str = event.target.value; str = str.replace(/\r?\n/g, '');
参考にさせて頂いたページ webpack.config.jsについて Configuration | webpack eslintについて Command Line Interface - ESLint - Pluggable JavaScript linter eslint-loaderのoptionsについて GitHub - webpack-contrib/eslint-loader: eslint loader (f…
参考にさせていただいたページ 【webpack】vue&type=style&index=0&lang=scss - Qiita プリプロセッサの使用 · vue-loader TextField.vueを編集する src/javascripts/vue_applications/common/components/TextField.vueのtemplate に以下の通り追記します。 <div class="mod-error-messages"> <ul class="mod-error-messages__list"></ul></div>…
参考にさせて頂いたページ テストを実行する環境の構築 GitHub - vuejs/vue-test-utils-jest-example: Example project using Jest + vue-test-utils together GitHub - babel/babel-bridge: A placeholder package that bridges babel-core to @babel/core.…
はじめに Windowsでもできます。 MacやUbuntuなどでもできると思います。 これから何回かに分けてnpm initするところから、以下のようなことをできる環境を構築していきます。 webpack4 + babel7 を使ってビルド vue-test-utils + jest を使ってテスト実行 e…
参考にさせて頂いたページ vue-loaderを使うときのwebpack.config.jsの記述内容について Getting Started | Vue Loader .babelrcについて 1年前に作ったフロントエンド環境を色々新しくした - Qiita 包括的にwebpack 4 入門 webpack 4 入門 - Qiita 包括的に…
はじめに 以下の記事で書いたコードを少しマシな感じに書き直しました。 vue.js 2.x その0004 アコーディオンを作る(jQueryのslideToggleみたいなものを作る) - Motomichi Works Blog サーバーサイドから動的な値がwindow.itemsで書き出される想定で書いてい…
参考にさせて頂いたページ sinon.jsのstubを使ったajaxテスト - Qiita 以前書いた記事 mochaとchaiを使うことについて以前書いた記事です。 この続きという感じでsinon.jsのstubを使っていきます。 JSでテストコードを書く その0002-01 mochaとchaiでテスト…
参考にさせて頂いたページ package.jsonをroot以外のディレクトリに置いてnpm installする方法について node.js - npm - install dependencies for a package in a different folder? - Stack Overflow karmaのconfファイルを指定して--single-runする方法に…
参考にさせて頂いたページ 全体的なこと Sprockets管理のJavaScriptを強引にユニットテスト | Money Forward Engineers' Blog karmaのこと Karmaを試してみる - Qiita はじめに Railsで生成されるapplication-xxxxxxxx.jsみたいなのをテストしたい目的があり…
参考にさせて頂いたページ 日本語の参考ページ mochaとchaiの最も基本的な使い方 - 30歳からのプログラミング mocha の checkLeaks と globals の使い方 | それなりブログ mocha公式 Mocha - the fun, simple, flexible JavaScript test framework chai公式 …
参考にさせて頂いたページ ブラウザの戻るボタンで戻ったときに呼ばれるイベントとかキャッシュとかそこらへんのこと - koumiyaの日記 ブラウザバックで元の画面が復元される問題 - Qiita まずa.htmlとb.htmlを作成する a.html a.htmlはbody内に以下のように…
参考にさせて頂いたページ 公式ページ トランジション効果 - Vue.js 以前書いた記事 vue.js 2.x その0003-01 トランジション効果 簡単なフェードインとフェードアウトをやってみる - Motomichi Works Blog はじめに 以前簡単なトランジションのサンプルを作…
参考にさせて頂いたページ vue.js $watch array of objects - Stack Overflow Vue.js tips - $watch を使ってデータの変更を監視しよう | phiary サンプルコード 連想配列のObjectを丸ごと監視したい場合は、処理はhandler: function(){},の方に記述して、de…
参考にさせて頂いたページ 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, 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 サンプルコード 以下のように書いてみました。 <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 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…
2018年03月22日追記 アコーディオンひとつ分をコンポーネント化して、コンポーネント内だけで状態管理する方が良いので書き直しました。 vue.js 2.x その0004-02 アコーディオンを作る(jQueryのslideToggleみたいなものを作る) - Motomichi Works Blog サン…
参考にさせて頂いたページ transitionについて トランジション効果 - Vue.js 動的コンポーネントについて コンポーネント - Vue.js サンプルコード 以下のような感じで書いてみました。 <style> .hoge-enter-active, .hoge-leave-active { transition: opacity 2s }</style>…
参考にさせていただいたページ sortについて JavaScript つい忘れてしまう配列のソート方法 - Qiita v-forについて リストレンダリング - Vue.js ソースコードサンプル すごく適当にデータを用意して、以下のように書いてみました。 <div id="sort-app"> <h1>Vue.jsの練習 静的なペ</h1></div>…
参考にさせて頂いたページ カスタムフィルタ - 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',…
参考にさせて頂いたページ Mocha公式 Mocha - the fun, simple, flexible JavaScript test framework Chai公式 Chai 概要が書かれている日本語のページ 以下の三つと、そこからリンクされているページを読んだら全く知識の無い状態からなんとなくわかってき…
参考にさせて頂いたページ ESLintでReactとES2015の構文チェック(eslint-config-airbnb) - dackdive's blog ESLintをAtomに導入し、Reactの構文にも対応したAirbnbのJSスタイルガイドを使う | mae's blog これまでのこと 以前「gulp-eslintの.eslintrcを作成…
参考にさせて頂いたページ .eslintrcを公開してくださっているページ .eslintrc晒す - Qiita eslint eslint gulp-eslint gulp-eslint babelとか関係なくeslintについて包括的な基礎のこと [GitHub 奮闘記] gulp で eslint 設定とコード チェック環境の共有 -…