静的型付け言語・動的型付け言語

(会社のLT会で発表したものの転記。) TypeScriptのメリットを紹介するつもりでしたが、型がある言語全般に言えることなので、もう少し広い意味で静的型付け言語・動的型付け言語の紹介をします。 データ型 データ型・プログラムを実行するときのデータの入れ…

フロントエンドエンジニアのロードマップ(2021)読解

はじめに 結論から書くと、今後はフロントエンドに注力していこうと思います。 現状フロントエンド・バックエンド両方担当していますが、下記理由からフロントエンドに注力しロードマップを参考に学んでいこうと思います。 なぜフロントエンド? 会社で受講…

【C#/NUnit/Moq】単体テストについて

背景 業務で利用しているNUnit・Moqを学習するにあたり、そもそも単体テストについての知識がないので単体テストの目的、手法、ライブラリの使い方などついて自分用にまとめます。 なお、単体テストは自動化されたテストを前提に記載しています。分類として…

【JavaScript】call・apply

関数のthisを置き換える call・apply共に関数を呼び出し、呼び出した関数のthisを第1引数に指定したオブジェクトに置き換える。 var func = function(){ console.log(this); } func(); func.call({hoge: 1}); func.apply({hoge: 2}); //出力 //func()はwindo…

【C#】抽象クラス・インターフェース

前提 C#の抽象クラス・インターフェースの話 抽象クラス 定義 インスタンスを生成出来ないクラスで、継承して利用することを前提としたクラス ※継承...クラスの共通部分を別クラス(A)にまとめ、Aを継承することでAのプロパティ・メソッドを継承先で宣言する…

プロセス・スレッド・並列処理

プロセスとスレッド プロセスやスレッドやマルチスレッドや並列処理など関係ありそうだけど、今まであやふやなまま放置していたので、まとめる。 プロセス OSが実行しているプログラム。 WordやExcelなどタスクマネージャーで表示されるもの。 プロセスが並…

【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 指定したバージョンでプ…

gitでリモートにpushするとerror: failed to push some refs toが表示される

環境 macOS 10.14.6 git 2.23.0 事象 ローカルブランチにfeature/#7_testを作成し、コミット後にリモートへpushした際に以下エラーが発生 $ git push origin feature/#7_test Enumerating objects: 5, done. Counting objects: 100% (5/5), done. Delta comp…

Docker/Kubernetes実践コンテナ入門 復習(2)

Dockerコンテナのデプロイ コンテナでアプリケーションを実行する Dockerイメージ Dockerコンテナを構成するファイルシステム、実行するアプリケーションをまとめた、コンテナを作成するテンプレートとなるもの Dockerコンテナ Dockerイメージから作成され、…

Docker/Kubernetes実践コンテナ入門 復習(1)

Dockerの基礎 Dockerとは コンテナ仮想化技術を実現するために実行される常駐アプリケーションとそれを操作するためのコマンドフロントインターフェース ローカルで環境のセットアップが出来ていれば、コマンド一つで環境構築が可能 仮想マシンより高速でロ…

入門docker 復習(8)

プロダクションでの活用 プロダクションへの導入 ローカル環境のDocker化 チームの開発環境を統一する テスト/CIへの導入 ステージングへの導入 本番前に動作確認する 本番への導入 Tips docker-compose 環境変数への読み込み docker-composeの起動時に渡す …

入門docker 復習(7)

プロダクションでの活用 オーケストレーションツール オーケストレーションツールとは 複数のDockerを扱うための技術 主に以下の機能をもち、本番のワークロードに必要な機能を備えている Dockerの管理/自動復旧 ネットワークの管理 オートスケール 代表的な…

入門docker 復習(6)

プロダクションでの活用 イメージの仕組み Container DockerImageはReadOny Docker Containerを作成することで変更可能なレイヤーが生成され、レイヤーの上でプロセスを動かす docker diffによりコンテナ起動後に変更されたファイルを確認できる Unison File…

入門docker 復習(5)

プロダクションでの活用 設計 1コンテナ=1プロセス Dockerは1プロセスをフォアグラウンドで走らせるため、1コンテナ=1プロセスの粒度で設計する ただし、設計上1プロセスが難しい場合は1コンテナにつき1つの関心事にする 永続的なデータはマネージドサービス…

入門docker 復習(4)

コンポーネント network Networkを使用する nginxとphp-formのような複数プロセスを動かす必要がある場合、ソケットではなくネットワークで通信を行うことが推奨されている Kubernetes,ECS,docker-composeのような各種オーケストレーションツールを使用する…

入門docker 復習(3)

コンポーネント container Docker Containerとは Docker Image がスナップショットだとしたらDocker Container「スナップショットから起動したプロセス」 docker run を実行するとDocker Image をもとにしてDocker Containerが作成され、隔離された環境が作…

入門docker 復習(2)

コンポーネント image Docker Imageとは Imageは環境のスナップショット CentOSやUbuntuやAlpineなどのOS NginxやMySQLのようなソフトウェア PHPやRubyのようなランタイムなどの環境 DockerImageはDockerの公式がDockerHubというサービス上で様々なOS・ソフ…