1
/
5

技術ブログ

Trending Posts

Reactでローディング、エラー画面をササッと作る

はじめに Webアプリをつくるにあたって、メインではないけれども重要な要素があります。 それが以下の2つです。 ローディング画面 →データ取得などに時間がかかるときに表示される。 エラー画面 →何らかの意図しない操作などがあったときに表示される。 今回はこれらの画面をササッと作る方法を確認します。 「ササッと」...

吉田 光輔
吉田 光輔
システム開発事業部
4 months ago,

Reactのライブラリを駆使して、それっぽいアンケートフォームを作ろう

はじめに Reactには開発を便利にするための様々なライブラリがあります。 今回はフォーム作成に欠かせないFormikと、キレイめなUIを作ってくれるMaterial-UIを使って実用的なフォームを作成する方法を確認します。 長編です。 今回のゴール 以下のようなフォームを作成します。 バリデーションも設定します...

吉田 光輔
吉田 光輔
システム開発事業部
5 months ago,

useMemo、useCallback、useEffectの違いを理解する

はじめに Reactにはさまざまなフックが用意されています。 その中でも、useMemo、useCallback、useEffectは第1引数に関数、第2引数に依存配列を指定するフックです。 依存配列の値が更新されたときに、関数の再実行が行われます。 業務で使っていてあまり違いが理解できなかったので、一つずつ役割...

吉田 光輔
吉田 光輔
システム開発事業部
2 months ago,

ゼロからPrismaを導入して、Prismaの基本をマスターしよう

はじめに 前提 環境 Prismaの導入 下準備 DB関連設定 テーブルの生成 データベースの操作 下準備 データの登録 データの取得 データの更新 データの削除 まとめ はじめに PrismaはNode.jsとTypeScriptのORMです。 業務で使っていますが、なんとなく使っていて基本を理解していなかった...

吉田 光輔
吉田 光輔
システム開発事業部
25 days ago,

useReducerって結局どうやって使えばいいの？という話

はじめに ReactHooksの1つにuseReducerがあります。useStateと同じように状態を管理できるフックです。 結構複雑なので、私は苦手意識を持っています。 改めて基本構造を確認し、現場で使われる実践的なものがどのようなものかを確認していきます。 useReducerの基本構造 基本的には以下の形...

吉田 光輔
吉田 光輔
システム開発事業部
6 months ago,

Latest Posts

ゼロからPrismaを導入して、Prismaの基本をマスターしよう

はじめに 前提 環境 Prismaの導入 下準備 DB関連設定 テーブルの生成 データベースの操作 下準備 データの登録 データの取得 データの更新 データの削除 まとめ はじめに PrismaはNode.jsとTypeScriptのORMです。 業務で使っていますが、なんとなく使っていて基本を理解していなかった...

吉田 光輔
吉田 光輔
システム開発事業部
25 days ago,

useMemo、useCallback、useEffectの違いを理解する

はじめに Reactにはさまざまなフックが用意されています。 その中でも、useMemo、useCallback、useEffectは第1引数に関数、第2引数に依存配列を指定するフックです。 依存配列の値が更新されたときに、関数の再実行が行われます。 業務で使っていてあまり違いが理解できなかったので、一つずつ役割...

吉田 光輔
吉田 光輔
システム開発事業部
2 months ago,

Reactでローディング、エラー画面をササッと作る

はじめに Webアプリをつくるにあたって、メインではないけれども重要な要素があります。 それが以下の2つです。 ローディング画面 →データ取得などに時間がかかるときに表示される。 エラー画面 →何らかの意図しない操作などがあったときに表示される。 今回はこれらの画面をササッと作る方法を確認します。 「ササッと」...

吉田 光輔
吉田 光輔
システム開発事業部
4 months ago,

Reactのライブラリを駆使して、それっぽいアンケートフォームを作ろう

はじめに Reactには開発を便利にするための様々なライブラリがあります。 今回はフォーム作成に欠かせないFormikと、キレイめなUIを作ってくれるMaterial-UIを使って実用的なフォームを作成する方法を確認します。 長編です。 今回のゴール 以下のようなフォームを作成します。 バリデーションも設定します...

吉田 光輔
吉田 光輔
システム開発事業部
5 months ago,

技術に出会えるお祭り『技術書典16』に行ってみた

今回は、技術書典16に参加した清水さんが作成したレポートの代筆投稿になります。 システム開発部のエンジニア・足立さん、吉田さんに引き続き、BabyTech事業部のエンジニア・清水さん、ご協力ありがとうございます😭✨ ※この記事は、技術書典運営事務局は関与していない非公式の情報です。 初めまして、関東でフロントエ...

naomi yamashita
naomi yamashita
BabyTech事業部・管理部
5 months ago,

useReducerって結局どうやって使えばいいの？という話

はじめに ReactHooksの1つにuseReducerがあります。useStateと同じように状態を管理できるフックです。 結構複雑なので、私は苦手意識を持っています。 改めて基本構造を確認し、現場で使われる実践的なものがどのようなものかを確認していきます。 useReducerの基本構造 基本的には以下の形...

吉田 光輔
吉田 光輔
システム開発事業部
6 months ago,

Reactのコンポーネントの基礎をマスターする

はじめに ReactでUIを構築するうえで、避けて通ることのできない最も重要なものがコンポーネントです。 コンポーネントを使わないReactはありえないと言っても過言ではないほどです。 そんなコンポーネントについて、概念や使い方を基礎からしっかり解説します。 コンポーネントの基礎 繰り返し使えるUIの必要性 以下...

吉田 光輔
吉田 光輔
システム開発事業部
7 months ago,

Reactを覚えるために、ブラウザ上でじゃんけんしてみた

はじめに 前回 に引き続き、普段Javaを書いているわたしがReactで学んだことを共有します。 今回はuseStateという情報を保持するための機能について確認します。 じゃんけんをしたい 唐突ですが、無性にじゃんけんがしたくなりました。 以下のような仕様をみたすじゃんけんプログラムを作ってみます。 ・グーチョ...

吉田 光輔
吉田 光輔
システム開発事業部
9 months ago,

Reactを知るために、あえてReactを使わずに実装するとどうなるのかを考えてみた

はじめに 初めまして、仙台でバックエンドエンジニアをしている吉田です。 簡単にまず自己紹介をすると、JOINT CREWには2023年の7月に入社し、入社当初からお客様のECサイトの開発に携わっています。 その前は別の会社で5年間主にSESで色々なシステムの開発・保守を行っていました。 最後の2年間は受託開発で建...

吉田 光輔
吉田 光輔
システム開発事業部
10 months ago,
space-avatar-image
技術ブログ
エンジニアが書いたブログ記事を紹介します。
Followers
9
Posts
10
Likes
space-external-link-icon
株式会社JOINT CREW

タグや日付から探す

タグ
日付