React の関数コンポーネントが再呼び出しされる条件 - 30歳からのプログラミング
マウントされた関数コンポーネントが再び実行されるのは、どのようなケースか。 stateが更新されたら再実行されるんでしょ、くらいの曖昧な理解だったので、検証して整理した。 reactとreact-domのバージョンは16.10.2。 動作確認にReact Developer Toolsも使用したが、そのバージョンは4.2.0。 確認方法 コードの全体像は改めて載せるが、関数コンポーネント内にconsole.log('called');と記述する。 これで、関数コンポーネントが呼ばれる度にログにcalledと流れる。 また、React Developer ToolsのHighlight updates when components render.を有効にすることで、コンポーネントが再レンダリングされる度にハイライトされるようにしておく。 state が更新されると呼び出される useSta
var,let,constの違いは、ブロックスコープと巻き上げ - 30歳からのプログラミング
JavaScriptにおける変数宣言はvarによって行われてきたが、ES2015で、letとconstが加わった。 varとの違いは、ブロックスコープを作るということと、変数の巻き上げの挙動が異なる、ということである。 このことについて、varとletを比較することで説明していく。constについては最後に触れる。 ブロックスコープ これまでのJavaScriptでは、スコープをつくるのは、 グローバルスコープ ローカルスコープ evalスコープ の3つのみであった。 スコープについては以下を参照。 スコープとクロージャ {}で囲まれている領域をブロックと呼ぶが、これはスコープは作らなかった。そのため、ifやforはスコープを持たなかった。 var x = 0; console.log(x); // 0 if(true){ var x = 1; console.log(x); // 1 }
TypeScript の型定義ファイルの探索アルゴリズム - 30歳からのプログラミング
npm パッケージは基本的に、JavaScript ファイルで配布されている。TypeScript で開発しているパッケージであっても、JavaScript にビルドしたものを配布している。 そのため、型定義ファイルによって型付けしないと、インポートした際にモジュール全体がanyになってしまう。 これでは型システムの恩恵を受けることができないし、noImplicitAnyフラグをfalseにしていない場合はコンパイルエラーになってしまう。 npm パッケージをインポートした際、TypeScript は自動的に型定義ファイルを探索し、最初に見つかったものを使用する。 また、プロジェクト内にある JavaScript ファイルをインポートした際も、型定義ファイルの探索が行われる。 この記事では、TypeScript がどのように型定義ファイルを探索するのか、実際に検証して確認していく。 動作確
入社からの半年間でコードレビューで指摘されたことのまとめ - 30歳からのプログラミング
実務未経験でプログラマとして入社して半年以上が経った。 コードレビューで指摘されたことを備忘録としてまとめておく。 自分なりにまとめたものなので、レビュアーが言いたかったこととニュアンスや解釈がずれている可能性はある。 初歩的な内容ばかりで我ながらうんざりする。 せっかく優秀な同僚ばかりなのだからもっと高度なことを学びたいが、こういう初歩的なことが出来ないのが俺の現状なのだから、仕方ない。 そもそもPullRequestを送ったこともなかったわけだし。入社初日は、一人でPullRequestの出し方を練習していた。 それを考えればまあ、こんなものだろうか。 当たり前のことをちゃんと当たり前に出来るようになって、早く、次のステージに進みたい。 PullRequest(PR) PRのタイトルは分かりやすいものに。必要に応じてチケットの番号なども入れる。 コミットやPRは出来るだけ粒度を細かくす
package.json やロックファイルによるパッケージの依存関係の管理 - 30歳からのプログラミング
この記事では、npm installやnpm ciを実行したときにどのようにパッケージがインストールされるのか、依存パッケージにバージョンのコンフリクトが発生した際にどのように処理されるのか、などを見ていく。必要に応じて Yarn での挙動にも触れる。 動作確認に使った npm のバージョンは6.14.5。Yarn は1.22.4。 特に npm はバージョンによって動作が大きく異なるので、注意する。 package-lock.json によるバージョンの固定 package.jsonだけではインストールするパッケージのバージョンを固定できず、package-lock.json（Yarn の場合はyarn.lock）によってバージョンを固定する。 多くの人が知っている話ではあるが、重要な機能なので改めて触れておく。 package.jsonのdependenciesやdevDependen
Promiseによる非同期処理の書き方 - 30歳からのプログラミング
JavaScriptは基本的に逐次処理、同期処理であり、上から順番にプログラムが実行されていく。 x行目の処理が終わってからx+1行目の処理を行う、という具合に、一つ一つ実行していく。 非同期処理を行うための方法も以前から用意されていたが、ES2015で導入されたPromiseによって、より簡便に実装できるようになった。 なお、ここに書かれているものは全て、v6.4.0のNode.jsで実行した結果である。他の環境だと、ログの内容が異なるかもしれない。 Promiseの基本 new Promise()でPromiseのインスタンスを作り、それを操作することで非同期処理を管理していく。 new Promiseの引数には関数を渡す。 そしてその関数の第一引数としてresolveを、第二引数としてrejectを設定し、処理が上手くいったら前者を、失敗したら後者を実行する。 不要であれば、reje
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
