JWT認証のユーザー登録機能を VueでhandleRegisterメソッドに 定義 axios → Promise → handleRegisterメソッド発火としたら CapybaraでNetwork Errorの応酬 // auth.service.js class AuthService { register(user) { return axios.post(API_URL + 'users', …

rubyの自己演算子始めて使ったのでメモ 【Ruby】使いこなせると便利。||演算子のいろんな使い方 - Qiita def authenticate! payload, _ = Jwt::TokenProvider.decode bearer_token @current_user ||= User.find(payload['user_id']) end @current_userがnil…

mutations/actionsでメソッドを作る １から各コンポーネント のメソッドを Vuex Storeへ移行することをやりました 各コンポーネント内でのメソッドの定義は Vuex Storeでのmutations / actionsの定義に対応 引数の理解は必須ですね‥ わかりやすくまとめてあ…

各コンポーネントのmethodsのVuex Store移行をやっていたら 「mutationsとactions、２つある必要ないのでは？」 と疑問が出たので調べてみると VuexのMutationとActionの切り分け - Qiita そもそもMutationは同期処理でなければならなず、> Actionは非同期処…

axiosのCRUDのうちの更新メソッド実装で使いました spliceメソッド： Array.prototype.splice() - JavaScript | MDN sliceメソッドは もとの配列から要素を削った配列を返すものに対し、 spliceメソッドは要素追加、置き換えもできる (splice : より継をする…

条件をみたす配列の要素の位置（先頭から○番目）を返すメソッド Array.prototype.findIndex() - JavaScript | MDN axiosの更新メソッド実装の時の [更新用データid]と[既存の更新前データid]のid照合 に使用しました

axiosを使ったCRUD実装(vuex)で 延々と更新(U)ができずに詰まったので ここに備忘録を記す‥。 はしです。 詰まった理由は ずばり「idを渡していなかったから」 更新にはそのレコード (Vue的にはprops)のidがないと 「更新用として作った新しいpropsを既存の…

Vueのモーダル実装トラウマになりつつあるはしです。 フロントのエラー、一度でたらなかなか抜け出せない モーダルウィンドウ | 基礎から学ぶ Vue.js のモーダルをそのままコピペしたら怒られた https://i.gyazo.com/fef9a3bfe8bb6aa3686b5e851d717611.gif …

自分は単一ファイルコンポーネント記法で実装しているのに <scripts> new Vue({ ‥ }); </scripts> のようなnew Vue記法をそのまま使ってしまって 延々とエラー‥みたいなことをしてしまったので備忘録 htmlファイル上でvueを使用する場合 new Vue を使う 例 <div id="container"> <p>{{ comments }}.</p> </div> <scripts> n</scripts>…

Vue.jsで 他のコンポーネントを呼び出して表示したいのに 表示されない‥ なぜ？ importだけしてexportしてなかったからでした export defaultについて - Qiita

Vueのaxiosを使って APIで追加したデータを 取得して表示させることをやってみよう、 と思ったら延々とできず, 何が原因かと思ったら Railsのルーティングが沼ポイントだったという話です。 Rails 5.1 + Vue.js + Vuex + vue-routerの初期設定 - Qiitaで 紹…

Rais✖︎Vue Rails✖︎Vueの第1歩として Railsファイル(.erb)にvueファイル(.vue)を埋め込む方法 <%= javascript_pack_tag 'hello_vue' %> 参考 : 【超初心者】Rails×Vue.jsファイルの内容あれこれ - Qiita

Railsでのカレンダー実装の際、 simple-calendarやFullCalendarを使うと爆速で実装できますが、 もっとカスタマイズ性が欲しい時は自作した方が良さそうな感じの印象を受けました 自作なさった方の記事発見しました！ ロジックが勉強なる RailsのDateまたはD…

FullCalendarで予定表示できたあとの追加機能の実装 [FullCalendarを導入]→[予定を表示] の後の追加機能を実装した例について書いてある記事を 検索して集めてみました。 【Rails】 FullCalendar カレンダー内イベント リサイズ時の更新方法 - Qiita FullCal…

qiita.com おもしろいなぁ カレンダーの実装記事を調べていた途中見つけましたw

カレンダーの実装記事集 カレンダー実装情報のある記事を集めてみました Railsで実装 fullcalendar [Rails]FullCalenderでカレンダー機能の実装 - Qiita Railsアプリケーションにfullcalendarを導入 - Qiita RailsでFullCalendarを使って予定を表示するまで …

鬼門connect攻略③ - mergeProps - connect攻略 part3です 鬼門多きconnectさん↓ connect( mapStateToProps mapDispatchToProps mergeProps )(myComponent) 今回は mergePropsについて見てきます mergePropsで無駄なレンダリングを防げる ‥とのこと https://a…

鬼門connect攻略② mapDispatchToProps Actionをstoreへdispatchする関数 connect( mapStateToProps mapDispatchToProps mergeProps ) 「storeへdispatch」を propsのように各componentを渡らせる性質を持たせる(ToProps) ことに対応させている 具体的な使い…

鬼門connect攻略① mapStateToProps connectの引数がわからん、ということで調べました 鬼門だらけのconnectさん↓ connect( mapStateToProps mapDispatchToProps mergeProps )(myComponent) まずはmapStateToProps mapStateToProps is 何 「State」を「ToProp…

store is 何 redux.js.org A store holds the whole state tree of your application. state全般を保存する場所 ・reducerにより生成された新たなstate ・変更が加わっていないstate storeを作る createStoreメソッド : storeを作る storeに全てのreducerを…

reducer is 何 Reduxでの立ち位置 // Redux [View] ↓ [Action] ↓ [Store] [Reducer] ←これ ↓ [View] 新しいState生成マシン Reducer https://redux.js.org/basics/reducers (previousState, action) => nextState // previousStateとactionをもとにnextState…

Actionの一般形 Flux Standard Actionに書いてあるらしい(ReduxはFluxがもとになっている) qiita.com { type: FOO_TYPE, // must payload: {object}, // optional meta: {object}, // optional error: false, true, undefined, null, ... // optional } 各ke…

ActionとActionCreatorは区別する redux.js.org // ActionCreator function addTodo(text) { // Action return { type: ADD_TODO, text } }

Reduxの思想 component間のprops受け渡し(propsバケツリレー)の煩雑さ解消のため storeを中心としたprops受け渡しとしたもの。 vuexの思想もこれ。 qiita.com Redux実装の流れ ① Action 変更するstateを設定 Action : type、typeに対応する値 ActionCreator …

qiita.com ReactのComponentではComponentの内部で状態を持つことができます。この内部の状態のことを『state』と言います。 propsは親のComponentから値を渡されたのに対して、stateはComponentの内部でのみ使用されるという点でpropsとは異なります。 また…

propsを渡すってそういうことだったのか qiita.com import React from 'react'; const App = () => { return ( <div> <Friend name={'Hosei'} /> </div> ); }; const Friend = props => { return <div>{props.name} is my friend </div>; }; export default App; これで " Hosei is my friend "が表示される…

component設計とはなんぞや qiita.com componentの粒度を小さくすると変更修正に強い qiita.com 「1component1役」に則っているか、がポイント 原則としてコンポーネントは一つのことに責任を持つべきです。 これはMolecule単位のコンポーネントをデザインす…

はてブロ始めました はしです Twiiter : @lgHqmAv8tebNPEq 【はし is だれ】 メーカー勤務@三重@万年駆け出し設計@転職するぞい プログラマー転職目指してます！

・jsx ・Babel ・webpack ReactがReactたる動作をしてくれる背景には これらのおかげ、月島さんのおかげ がある。

DOMって言葉は見たことはあるけど‥ってことで調べました めっちゃわかりやすい記事がありました qiita.com モダンフロントエンドと言われている Vue.js , React.js などでは 「変更部分だけを読み込む」仮DOMを使用することで サクサク読込を実現できる φ(。…