こちらの本を読みました！ 良いコード／悪いコードで学ぶ設計入門 [ 仙塲 大也 ]価格: 3278 円楽天で詳細を見る もう何年も仕事で超絶レガシーコードを触っていて嫌になることが多々あるので、そして自分もレガシーコードを書いている気がして不安になるので…

こちらの本を読みました。とっても勉強になりました！ フロントエンド開発のためのテスト入門 今からでも知っておきたい自動テスト戦略の必須知識 [ 吉井 健文 ]価格: 3080 円楽天で詳細を見る 読もうと思ったわけと感想 テストを導入の必要性はとても感じて…

Jest で書かれた複雑なテストコードを読んでいると、 モック関数である jest.fn() と jest.spyOn() の用法で混乱してしまうので、超シンプルなコードで要点を押さえておく。自分用メモ。 jest.fn() test("jest.fn", () => { const mockFn = jest.fn(); mockF…

問題のコード Jestでテストしたかったのは、TypeScriptでfetch()を使った簡単な関数。 export function getData(): Promise<Profile> { return fetch("https://jsonplaceholder.typicode.com/users").then(handleResponse); } 事象に直接は関係ないけど、テストコード</profile>…

最近は、こちらの本でフロントエンドのテストについて勉強しています。テストって書いた方がいいんだろうな〜と思いながらもとっつきにくいというか何をしたらいいか分からなかったので、体系的に学べるのは大変助かるしとても勉強になります！ フロントエン…

ことの発端 Laravelでページネーションを実装するためにbladeに以下のコードを書いたところ、表示がめっちゃ崩れました。 {{$items->links()}} 矢印でかっ {{$items->links()}} で自動的に生成されるHTMLを見てみたら、 flex items-center ...などのclassが…

現在、こちらの本で、よくわからないままなんとなく使っていたLaravelを学び直しています。 PHPフレームワークLaravel入門第2版 [ 掌田津耶乃 ]価格: 3300 円楽天で詳細を見る 今までなんでもかんでもコントローラに書いて肥大化しがちだったので、この処理…

Laravelのリダイレクトって、書き方が色々あってちょっと頭がごっちゃになるので調べたことの整理。 redirect関数 10.x HTTPリダイレクト Laravel 基本的には、 redirect がリダイレクトを実行するためのヘルパ。引数ありで呼び出した場合と、引数なしで呼び…

現在、Laravelを勉強中です。 Laravelのbladeでバリデーションエラーを扱うには $errors 変数が大変便利ですが、初歩的なことでちょっとハマったのでメモ。 やりたいこと 何かしらバリデーションエラーが発生した時にblade側でメッセージを表示したい。 NG例…

Flowとは Flow: A Static Type Checker for JavaScript | Flow JavaScriptコードに型情報を付与するための言語拡張。最近ではTypeScript一強でFlowが選択されることはほぼないと思いますが、ちょっと試しに動かしてみる必要があったためインストールしました…

JavaScriptで最も使われているバグ発見ツールであるESLintをインストールします。 eslint.org シンプルなNode.jsファイルに対して、ターミナル上からESLintを実行することを想定しています。 まずは公式サイトに書いてある通りに、プロジェクトディレクトリ…

やりたいこと サーバー送信イベント - Web API | MDN Server-Sent Eventsとは、ロングポーリングのための便利なインターフェース。ロングポーリングとは、Webサーバとのネットワーク接続を開き続けて、サーバから必要なときにクライアントにデータを送信でき…

Node.jsで、ネットワークから値を取得したときにはもちろん非同期処理となるわけですが、取得した値をどうやって呼び出し元に返すか、のまとめです。 最初は httpsモジュールを使っていたのですが、どうやら最近のNode.js(v18以降)は fetch() が使えるように…

イテレータとジェネレータという言葉だけで、なんか難しそう…と思っていたのですが、ちゃんと勉強してみたらそんなに恐れることでもなかったです。 反復可能（イテラブル）とは イテレータは、オブジェクトを反復可能にするよ。反復可能っていうのは、for/of…

console.table() がめっちゃ便利なの知らなかった！ console.table() - Web API | MDN console.table()は配列orオブジェクトを引数で受け取り、表形式で出力してくれるConsole APIのようです。 let obj1 = { a: "aaa", b: "bbb", c: "ccc" }; console.table(…

JavaScriptのクラス定義の書き方が、ES2022以降に変化したことを知った(遅い)ので、そのまとめです。 主にクラスフィールドの定義を、スタイリッシュに分かりやすく書けるようになったみたいです。 パブリッククラスフィールド パブリッククラスフィールド -…

前回の記事の内容では不十分だったので、その続き。 （すぐに記事にしたかったのに色々あって1ヶ月も空いてしまった） aya-cat-g-tech.hatenadiary.jp 非同期でページング処理をしている画面にて、History: pushState()を使ってURLにページ番号を付与するよ…

来月から仕事を休職させてもらうことになりました‍♀️ 休職の理由は、不妊治療と仕事との両立で、メンタルが限界になってしまったことです。 不妊治療は1年半ほど続けています。タイミング法や人工授精を1年続けましたが、全くなんの成果も得られず、昨年冬か…

やりたいこと JavaScriptで非同期(ajax)でデータを取得している、あるWebページがありまして、ページング時にもURLは変わらない（ページ遷移しない）作りだったのですが。SEO的な観点で、ページングしたらページ番号をURLに付与したくなりました。いまさら非…

JavaScriptで関数を定義する時、書き方が色々あって、それぞれの特徴も色々あって、頭がごっちゃになることがあるので自分用にまとめたいと思います 関数宣言文 function 宣言 - JavaScript | MDN 一番基本的な関数定義。 function square(x) { return x * x…

長年付け焼き刃的な知識だけでJavaScriptを書いてしまっていることが、そろそろ看過できなくなってきたため、こちらの本で体系的に学び直しをしている最中です。 JavaScript 第7版 [ David Flanagan ]価格: 5060 円楽天で詳細を見る 現在4分の1程度を読み終…

CSSはコーダーさんに任せっぱなしてあまり自分で書くことがなかったのですが、このままではいかんと思って、最近できるだけ自力で書くようにしています。学ぶことが多いです。 やりたいこと 要素(ボタン)を画面の最下部に固定したい。けど、最後までスクロー…

new Date()の罠 ある残り時間を表示するための以下のコードで、海外のユーザーから「残り時間がずれているよ！」と指摘をいただきました。 NG let endDate = "2024/03/12 22:00:00"; // この値は実際にはAPIから取得した値なので変更不可 // タイムスタンプ…

少し前にこちらの本を拝読しました。 1日1問、半年以内に習得 シェル・ワンライナー160本ノック [ 上田 隆一 ]価格: 3520 円楽天で詳細を見る 読もうと思ったわけ サーバーを触ることはあるので、基本的なコマンド操作はできるのですが、|とか>とか&とかが出…

長年JavaScriptを使っていても、いまだに、基本的なところで「あれ！？」と思う挙動にぶち当たることがあります。 配列(オブジェクト)同士の比較 let array1 = ["a", "b", "c"]; let array2 = ["a", "b", "c"]; console.log(array1 == array2); // false 配…

JavaScriptで開発をしていると、サクッとコンソールでjsのサンプルコードだけ動かして動作確認したいことがあります。 今まではChromeのコンソールでやっていましたが、ちっちゃくて書きにくいし整形できないしいまいちなので、VSCode上で実行したい…。node…

新しいMacBook Airを手に入れたので、Laravelの開発ができるようにVSCodeを整備していきます。 前のPCでは、とりあえず何でもかんでも拡張機能を入れてよく分からなくなってしまったので、今回はきちんと理解しながら最小限の布陣にしたいと思っています。 …

MacBookAir(M2)を買いました❣️ エンジニアをやっている分際で、自分のPCを5年くらい所持していなかった（iPadと会社支給のMacで満足していた）ので、とても久しぶりに新しいPCを触ります。ずっと欲しいと思っていたAirが、M3モデルの登場によってM2が少しお…