2020-01-01から1年間の記事一覧

【Sass】@extendと@mixinの使い分け

定義したスタイルを複数のクラスで使用できるSassの@extendと@mixinの違いが分からなかったので、両者を比較して使い分けるべきケースをまとめる。 @extendの特徴 定義したスタイルを他のクラスに継承して使用できる /* Sass */ .btn-base{ border:1px solid…

【JavaScript】async/await

async/awaitとは Promiseより快適に非同期処理を利用することが出来る構文。 async 非同期関数を定義する 関数名の前にasyncを書くと、その関数はPromiseオブジェクトを返す。 async function test() { return 'test'; } test().then(value => { console.log…

【JavaScript】Promiseオブジェクト

Promiseとは JavaScriptの非同期処理のネストを深くせずに実装することができる仕組み。 背景 コールバック地獄 JavaScriptの非同期処理はコールバック関数を利用して実装するが、処理が連続するとネストが深くなり、コードが肥大化してしまう問題があった。…

【Rails,Vue.js】JestでCSRFトークンを設定したaxiosを含むコンポーネントをテストするとき

事象 JestでCSRFトークンを設定したaxiosインスタンスを含むコンポーネントをマウントする際にTypeError: Cannot read property 'getAttribute' of nullになる $ npm test ● Test suite failed to run TypeError: Cannot read property 'getAttribute' of nu…

【JavaScript】コールバック関数

コールバック関数 引数として渡される関数。 JavaScriptの関数はデータ型の1種のため、数値型や文字列型と同様に関数の引数・戻り値として扱うことができる。 「関数を引数、戻り値として扱う関数」を関数を高級関数と呼ぶ。 function execCallBack(callback…

【JavaScript】Ajax

Ajaxとは Asynchronous JavaScript + XMLの略称。 ※Asynchronous=非同期 JavaScriptがサーバーと非同期で通信し、取得したデータを使用してHTMLを更新する技術。 代表的なのがGoogleマップ。表示位置を変えた際に、移動した分だけの地図情報を取得して更新…

【Rails】rails newした時にGem::GemNotFoundExceptionが発生する

事象 railsのプロジェクトを作成する時にGem::GemNotFoundExceptionが発生する $ rails _5.2.2_ new rails_vue Traceback (most recent call last): 2: from /Users/(username)/.rbenv/versions/2.5.0/bin/rails:23:in `<main>' 1: from /Users/(username)/.rbenv/</main>…

DOM

DOMとは Document Object Modelの略。 プログラムによってHTMLやXMLの文書構造やスタイルなどを変更するための仕組み。 DOMを利用することで文書の特定の部分に対して色をつけたり、大きく表示したりすることが出来る。 ノードとは ノードはファイルの中の各…

【RSpec】FactoryBotのbuildとcreateの違い

buildメソッドとcreateメソッドの違い テストデータの保存場所が違う buildはテストデータをメモリ上に保存する createはテストデータをDB上に保存する 例 userモデル(属性にname,password)があった場合 # build user = build(:user, name: "test", password…

【Rails】RSpecによるテストについて

テストについて 手動テストだとリリースまでに手間が掛かり、不具合に気づかない可能性がある 自動テストによりコードの変更の都度、エラーの有無を確認できる テストを描くメリット 環境のバージョンアップに対応 ruby,rails,gemのバージョンアップに伴うテ…

セッション

セッションとは webサーバーとwebブラウザでの一連の処理の流れのこと 例(ECサイト) 商品をカートに追加する 注文画面に進む 商品を購入する 上記の処理において、webサーバーとwebブラウザの処理は合計3回だが、「ECサイトで商品を購入する」という論理的な…

DNS

記事作成の背景 ポートフォリオをherokuにデプロイした際にDNSの設定をしたため。 設定時はQittaやブログの記事をそのまま参考にしたため、どういった仕組みで動作しているか理解しきれていなかった。 そのため、DNSの仕組みを再確認した上で、herokuのデプ…

MVCモデル

記事作成の経緯 Railsでポートフォリオを作成している中で、そもそもMVCモデルを理解してないため、開発するときやエラーがあった際にどこから手をつければいいのか分からないことが多い。 そのため、そもそもMVCモデルが何なのかを理解し、どういった構成で…

【Rails】バージョンを指定してプロジェクトを作成する

インストール済みのrailsのバージョンを確認する $ gem list -e rails *** LOCAL GEMS *** rails (6.0.1, 6.0.0, 5.2.1) インストール済みのバージョンを指定してrails newする # 5.2.1を指定する場合 $ rails _5.2.1_ new app_name 指定したバージョンでプ…