1日1%成長するブログ

毎日成長するために仕事/プライベートで得た学びをアウトプットするブログです

JavaScript

Vue.jsのルートインスタンスとコンポーネントの違いを理解する

ルートインスタンスとコンポーネントの違い ルートインスタンスは既存のHTML要素のID属性で紐付ける * そのためelオプションがある VueコンポーネントもVueインスタンスなのでelオプション以外は同じオプションを受けられる グローバルコンポーネントとロー…

package.jsonのdevDependenciesとdependenciesの使い分け

devDependencies ライブラリをdev(開発)する時に必要なライブラリを書く 開発時のみに必要で実行時には入らないもの - テストツール - ビルドツール - タスクランナー等 dependenciesに含まれていても動作はする。ただバンドルファイルの容量が増えたり用途…

VSCodeにES6+ReactのESLint設定を行う

1. eslintをプロジェクトのローカルにインストール yarn add --dev eslint 手軽さからグローバルにインストールする例もありますが、 チームで開発する場合は以下の理由からローカルにインストールした方がいいです プロジェクト毎に別々のバージョンのeslin…

yenta風の特定の位置までドラッグしたらフェードアウトする処理を実装する

$('.draggable').draggable({ drag: function() { var offset = $(this).offset(); var xPos = offset.left; var yPos = offset.top; if (xPos >= 210) { $('.xxx).addClass('fadeout-right').delay(700).fadeOut(1); } if (xPos <= -210) { $('.xxx).addCla…

Tinder風のUIをJavaScriptで実装する

https://codepen.io/developingidea/pen/meAIncodepen.io こちらのコードを参考に学んでみた。 $(".buddy").on("swiperight",function(){ $(this).addClass('rotate-left').delay(700).fadeOut(1); $('.buddy').find('.status').remove(); $(this).append('<div class="status like">L</div>…

hammer.jsを使ってブラウザで上下左右のスワイプを検知する

hammerjs.github.io var element = document.getElementById('swipeTarget'); var hammertime = new Hammer(element); hammertime.get('swipe').set({ direction: Hammer.DIRECTION_ALL, threshold: 1, velocity:0.1 }); hammertime.on('swipeleft',function…

ActiveRecordのEnum型のデータをJavaScriptから保存する

enum(列挙型)の使い方 ActiveRecordのenumを使うと、プログラムからは文字列(名前)でアクセスでき、 DBには数値で保存される属性を作ることができます。 Modelに属性にセットできる文字列を列挙する class Post < ActiveRecord::Base enum status: { draft: …

Reactでエンターキーのイベントを取得する方法

onEnterは存在しない Reactがサポートしているイベントは以下の公式サイトに記載されています。 facebook.github.io onClick のノリで onEnterは無いのかな?と探してみてもありません。 ただし、代わりになるキーイベントがあります。 onKeyDownを使う それ…

Webアプリの新規作成の実装パターン

一覧 -> 作成画面に遷移して新規作成 フォームでPOSTして、エラーならエラーメッセージを表示、成功したら一覧画面にリダイレクトさせるというオーソドックスなパターン。 Flashメッセージの実装は必要。作成後にセッションに保存して一覧画面で取得したらす…

JavaScriptのオブジェクトとJSONは別物

JavaScriptのオブジェクトとJSONは見た目がほとんど変わらないので、 違いがよくわかっていなかったのですが、明確に違いがあるようなのでメモしておきます。 JavaScriptのオブジェクト キーがクォーテーション無し & 文字列をダブルクォーテーションで囲む …

Vue.jsとVueValidateのよく使う機能のメモ書き

Vue.js 代表的なオプション el: 既存DOMにVueインスタンスをマウントする elを指定しないで$mountで new Vue().$mount(“#app”)のようにも書ける methods Vueインスタンスに組み込まれるメソッド vm.plus()のように呼んだり、VueインスタンスをマウントしたDO…

ReactNativeにReduxの環境構築をしてみる

プロジェクトの作成 $ react-native init redux_test 必要なライブラリのインストール $ cd redux_test $ npm install $ npm install --save redux react-redux シミュレータ起動 $ rm -rf ios/build $ react-native run-ios たまに前ビルドした結果が残って…