bff

フルスタックエンジニアを目指して学んだことなどを記録しています

Typescriptの利用

NuxtでTypescriptを利用しようとして調べたところ、2019/01/28のv2.4.0で公式対応された手順での利用方法があまりまとまっていなかったので、簡単にまとめてみました。 https://ja.nuxtjs.org/guide/typescript にアクセスしたら404エラー!ということで簡単…

apt-get時の不要ファイル削除

Dockerイメージを作成する際には不要ファイルを削除しましょう。 apt-getでパッケージを入れる際は、以下のように/var/lib/apt/lists/の中を削除することでイメージサイズの削減ができます。 apt-get update && apt-get install -y --no-install-recommends …

Dockerで始めるFastAPI

最近話題になっているPythonのWebフレームワークであるFastAPIを少し試してみたいと思い、Dockerイメージを作成しました。 Dockerhubには登録していないので、こちらから利用してください。 https://github.com/tsbkw/fastapi FastAPIとは NodeJSやGoと同等…

vue-cliでローカル実行する際のポート番号変更方法

開発中はvue-cliでローカル実行しながらデバッグを行うかと思います。 vue-cliはデフォルトで8080のポートを利用していますが、他の用途でこの番号を使っている場合は別の番号を指定する必要があります。 デフォルトの挙動 $ yarn serve # yarnを利用してい…

「クラス・ファイルのバージョンXX.Xは不正です」の対処方法

WebAuthnを勉強しようと思って、()[]を動かそうとしていたところ、Javaのクラスファイルのバージョンが不正というエラーが出てしまいました。 解決までにすこし手間取ったので、簡単にまとめておきます。 ひとことで言うと JDKのバージョンがMavenで指定され…

gitで必要なcommitだけをpushする方法

githubでプルリクを作ろうとしたときに、不要なcommitが含まれてしまったときの対処法です。 不要なcommitを含む操作前の状態に戻し、必要なcommitだけをチェリーピックして、プッシュします。 1.origin/masterとローカルのHEADとの差を確認(ハッシュ値は適…

JavaScriptでのPromiseの概要、使い方と利点

JavaScriptでのPromiseの概要、使い方と利点を簡単にまとめてみました。 概要 Promiseとは非同期で実行するコールバック関数を登録するためのオブジェクトです。 Promiseを返す関数は、非同期で実行する処理を行ったあと、登録されたコールバック関数を呼び…

MacのF12キーでDeveloper Toolsを起動する方法

Windowsでの開発に慣れているとMacでもF12で開発者ツール(Developer Tools)を起動したい衝動に駆られます。 以前設定をしたのですが、Mission Control周りを触った時に誤って設定が解除されてしまったので、備忘のために方法を残しておきます。 ちなみにこの…

OAuth 2.0と認証について

OAuth 2.0では一部認証について語っている部分があります。 上記フローの理解の一助になるよう、認証の位置付けについて簡単にまとめました。 認証の種類 OAuth 2.0ではサービス側が認証すべきものとして、a. アプリ、b. ユーザがあります。 アプリの認証は…

OAuth 2.0における4つの承認フロー

OAuth 2.0に関する実装を行う機会があったので、個人的に勉強した内容をまとめました。 OAuth 2.0と一口に言っても、4つのフローが規定されており、ユースケースに応じて適切なものを使う必要があるので、ざっくりとその概要を理解できるようにまとめました…

automatic semicolon insertion(セミコロン自動挿入)の挙動について

Reactを学ぶなかで、セミコロン自動挿入を防ぐためにJSXを括弧()で括ることが推奨されていました。 javascriptのセミコロン自動挿入の挙動をあまり知らなかったので調べて見ました。 仕様としては、ECMA Scriptの§11.9.1 Rules of Automatic Semicolon Inser…

Reactでのpropsの利用法

Reactのチュートリアルをする中で、propsの挙動を理解するために調べました。 propsの使い方 propsはComponent間でのデータの受け渡しに利用されます。 renderの中で受け渡し先のComponent(以下の例ではChild)にPropertyを設定すると、this.propsからアクセ…

Maximum update depth exceeded errorの原因と対処法

Reactで開発をしていた際、Maximum update depth exceeded errorが発生したので原因と対処方をまとめておきます。 原因 Componentのrenderメソッドの中で、setStateを呼び出していたことが原因。 ReactではsetStateを呼ぶとViewを更新するためにrenderメソッ…

カリー化とは

カリー化についての理解が浅かったため、調べてまとめました。 カリー化とは 複数の引数をとる関数を、引数が「もとの関数の最初の引数」で戻り値が「もとの関数の残りの引数を取り結果を返す関数」であるような関数にすること 要は以下のようなoriginalから…

javascriptにおけるimmutableのメリット・デメリット

ReactのチュートリアルでImmutableについて触れていたため、javascriptにおけるImmutableのメリット・デメリットをまとめました。 最初に Immutableとは、データを一度生成したらその後は値の変更を行わないことを指します。 値の変更を行いたい場合は、clon…

フロントエンド・JavaScriptキャッチアップ

JavaScriptの世界から4−5年ほど離れていたので、キャッチアップ時に参照した資料をまとめました。 リクルートテクノロジーズの新人研修資料がかなり良くまとまっていました。ここからキーワードをピックアップしつつ、深堀すべきところを別途見ていく形でキ…