読者です 読者をやめる 読者になる 読者になる

MotomichiWorksBlog

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

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 の…

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モジュ…

jQueryを使わずにHTML要素を参照する

参考にさせて頂いたページ JavaScriptについて検索すると、jQueryを使った方法ばかりがヒットしがちなので、忘れないようにリンクを控えさせて頂いた。 【DOM連載#1】JavaScriptのDOMでHTML要素を参照 - Noise of Web Programming

AngularJS1.x その0009 イベントリスニングの開始と任意のタイミングでイベントを発生させる方法 $on, $emit, $broadcast

参考にさせて頂いたページ 【AngularJS】 $on, $emit, $broadcast | COTeggのバケツ ng-app.jsの記述内容 例として以下の通り。 // myAppモジュールを作成 var app = angular.module('myApp', []); // myAppモジュールにParentCtrlコントローラーを登録 app.…

AngularJS1.x その0008 コントローラーを入れ子にして、親子関係を作る

参考にさせて頂いたページ AngularJSのControllerをネストしたときのスコープ - hokaccha.hamalog v2 ng-app.jsの記述内容 例として以下の通り。 // myAppモジュールを作成 var app = angular.module('myApp', []); // myAppモジュールにParentCtrlコントロ…

AngularJS1.x その0007 a要素をクリックしたときに遷移させないようにする

参考にさせていただいたページ AngularJS ng-click で preventDefault したい - Blogaomu ng-app.jsの記述内容 例として以下の通り。 // myAppモジュールを作成 var app = angular.module('myApp', []); // myAppモジュールにSampleCtrlコントローラーを登録…

AngularJS1.x その0006 クリックイベントが発生した要素の$eventオブジェクトの取得

参考にさせて頂いたページ AngularJSのDOMイベント処理と注意すべきディレクティブを知り、HTMLテンプレートを使いこなそう (1/3):CodeZine(コードジン) ng-app.jsの記述内容 例として以下の通り。 // myAppモジュールを作成 var app = angular.module('m…

AngularJS1.x その0005 Controller as構文を使う

参考にさせて頂いたページ AngularJSの$scopeをController as で置き換えるべき理由 - Qiita ng-app.jsの記述内容 // myAppモジュールを作成 var app = angular.module('myApp', []); // myAppモジュールにSampleCtrlコントローラーを登録 app.controller('S…

AngularJS1.x その0004 myAppモジュールを作成して、その構成部品のcontrollerとしてSampleCtrlを登録して使う

参考にさせて頂いたページ AngularJSでモジュールを定義するには? - Build Insider 今回やること AngularJS1.x その0002 ng-controllerを使う - MOTOMICHI WORKS BLOG の記事おいて非推奨な記述とされていた記述のまま、 AngularJS1.x その0003 ng-clickデ…

AngularJS1.x その0003 ng-clickディレクティブ

参考にさせて頂いたページ AngularJS AngularJS: イベントリスナーを登録するには?(ng-clickなど) - Build Insider index.htmlの作成とその記述内容 例として以下の通り。 <div ng-controller="SampleCtrl"> <input type="text" ng-model="name" /> <button ng-click="onclick()">送信</button> <div>{{msg}}</div> </div> ng-app.jsの作成とその記述内容 例として以下の通り。 var Samp…

AngularJS1.x その0002 ng-controllerを使う

参考にさせて頂いたページ コントローラーについて | AngularJS 1.2 日本語リファレンス | js STUDIO AngularJS TIPS - Build Insider Controllerの役割 参考にさせて頂いたページによると コントローラーは下記のようなことをするのに使用されます。 ・ $sc…

AngularJS1.x その0001 バインディングしてみる

参考にさせて頂いたページ 公式ドキュメント(英語) AngularJS — Superheroic JavaScript MVW Framework とりあえず一通り勉強するのに良さそう AngularJS TIPS - Build Insider js STUDIO のAngular1.2日本語ドキュメント AngularJS 1.2 日本語リファレンス …

bodyがwindowより短いときにfooterを下部にposition:fixedで配置する

footer.position.changer.jsの記述内容 jQueryと一緒に以下を読み込みます。 var FOOTER_ELEMENT = $('#js-Footer'); var resizedTimer = false; //footerのpositionを fixed / static に切り替える関数 var FooterPositionChanger = function(){ var _windo…

React.jsその0005 ボタンのonClickイベントでclassを取ったり付けたりする

バージョン React v0.13.2 react_sample.htmlの記述内容 <html> <head> <script src="build/react.js"></script> <script src="build/JSXTransformer.js"></script> <script type="text/jsx" src="app/react_sample.js"></script> </head> <body> <style type="text/css"> .example{ display:none; } .is-show{ displ…</body></html>

Riot.jsその0006 親子関係とそのプロパティへのアクセス

参考にさせて頂いたページ Riot API バージョン Riot v2.0.15 riot-sample.htmlの記述内容 <body> <elm-example hoge="parent_value"></elm-example> <script src="./js/core/riot+compiler.js"></script> <script type="riot/tag" src="./js/tags/riot-sample.tag"></script> <script> riot.mount('elm-example'); </script> </body> riot-sample…

Riot.jsその0005 イベントリスニングの開始と任意のタイミングでイベントを発生させる方法

参考にさせて頂いたページ Riot API vue.jsその0007 イベントリスニングの開始と任意のタイミングでイベントを発生させる方法 - MOTOMICHI WORKS BLOG バージョン Riot v2.0.15 riot-sample.htmlの記述内容 <body> <elm-example></elm-example> <script src="./js/core/riot+compiler.js"></script> <script type="riot/tag" src="./js/tags/riot-sample.tag"></script> <script> riot.…</body>

Riot.jsその0004 カスタムタグの中に任意のhtml要素を入れ子にする <yield/>

参考にさせて頂いたページ Riot API バージョン Riot v2.0.15 riot-sample.htmlの記述内容 <body> <elm-example thisid="1" title="タイトル1"> <div>inner-content-1</div> </elm-example> <elm-example thisid="2" title="タイトル2"> <div>inner-content-2</div> </elm-example> <script src="./js/core/riot+compiler.js"></script> </body>

Riot.jsその0003 属性を付与して、opts.hogeとして使用する

参考にさせて頂いたページ Riot 2.0 | A React-like UI library Riot.js 2.0 を触ってみた — まだReactで消耗しているの? - Qiita バージョン Riot v2.0.15 riot-sample.htmlの記述内容 <body> <elm-example AAAAA="AAAAAです。" bbbbb="bbbbbです。" cc_cc_c="cc_cc_cです。"></elm-example> <script src="./js/core/riot+compiler.js"></script> </body>

Riot.jsその0002 riot.mountするときにoptsを渡す

参考にさせて頂いたページ Riot 2.0 | A React-like UI library Riot.js 2.0 を触ってみた — まだReactで消耗しているの? - Qiita バージョン Riot v2.0.15 riot-sample.htmlの記述内容 <body> <elm-example></elm-example> <script src="./js/core/riot+compiler.js"></script> <script type="riot/tag" src="./js/tags/riot-sample.tag"></script> <script> riot…</body>

Riot.jsその0001 Riot.jsを使う準備とカスタムタグの定義

参考にさせて頂いたページ Riot 2.0 | A React-like UI library Riot.js 2.0 を触ってみた — まだReactで消耗しているの? - Qiita バージョン Riot v2.0.15 ダウンロードする 公式サイトで、riot+compiler.jsをダウンロードしてみた。 riot-sample.htmlの作…

React.jsその0004 input type="text" の要素に入力した値をbutton要素のonClickイベントで反映する(UnControlled Component)

参考にさせて頂いたページ reactjs - React.jsでFormを扱う - Qiita バージョン React v0.13.2 react_sample.htmlの記述内容 <html> <head> <script src="build/react.js"></script> <script src="build/JSXTransformer.js"></script> <script type="text/jsx" src="app/react_sample.js"></script> </head> <body> </body></html>

React.jsその0003 input type="text" の要素に入力した値をonChangeでリアルタイムに反映する(Controlled Component)

参考にさせて頂いたページ reactjs - React.jsでFormを扱う - Qiita 今話題のReact.jsはどのようなWebアプリケーションに適しているか? Introduction To React─ Frontrend Conference | HTML5Experts.jp バージョン React v0.13.2 react_sample.htmlの記述…

React.jsその0002 scriptを外部ファイルに切り出す

参考にさせて頂いたページ いま最も注目のライブラリ「React.js」でシングルページアプリケーションを作ってみよう! 【前編】 (2/3):CodeZine バージョン React v0.13.2 前回のreact_sample.htmlの記述内容 <html> <head> <script src="build/react.js"></script> <script src="build/JSXTransformer.js"></script> </head> <body> <div id="example"></div> </body></html>

React.jsその0001 公式サイトのHello, worldをやってみる

参考にさせて頂いたページ Getting Started | React いま最も注目のライブラリ「React.js」でシングルページアプリケーションを作ってみよう! 【前編】 (1/3):CodeZine React.jsチュートリアル【日本語翻訳】 | mae's blog バージョン React v0.13.2 ダ…

vue.jsその0013 兄弟にあたるオブジェクトが発したイベントをリスニングする(兄弟にイベントを伝搬する)$broadcast

参考にさせて頂いたページ Instance Methods - vue.js バージョン Vue.js v0.11.5 参考にした過去記事と$broadcast vue.jsその0012 インスタンスの親子関係 $parent - MOTOMICHI WORKS BLOGで$parentとか_children[0]とか_children[1]について書きました。 v…

vue.jsその0012 インスタンスの親子関係 $parent

参考にさせて頂いたページ Component System - vue.js 体で覚えるVue.js - インスタンスメンバ編 〜 JSおくのほそ道 #024 - Qiita Vue.js v0.11の変更点(予定)まとめ - blog.koba04.com バージョン Vue.js v0.11.5 サンプルソース Component System - vue.js…

vue.jsその0011 Vue.component()で登録したcomponentを入れ子にする

バージョン Vue.js v0.11.5 今回やってみたこと vue.jsその0008 Component Systemを使用して、html要素のコンポーネントを作る - MOTOMICHI WORKS BLOG vue.jsその0009 Vue.component()で登録したcomponentにparamAttributesで属性を付与する - MOTOMICHI WO…

vue.jsその0010 チェックボックスをチェックしたら or テキストフォームに一文字でも入ったらボタンを有効化する

参考にさせて頂いたページ Vue.jsでチェックされたら or 入力されたら送信可能にするボタンを実装する方法 | tech.ewdev.info バージョン Vue.js v0.11.5 v-attrの中に条件式を入れられる v-attrは <button v-attr="disabled: !agree">Submit</button> とか <button v-attr="disabled: textValue == ''">Submit</button> みたいな感じで、条件式がtrueのときdi…

vue.jsその0009 Vue.component()で登録したcomponentにparamAttributesで属性を付与する

参考にさせて頂いたページ Options - vue.js バージョン Vue.js v0.11.5 サンプルソース(属性を適用する) 例えば<hoge-hoge class="aaaaa" hoge="bbbbb"></hoge-hoge>みたいな感じで普通に属性を付ければ付く <div id="sample"> <hoge-hoge class="aaaaa" hoge="bbbbb"></hoge-hoge> <p v-component="hoge-hoge" class="ccccc" hoge="ddddd"></p> </div>

vue.jsその0008 Component Systemを使用して、html要素のコンポーネントを作る

参考にさせて頂いたページ vue,jsについて Component System - vue.js 体で覚えるVue.js - ViewModel生成編 〜 JSおくのほそ道 #022 - Qiita Custom Elementsについて Custom Elements: HTML に新しい要素を定義する - HTML5 Rocks バージョン Vue.js v0.11.…

vue.jsその0007 イベントリスニングの開始と任意のタイミングでイベントを発生させる方法

参考にさせて頂いたページ Instance Methods - vue.js 体で覚えるVue.js - インスタンスメンバ編 〜 JSおくのほそ道 #024 - Qiita 体で覚えるVue.js - ViewModel生成編 〜 JSおくのほそ道 #022 - Qiita バージョン Vue.js v0.11.5 サンプルソース <div id="sample"> <p v-on="click:hoge">click here</p></div>…

vue.jsその0006 Instance Propertiesについて

参考にさせて頂いたページ Instance Properties - vue.js 体で覚えるVue.js - インスタンスメンバ編 〜 JSおくのほそ道 #024 - Qiita バージョン Vue.js v0.11.5 Instance Properties var vm = new Vue({/* Options */}); みたいな感じでインスタンスを初期…

vue.jsその0005 Optionsについて

参考にさせて頂いたページ Options - vue.js バージョン Vue.js v0.11.5 オプションを渡してインスタンスを初期化 インスタンスを初期化する際にどのようなオプションを渡すかを今回は書いていきます。 例として以下のような感じでelやdataなどのオプション…

vue.jsその0004 Directivesについて

参考にさせて頂いたページ Directives - vue.js Directives - vue.js 体で覚えるVue.js - ディレクティブ編 〜 JSおくのほそ道 #023 - Qiita バージョン Vue.js v0.11.5 概要・書式 Directives - vue.js によると基本的に以下のような感じに書くとのことで <element prefix-directiveId="[argument:] expression [| filters...]"> </element>…

vue.jsその0003 インスタンス初期化後にdataのプロパティを追加または削除する($addと$delete)

参考にさせて頂いたページ お手軽データバインディングライブラリ「Vue.js」を使いこなそう(基礎編) (2/4):CodeZine Options - vue.js 参考ページを元にdataのaプロパティを出力してみた vue_sample.htmlの記述内容 messageだったところをaに変更した。 <div id="demo"></div>…

vue.jsその0002 text, unescapedText, onetimeText (Mustache Bindings)

参考にさせて頂いたページ yyx990803/vue · GitHub Getting Started - vue.js お手軽データバインディングライブラリ「Vue.js」を使いこなそう(基礎編) (2/4):CodeZine バージョン Vue.js v0.11.5 sample_vue.jsの記述内容 messageに格納する文字列にdi…

vue.jsその0001 vue.jsのダウンロードとデモをやってみる

参考にさせて頂いたページ vue.js yyx990803/vue · GitHub お手軽データバインディングライブラリ「Vue.js」を使いこなそう(基礎編) (1/4):CodeZine バージョン Vue.js v0.11.5 ダウンロードして、読み込む GitHubのページから、vue-master.zipをダウン…

Underscore.jsその1 mapとeachを使ってみる

参考にさせて頂いたページ 第2回 Underscore.jsのコレクションと配列とオブジェクトの機能:Underscore.jsの入り口|gihyo.jp … 技術評論社 準備 underscore.jsをダウンロードして読み込む sample.jsを作成 sample.htmlを作成 sample.htmlの記述内容 bodyの…