接続してきた端末によってテンプレートを切り替える UserAgentなどを参照してrequest.variantの値を設定する request.variantの値によってテンプレートが選択される def show request.vatiant = :mobile if request.user_agent =~ /iPhone/ ... end このとき…

CoC 〜設定より規約〜 Employeeモデルがあるとすると、Railsでの規約は以下の通りになる。 データベースのテーブル名はモデル名の複数形（employeesテーブル） /employeesは社員の一覧を、/employees/1はID:1の社員を表す 規約に従うことで設定ファイルを書…

webpack CSSやJavaScript、画像などWebコンテンツを構成するあらゆるファイル(アセット)を「モジュール」という単位で取り扱い、依存関係を解析して「バンドル」という１つのファイルに最適な形で変換するためのツール。 Webpackコマンドを使ってビルドする…

ユーザー環境で不正なスクリプトを実行させる。 標的サイトに悪意のあるスクリプトが埋め込まれるようなリンクを踏ませる or 標的サイトにフォームなどから直接悪意のあるスクリプトを埋め込む 標的サイトにユーザーがアクセスしたとき、特定のタイミングで…

パラメータを操作して不正なデータベースクエリを発行させる。 Railsでの対策 railsではパラメータの文字列が自動でエスケープされる。 ただしwhereなど（条件フラグメント）については手動でエスケープする必要がある。 Model.where("login = ? AND passwor…

攻撃対象のwebアプリケーションに意図しないリクエストを送信させる。 攻撃手法 攻撃用のwebページや掲示板やメールに、標的のユーザーがログイン中の標的アプリに無意識にリクエストを送らせるコードやリンクを仕込む。 ブラウザはリクエストのたびにcookie…

CookieStoreによるセッション管理 RailsはデフォルトのセッションストレージとしてCookieStoreを用いる。 CookieStoreはセッション情報をsecret_key_baseで暗号化し、クライアント側のcookieに保存する。 再生攻撃 最初にブラウザに保存されていたcookieをコ…

ユーザーのセッションIDが盗まれると、攻撃者がそのユーザーをかたってアプリケーションを利用できてしまう。 Railsでの対策 SSL接続を強制する。 Rails.application.configure do config.force_ssl = true end

ParentComponent <ChildComponent @parentMethod="updateMessage"></ChildComponent> ChildComponent <GrandChildComponent @childMethod="$listeners['parentMethod']" ></GrandChildComponent> GrandChildComponent methods: { this.$emit('childMethod', this.message) }

認証におけるjwtのメリット CORSなどの制約がない 異なるドメイン間の通信を拒否する制約にかからない スケーラブルである cookie認証の場合はセッションを保持する別のサーバーやDBが必要になる。jwt認証の場合はアプリケーションサーバーのみで認証ができ…

Vue→Rails 以下のようなストロングパラメータが設定されているとき、params[:user][:name]などといった二重ハッシュである必要がある。 def user_params params.require(:user).permit(:name, :email) end このとき、axiosの引数は以下のような構造にすればO…

プロジェクト作成 初めからプロジェクトを作る場合 % rails new todo_sample --webpack=vue Railsアプリに途中からVueを導入する場合 % bin/rails webpacker:install % bin/rails webpacker:install:vue 開発環境サーバーの設定 foremanでrails serverとwebp…

インストール $ yarn add axios 基本的な使い方 postリクエスト axios.postの第一引数にエンドポイントURL、第二引数に送信するオブジェクトを渡す。 getリクエスト axios.getの引数にエンドポイントURLを渡す。thenでレスポンスを取得する。 // axiosをイン…

コンポーネント側での記述を簡略化できる。 mapGetters import { mapGetters } from 'vuex'; export default { computed: { ...mapGetters(['doneTodosCount','anotherGetter' ]) // doneTodosCount() { return this.$store.getters.doneTodosCount; }, // a…

モジュール化 ユーザーと掲示板をストアする機能をそれぞれ別のモジュールとして切り出すみたいなこと。モジュールにするときは記述の仕方が異なる。 Vuexのモジュールが複数ある時、gettersやmutationsなどをそれぞれのモジュールの名前空間に入れなければ…

（１）valueと@inputを使う <input :value="message" @input="updateMessage"> computed: { message() { return this.$store.getters.message; }, methods: { updateMessage(e) { this.$store.dispatch('updateMessage', e.target.value); } // 入力→methods→actions→mutationsの順に入力値（e.target.value…

Vuexで状態管理を行う。 インストール % yarn add vuex Vuexを設定 Vuexの内容 - state: $storeで参照できるグローバル変数のようなもの - getters: storeの算出プロパティのようなもの - mutations: stateの値を変更する関数 - actions: mutationsの処理を…

nameでルーティングの名前を指定する。以下ではusers/1/profileの名前を設定している。 routes: [ { path: "/users/:id", component: Users, childeren: [{ path: "profile", component: UsersProfile, name: "users-id-profile" // ここ }] } ] router-link…

childrenでネストするルーティングを指定する。 以下の記述により、/users/1/postsなどが定義される。 routes: [ { path: "/", component: Home }, { path: "/users/:id", component: Users, props: true, children: [ // ここ { path: "posts", component: …

template内で$route.paramsからURL内の動的な値を参照できる。 <template> <h1>User No. {{ $route.params.id }}</h1> $route ナビゲーションの情報を得るときに使う $router ナビゲーションするときに使う ルート(route)コンポーネントの再利用性を損なわないためのpropsオプ</template>…

active-class属性：そのrouter-linkがアクティブになっている時に有効になるクラス。以下はフォントサイズを変更している。 <template> <router-link active-class="link--active" exact to="/" >Home</router-link> <style scoped> .link--active { font-size: 20px; } ※包含的なマッチ：全てのurlには/が含まれるため、常に/のrouter-linkがアクティブにな</template>…

URLとコンポーネントを紐付けルーティングする。 インストール % yarn add vue-router ルーターを設定 // router.js // vue-routerをインポート import Vue from 'vue' import Router from 'vue-router' // 'Router'として使う // ルートコンポーネントをす…

同じコードを使い回す。プラグインを作りたい時とか。 ※コンポーネントとミックスインのコードが被ったら、コンポーネントが優先される ※ライフサイクルフックの内容に関してはミックスイン→コンポーネントの順で実行される // event.js export const event …

テキストをフォーマットする。methodと同じで再描画されるたびに実行される。 グローバル登録 <h2>{{ title | upperCase }}</h2> Vue.filter("upperCase", function(value) { return value.toUpperCase(); }) ローカル登録 <h2>{{ title | upperCase | lowerCase }}</h2> // 連…

<input v-model="eventData.title"> // は <input :value="eventData.title" @input="eventData.title = $event.target.value"> // と同じ data(){ return { eventData: { title: "foo" } } } 入力が行われた時(@input)にinputイベントにおける入力値($event.target.value)がプロパティ(eventData.title)に代入され、かつそれがフォーム内の値として表示される フォーム部分をコ…

// フォーム <input v-model="eventData.detail" id="detail"> // 複数行フォーム <textarea v-model="eventData.detail" id="detail" cols="30" rows="10"> // チェックボックス <input type="checkbox" v-model="eventData.isPrivate" id="isPrivate"> // 複数のチェックボックス <input type="checkbox" v-model="eventData.target" id="30" value="30代…</textarea>

// :isに渡した文字列のコンポーネントに変わる <component :is="currentComponent"></component> <button @click="currentComponent = 'Home'"></button> <button @click="currentComponent = 'About'"></button> // ボタンで切り替え このままでは切り替えるたびにコンポーネントがcreated/destroyedされるが、keep-aliveタグによってそれを防げる（activated/deactivatedになる） <keep-alive> </keep-alive>

子のslotタグで指定した属性は、親のv-slot属性でスロットプロパティ（ここではslotProps）を渡すことで使える 親コンポーネント <Child> <template v-slot:title="slotPlops"> <h1>いいね数</h1> <h2>{{ slotPlops.user.firstName }}</h2> </template> </Child> 子コンポーネント <div> <slot name="title" :user="user"></slot> </div> data() { return { user: { firstName: "gelard" デフ…

名前付きスロット v-slotで名前付きスロットにすれば、複数のslotを利用して複雑なデータを渡すことができる。 親コンポーネント側 templateタグ内でv-slotを使う <Child> <template v-slot:title> <h1>いいね数</h1> <h2>{{ number }}</h2> </template> </Child> <template #title> // 省略形 子コンポーネント側 name属性の値をv-slotの値にする <div> <slot name="title"></slot></div></template>…

親コンポーネント側 子コンポーネントのタグで囲んだ要素が渡される。 <Child> <h1>いいね数</h1> <h2>{{ number }}</h2> </Child> 子コンポーネント側 渡された要素がslotタグの箇所に表示される。 <div> <slot>フォールバックコンテンツ</slot> // フォールバックコンテンツ：親から渡される要素がない時に表示</div>…