こんにちは！ 今回はfetchをNext.jsで使うパターンについてまとめます。 個人的に見かけるパターンをまとめただけなので、特に名前がついているわけではないです。 fetchをNext.jsで使うパターン 今回は次の3パターンについてまとめる Then+catchパターン As…

こんにちは！ 今回はJavaScriptのFetchとResponseについてまとめます。 今回のテーマ async function fetchData{ const response = await fetch('http://.....'); const data = await response.json(); } fetchを記述した時にこのようなコードをよく見かける…

こんにちは！ 今回はJavaScriptの非同期処理シリーズ第三弾、async/awaitについてまとめます。 async/awaitとは まず読み方はasync(エイシンク)、await(アウェイト)なので注意。 async/awaitを使って前回までのコードを書き直した例が次の通り。 let val = 0…

こんにちは！ 今回はJavaScriptの非同期処理第二弾、Promiseについてまとめます。 Promiseとは Promiseとは、非同期処理におけるコールバック地獄を解決するために考えられた仕組みであり、Promiseオブジェクトとして扱う。Promiseを使うことで、ネストが深…

こんにちは！ 今回はJavaScriptでの非同期処理を説明する第一弾として、コールバック地獄について説明します。 同期処理と非同期処理 JavaScriptはシングルスレッドで動作するため、コードは順番に処理されていく。次の処理を行うためには、一つ前の処理が完…

こんにちは！ 今回はReact Hook Formの基本まとめの4回目（最終回）です。 formProvider 親コンポーネント import { useForm, FormProvider } from 'react-hook-form' import ChildComponent from '/ChildComponent'; const ParentForm = () => { const meth…

こんにちは！ 今回は前々回、前回に引き続きReact Hook Form (RHF) についてまとめます。 Controllerパターン RHFの ...register で input タグをRHFの管理下に置くやり方は、HTMLの基本的なタグにしか使用できない 理由は、onChangeや onBlur、onRef などの…

こんにちは！ 今回は前回に引き続き、React Hook Form (RHF) についてまとめます。 zodと組み合わせるパターン import { useForm } from 'react-hook-form' import { z } from 'zod' import { zodResolver } from '@hookform/resolvers/zod' const schema = …

こんにちは！ 今回はReact Hook Formについてまとめます。 React Hook Formとは Reactのフォームライブラリ 簡潔な記述でコード量を減らしながら、レンダリングを抑えることが出来るのでパフォーマンスも向上する 以下RHFと略す RHFのみ使用する場合 まずは…

こんにちは！ 今回はzodの基本についてまとめます。 zodとは TypeScriptファーストのValidationライブラリ React Hook Formと連携して使うことが可能 スキーマの宣言 スキーマとは、単純な文字列やオブジェクトなどの幅広いデータ型を指す サンプルコード co…

こんにちは！ 今回はMUI（Material UI）の基本についてまとめます。 MUIの特徴 GoogleのMaterial Designガイドラインに準拠したデザイン 高機能で豊富なコンポーネント テーマを自由にカスタマイズして値を使用可能 MUIのコンポーネントの特徴 sxでスタイル…

こんにちは！ 今回は「現場で使える Ruby on Rails 5速習実践ガイド」を読んだ感想についてまとめます。 現場で使える Ruby on Rails 5速習実践ガイド作者:大場 寧子,松本 拓也,櫻井 達生,小田井 優,大塚 隆弘,依光 奏江,銭神 裕宜,小芝 美由紀マイナビ出版A…

こんにちは！ 今回はREST APIについてまとめます。 REST APIはRESTの原則に則ったWeb APIのことです。 では、それぞれの用語についてみていきましょう。 APIとは Application Programming Interfaceの略 プログラム同士が情報をやり取りするためのインターフ…

こんにちは！ 今回は「達人に学ぶDB設計 徹底指南書」を読んだ感想についてまとめます。 達人に学ぶDB設計徹底指南書: 初級者で終わりたくないあなたへ作者:ミック翔泳社Amazon 良かったところ DB設計について論理設計と物理設計の両側面から学べる 「勘どこ…

こんにちは！ 今回はスッキリわかるSQL入門を読んだ感想をまとめます。 スッキリわかるSQL入門 第3版 ドリル256問付き! (スッキリわかる入門シリーズ)作者:中山 清喬,飯田 理恵子インプレスAmazon 良かったところ 最初の1冊に最適 図解が豊富 キャラクターと…

こんにちは！ 今回はRubyのoptparseの使い方についてまとめます。 optparseとは コマンドラインのオプションを取り扱うライブラリ opt -> オプション parse -> 解析 使用例 require 'optparse' # optparseの読み込み opt = OptionParse.new # OptionParserオ…

こんにちは！ 今回は「プロを目指す人のためのRuby入門」を読んだ感想をまとめます。 プロを目指す人のためのRuby入門[改訂2版] 言語仕様からテスト駆動開発・デバッグ技法まで (Software Design plus)作者:伊藤 淳一技術評論社Amazon 良かったところ 内容が…

こんにちは！ 今回はRailsをDockerで構築した際に引っかかったエラーについてまとめます。 環境 ruby 3.2.2 rails 7.0.6 Docker Desktop 4.28.0 WSL2 postgresql 12 エラー① ActiveRecord::ConnectionNotEstablished エラー発生タイミング docker compose up…

こんにちは！ 今回はGithub PagesでWebサイトを公開する方法についてまとめます。 目次 目次 Github Pagesとは Github PagesでWebサイトを公開するには 前提 手順 1. リポジトリの作成 2. ファイルのアップロード a. 直接アップロードする方法 b. git pushす…

こんにちは！ 今回は最近覚えたEmmetについてまとめます。 HTML タグ名.class名 クラス名を自動で付ける タグ名.class名|c 閉じタグの後に、というコメントを付ける CSS m20 margin: 20px emmet CSS m margin: ; mt margin-top: ; mr margin-right: ; mb mar…

こんにちは！ 今回はPRECSSの書き方を簡単にまとめてみました。 PRECSSとは PRESCSS（プレックス）とは、prefixed CSS（接頭辞付きのCSS）の略 CSS設計完全ガイドの著者が開発 CSSを次の6グループに分ける ベース レイアウト モジュール ブロックモジュール …

こんにちは！ 今回はCSSの疑似要素でリストのマークを作る方法についてまとめます。 今回作るリスト サンプルコード <ul> <li>list1</li> <li>list2</li> <li>list3</li> </ul> CSSの疑似要素で実装 ul li { position: relative } ul li::before { content: ""; width: 10px; height: 10px; borde…

こんにちは！ 今回はCSSのdisplay: inline-flexについてまとめます。 display: inline-flexとは？ flexコンテナを定義するが、コンテナ自体はinline要素のように横に要素を並べられる 見出しなどで便利 やりたいこと タイトルの前に正方形、中央揃えで数字を…

こんにちは！ 今回はposition: absolute時に中央揃えをする方法についてまとめます。 やりたいこと position: absoluteで親要素に対して中央揃えをしたい コード例 <div class="parent"> <div class="child">Lorem</div> </div> .parent { background-color: khaki; height: 300px; width: 500px; position: rela…

こんにちは！ 今回はCSSでmax-width: 100%を指定する理由についてまとめます。 コード na-ah.hatenablog.com コードは前回と同様 ウインドウ幅を狭めた場合の挙動を比較 min-width: 300pxの場合 最小でも300pxという指定をしているため、ウィンドウ幅が300px…

こんにちは！ 今回はCSSのmin-widthとwidth、max-widthの違いについてまとめます。 ボタン例 <a href="#" class="btn">Lorem...</a> .btn { display: inline-block padding: 20px 10px; /* width: 300px or min-width: 300px or max-width: 300px */ } inline-block要素の場合 min-width:…

こんにちは！ 今回はCSSでボタンをinline-blockにする理由についてまとめます。 ボタン例 <a class="btn" href="#">ボタン</a> .btn { width: 300px; padding: 20px 10px; /* display: inline or block or inline-block? */ } inline要素の場合 width: 300pxの指定が効かない padding: 20…

こんにちは！ 今回はCSSのcalcが便利だったことについてまとめます。 やりたいこと 画像のように、メインのコンテナからは離れた場所にボタンなどのサイドバーを設置したい 今回の方法 今回はposition: absoluteで指定することにした ただ、leftで位置を指定…

こんにちは！ 今回はCSSは階層が深い方の優先度が高くなるということについてまとめます。 問題 レスポンシブなページを作っているときに、メディアクエリで正しくクラスを指定しても反映されない 解決方法 メディアクエリを使用していない箇所と同じ階層構…

こんにちは！ 今回はChrome DevToolsの基本操作についてまとめます。 Chrome DevToolsとは Google Chromeに付属しているWeb開発に役に立つツール DeveloperTool、デベロッパーツール、開発者ツールとも呼ばれる HTML、CSS、JavaScriptの動作を詳細に検討でき…