ユーザビリティーとは？ 使いやすさを考える ユーザービリティとはWEBサイトの使いやすさのことです。 WEBサイト上の機能を簡単に使える、使っていてストレスを感じない。そんなWEBサイトを作成することが大事です。 使いやすさを感じてもらうためには実際に…

昇順と降順まとめ 毎回どっちがどっちだか混乱するのでメモ残しておく ASC = 昇順 DESC = 降順 昇順 小さい方から大きい方へ並び替えることを言います。 降順 大きい方から小さい方へ並び替えることを言います。 数値の場合 昇順 = 「0,1,2,3,...」 降順 = …

めちゃ便利、binding.pryのdocker attach短縮方法 ※ 事前にDocker環境構築は終えていると想定 １. bin/docker-compose-attachに以下の内容を追記記載 #!/usr/bin/env bash docker-compose up -d && docker attach $(docker-compose ps -q $1) ２. Railsアプ…

本番データ触るときはトランザクションに注意しよう(PostgreSQL) 保守運用していれば、本番データを直接いじりたいケースはあると思います。 ただ、本番データをSQLで変更するときはトランザクション貼ることを意識しましょう。 そうすることで、本番環境で…

配列の値をハッシュのキーとバリューに変換する方法 実務で書かれていたコードでなるほど！というRubyのコードがあったので備忘録としてメモします。 配列のこういう値があったとします。 ["A", "B", "C", "D", "E", "F", "G"] これをこんな感じでhashのkey_…

Vuetifyの基礎 そういえば、Vuetifyについて学んだことなかったので、YouTubeで勉強する。 what is Vuetify UIコンポーネント Google Material Designをベースに作られている Vue.jsに特化して作られている 導入 Vuetifyをインストールすると以下のようなフ…

EFSとは？(Elastic File System) EFSとは複数のEC2インスタンスからアクセス可能な共有ストレージになります。 他のストレージサービスとの比較 S3 - オブジェクトストレージでリージョンを設置 - HTTPによるAPI経由でのアクセス - 大容量のデータを長期保存…

ElasticIPアドレスとはなんや？ Elastic IP アドレス - 動的なクラウドコンピューティングのために設計された静的 IPv4 アドレス - インターネットからアクセス可能なパブリック IPv4 アドレスです。 まあ、一言で言えば、AWSで固定IPアドレスを利用したい場…

confirmで確認してから削除する方法 ユーザーがリソースを削除するときに、「削除しても良いですか？」みたいな確認フェーズがある方がUXの観点で見ると良いと思われます。 これを実現するには単純でif confirm('削除しても良いですか？）でOKであれば削除、…

AWSデータベース構造（EC2とRDSの違い） AWSデータベース構築はEC2に自らインストールして構築するか、専用DBサービス(RDS)を利用するのかの２パターンあります。 EC2にデータベースを構築する 通常のサーバーにソフトウェアを入れて一からデータベースサー…

Vuexの使いかた 具体的な利用方法の備忘録 概念理解はこちら参照 state ■ Vue.store import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { message: "hogehogeMAX" }, mutations: { }, actions: { }, get…

Vuexの基本 Vue.jsのコンポーネントが複数になると、コンポーネント間のデータの受け渡しが複雑になってきます。 その結果、データがどこで変更されたか等のデータの流れが追いづらくなり、メンテナンスが困難なコードとなってしまいました。 このような問題…

VPCエンドポイントとは？ ポートされている AWS サービスや VPC エンドポイントサービスに VPC をプライベートに接続できます。 よくあるユースケースとして、S3などのVPC外のサービスへは外部ネットワークへアクセスする場合にVPCエンドポイントを利用する…

VPCのルートテーブルとは？ ネットワークにデータを流すためには、「ルーティング情報」と呼ばれる設定が必要です。この設定は、「ルーティングテーブル（RoutingTable）」や「ルートテーブル（RouteTable）」と呼ばれます。 ルートテーブルには、「同VPC領…

webpackerで使えるコマンド bin/webpack ローカルでJSファイルのビルドを行うコマンド /D/d/double_worker ❯❯❯ ./bin/webpack [~/Desktop/development/double_worker]+[feature/bug_oauth] Hash: 729e47d437ddb260bf89 Version: webpack 4.42.0 Time: 5084ms…

Redashについて備忘録（自分用） 会社でRedashを触る機会があったので、備忘録残す。 そもそもRedashとは？ BIツールと言われるジャンルで、データを分析するために使用する。 データを検索し、そこからグラフを作ったり、定期的に結果を取得したりすること…

データベースとは？ - 大量の情報を保存し、コンピューターから効率よくアクセス出来るように加工したデータの集まり システム開発のプロセス 1. 要件定義（何を作るか） 2. 設計(どう作るか) <=== DB設計フェーズ 3. 開発(実装） 4. テスト（期待通りに動く…

匿名関数について 関数は値として利用することが可能です。 function isTweetable(text) { return text.length < 140; }; 関数式に書き換え(関数を変数式に入れ込んだもの） const isTweetable = function(test) { return text.length < 140; }; こんな感じ…

関数とは？ タスクや値計算を実行する分の集まり 関数には短縮記号が存在します。 例） const foo = { alert: function() {}, <-- 1 alert() {} <--2 } 1,2のどちらでもOK ■ 基本の書き方 function foo(仮引数）{ // 処理 return 関数の返り値; } 返却する値…

データストレージとセッションストレージとは？ Webストレージにはローカルストレージとセッションストレージを利用するケースがありますが。 よく内容を理解していなかったのでメモを残します。 先に結論 sessionStorage はセッション中（ページの再読み込…

redirect_toでアンカーリング移動する方法 オプションのanchorを使えばページ内ジャンプ機能ができます。 めちゃ簡単です。 redirect_to hoge_path(anchor: 'description') hogehogeはジャンプ先のidです。 #description .card-header h4 ここにリンクします…

class → UpperCamelCase 関数 → lowerCamelCase 変数 → lowerCamelCase or snake_case

イベントハンドラー一覧についてまとめられているサイトです。 phpjavascriptroom.com

関数のデフォルト引数について ES6の関数のデフォルト引数について function makeAjaxRequest(url, method = 'GET') { return method; } function echo(x = "デフォルト値") { return x; } console.log(echo(1)); // => 1 console.log(echo()); // => "デフ…

アロー関数 const add = function(a,b) { return a + b; } これをアロー関数に書き換える const add = ( a, b ) => { return a + b; } 省略するとこうもかける const add = ( a, b ) => a + b; const double = ( number ) => { return 2 * number }; 引数が…

テンプレートリテラル function getMessage() { const year = new Date().getFullYear(); return `今年は${year}年です。` } getMessage() -> 今年は2020年です。 バッククオートで囲って文字を表現できます。

const constは定数なので、変わる予定のない物を変数に入れる letは変わる予定があるものを変数に入れる constで宣言した変数に違う値を入れようとするとエラーになる。 const name ='hiroki'; let title = 'hogehoge'; const => 再代入できない、再定義でき…

配列の便利メソッド JavaScriptでの配列で有名メソッド。 forEach map filter find every some reduce 従来の配列でのコードの書き方 var colors = ["red", "blue"] for( var i = 0; i < colors.length; i++) { console.log( colors[i]); } forEach forEach…

v-bindとv-modelの違い HTML コンポーネントの値が変わっても、Model の値は変わりません。Model から HTML への一方通行です。 -> 双方向データバインディング HTML コンポーネントの値に変更があった場合、自動で Model の値を更新します。 -> 単一方向デ…

datelistについて ■ datalistとは 入力候補となるデータリストを定義する時に利用する。 タグは、フォームの入力欄などで入力候補となるデータリストを定義します。 各データのリスト項目は、タグで定義します。 www.htmq.com ■ どんな時に利用するの？ data…