JavaScript/TypeScript
こんにちは！ スマレジ テックファームのMichiです！ 今回はFastifyでREST APIを開発するときに、自分でYAMLファイルを定義せずとも、自動でOpenAPI形式の仕様書を生成する方法を解説します。 技術スタック 実装 プロジェクの作成 エンドポイントの作成 基盤…
こんにちは！ スマレジ テックファームのMichiです！ TypeScriptのthisは不思議な動きをすることで有名です。自分も定期的に調べては忘れてしまうので、今回は忘備録として残しておきます。 thisとは？ 呼び出し方によってthisの値が変わる？ アロー関数はth…
こんにちは！ スマレジ テックファームのMichiです！ 今回はタイトルの通り、React Hook Formでコンポーネントを分割する方法をご紹介します。 解説 サンプル サンプルとして、 メールアドレス、ユーザー名、パスワードを入力するシンプルな登録フォームを用…
こんにちは！ スマレジ テックファームのMichiです！ 今回は、Reactのレンダリング最適化について自分なりに調べたことをまとめていきます。 Reactのコンポーネントが再レンダリングされるとき レンダリングの最適化方法 コンポーネントを適切に分割する 悪…
こんにちは！ スマレジ テックファームのMichiです！ 今回の記事では、ZodというTypeScriptのライブラリに入門してみます。 Zodとは？ 使ってみる スキーマとバリデーションの設計 TypeScriptの型生成 React Hook Formとの連携 まとめ Zodとは？ 公式ドキュ…
こんにちは！ スマレジ テックファームのMichiです！ 先日、WindowsでNext.jsの環境構築をしているときに、いくつかOS起因で詰まったところがあったので、メモとして残しておきます。 環境 opensslコマンドがない 解決法 「'NODE_OPTIONS' は、内部コマンド…
こんにちは！ スマレジ テックファームのMichiです！ 先日、Reactを使ったアプリ開発において、モバイル版のタッチイベントが発生しないというバグに遭遇しました。そして、このバグがReactのライブラリやブラウザの仕組みにも深く関わっているということが…
こんにちは！ スマレジ テックファームのMichiです！ 今回はTypeScriptのUtility Typesについて整理します。 Utility Typesとは？ 代表的なUtility Types Readonly Partial Required Pick Omit Extract Exclude NonNullable Record まとめ Utility Typesとは…
こんにちは！ スマレジ テックファームのMichiです！ 間が空きましたが、久しぶりにTypeScriptのキャッチアップに戻ります。今回は『TypeScriptの型の絞り込み機能』について学びます。 1. typeof 演算子 typeof を使った絞りこみ typeof の結果 2. 等価演算…
こんにちは！ スマレジ テックファームのMichiです！ 今回は実務でつまずいたところの話です。 記事を書こうと思った経緯 実装 バックエンド(Django) フロントエンド(Vue.js) まとめ 記事を書こうと思った経緯 今の現場ではバックエンドがDjango(Python)、フ…
こんにちは！ スマレジ テックファームのMichiです！ 前週に引き続き、TypeScriptのキャッチアップをしていきます。今回は『型引数とジェネリクス』についてです。 型引数（ジェネリック型） ジェネリック型の宣言 ジェネリック型を使用する オプショナルな…
こんにちは！ スマレジ テックファームのMichiです！ 6月はTypeScriptキャッチアップ月間として、学んだことを記事にしていきます。 今回はその中でも、考え方にドハマりした『部分型』の考え方について、復習がてら分かりやすく解説します。 部分型とは？ …
こんにちは！ スマレジ テックファームのMichiです！ 前週に引き続き、Reactのキャッチアップをしていきます。今回は『グローバルステートの管理』について学びます。 グローバルステートの管理方法 Contextを使用する方法 外部ライブラリを使用する方法（Re…
こんにちは！ スマレジ テックファームのMichiです！ 前週に引き続き、Reactのキャッチアップをしていきます。今回は、『Reactのルーティング』について学びます。 はじめに 基本的なルーティング Not Foundページの設定 ネストされたルーティング ルーティ…
こんにちは！ スマレジ テックファームのMichiです！ 前週に引き続き、Reactのキャッチアップをしていきます。今回は、『レンダリングの最適化』について学びます。 コンポーネントが再レンダリングされる条件 サンプルコード memo - コンポーネントのメモ化…
こんにちは！ スマレジ テックファームのMichiです！ 前回の記事『Webエンジニアへ転職して1年が経ちました』で書いた通り、Q1（5月～7月）は「React/TypeScriptの習得」を目指します。 その第一段階として、5月はReactの基礎を固めていきます。教材はUdemy…
こんにちは！ スマレジ テックファームのMichiです！ この記事は、『JavaScriptの非同期処理についてまとめてみた①』の続きになります。 前回のおさらい Promise 完成形 解説 でも、まだちょっと分かりにくくない…？ async/await 完成形 解説 まとめ 前回の…
こんにちは！ スマレジ テックファームのMichiです！ よくエンジニアの会話の中で、 「JavaScriptは非同期処理やからな～」 というような会話が聞こえてきます。それに対して、 ワイ「いや～、そうっすよね～（適当）」 っていう返事を数カ月前まではしてい…
こんにちは！ スマレジ テックファームのMichiです！ 今回はタイトルの通り、バニラJS（生のJavaScript）でAjaxを実装してみます。 はじめに 作るもの 郵便番号検索API バニラJSで実装してみよう！ 完成形 解説 ①[検索]ボタンクリック時の処理 ②非同期通信の…
こんにちは！ スマレジ テックファームのMichiです！ 突然ですが、Vue.jsのコードでreactiveなオブジェクトをconsole.logしたらこんな値が返ってきます。 「このProxyってやつ、なんすか？」とずっと思っていたので、調べてみることにしました！ Proxyとは？…
こんにちは！ スマレジ テックファームのMichiです！ JavaScriptのインポートとエクスポートのルールってたくさんあってややこしいですよね...。 というわけで、今回の記事で整理していきたいと思います。 基本形 個別にエクスポートする まとめてエクスポー…
こんにちは！ スマレジ テックファームのMichiです！ 今回の記事は「JavaScriptを完全に理解する」シリーズのオブジェクト指向編です。 JavaScriptのオブジェクトとは？ クラスを定義する ゲッターとセッター 静的プロパティ/メソッドを定義する 既存のクラ…
こんにちは！ スマレジ テックファームのMichiです！ この記事は「JavaScriptの関数を完全に理解する①」の続きです。 前回で書ききれなかったJavaScriptの関数について整理していきます。 引数のデフォルト値 可変長引数 名前付き引数 複数の戻り値を返した…
こんにちは！ スマレジ テックファームのMichiです！ 今回は「JavaScriptの関数を完全に理解する」というテーマで、JSの関数について整理したいと思います。 function命令で定義する 基本形 無名関数（匿名関数） 関数リテラル表現で定義する アロー関数で定…
この記事は「つながる勉強会 Advent Calendar 2022」の12日目の記事です。 こんにちは！ スマレジ テックファームのMichiです！ 今回はJavaScriptの日付型でハマった罠についてご紹介します。 やりたいこと とある勤怠管理システムで、検索の対象範囲として…
こんにちは！ スマレジ テックファームのMichiです！ 今回はJavaScriptの基本的な内容ですが、意外と知らなかったので記事にします。 やりたいこと 原因 解決策 その① varを使う その② ifの外で最初に変数を宣言する その③ 三項演算子を利用する まとめ やり…
