ReactでGoolgeカレンダーっぽいものをなるべく簡単につくってみる。
Reactで「Googleカレンダーのようなカレンダーを作りたいな。」と思って、作成したときのメモです。 コードの全量:GitHub 目次 1.環境の説明 2.環境の準備 3.実装 — 3.1.とりあえずカレンダーを表示する。 — 3.2.予定登録用フォームを作成する。 4.終わりに ※このカレンダーで実装できていないこと。 ・予定の変更/削除。 環境の説明 言語 Typescript 使用するライブラリ一覧 create-react-app (公式サイト) Reactの環境を作成してくれるもの。1からReactの環境を作成しようとすると結構手間がかかりますが、これだとコマンド一発で構築してくれるのでとても便利。 @material-ui/core (公式サイト) マテリアルデザインが簡単に実装できるライブラリ。別プロジェクトで使っていたため今回も採用。 今回は、Styleを定義できるHo
婚活は絶対したくねぇなって思った｜くぼ｜note
電車で通勤してると、「高望みから始めよう」なんて書いてある婚活仲介業者の広告を見る。これは男女両方に言ってるのだろうか。男性に対しては「ぐうかわなヨメさんゲットしましょうよ」、女性に対しては「高学歴大企業高収入の優良物件をダンナさんにしちゃいましょうよ」みたいな。 個人の勝手な感性で言えば、この広告は女性向けのウェイトが強いのではないと思う。一般的に結婚や家庭というと、やはり男性が稼いでなんぼ、守ってなんぼという傾向がまだまだ強いからだ。つまり結婚というのは、特にその前段階においては、男性が女性に求めるものよりその逆に主眼が置かれる傾向にあるからだ。 旦那さんが嫁さんの家に行って家族に結婚の許可をもらうのはよくあることだけど(娘さんを僕にください！)、逆はないでしょ？やっぱり結婚っていうのは男が女を守るものなんですよね。だから高望みというと、女性の男性に対する望みなんでないかと思う。 高望
TypeScript のジェネリック型の初歩 - 30歳からのプログラミング
ジェネリック型は、型を定義したときには具体的な型を指定せず、型を利用する際に具体的な型が決まる仕組み。 後述するが、プレースホルダや関数のパラメータのようなものだと考えると、分かりやすい。 ジェネリック型はそれ自体が便利だし、TypeScript の他の機能と組み合わせることで複雑な型も表現できるようになる。 この記事の内容は TypeScript のv3.9.5で動作確認している。 宣言時には型が決まらず、あとから具体的な型がバインドされる 以下に、関数の型を 3 つ定義している。 type Foo = (arg: number) => number; // number を受け取り、number を返す type Bar = (arg: string) => string; // string を受け取り、string を返す type Baz = <T>(arg: T) => T;
React Hook Formとは？煩雑なフォームのstate管理を楽に実装する！ - stmn tech blog
目次 はじめに Reactを使用したフォーム設計パターンについて React Hook Formとは ? React Hook Formの基本機能の紹介 React Hook Formのユースケース 最後に はじめに こんにちは、株式会社スタメンでエンジニアをしています、ワカゾノです。 Rails、Reactを使用して、弊社プロダクトTUNAGの機能開発を行っています。 直近のプロジェクトにおいて、Reactでフォームを実装する必要がありました。 要件としては、下記のようになります。 新規作成時、編集時のフォームをerbから、Reactへリプレイス 1画面毎に3 ~ 6つのフォームが存在、それを10数画面分実装 各フォームの入力値に応じて画面の表示を動的に変更する 例) 選択しているラジオボックスにより、フォーム要素の表示、非表示を切り替える 各フォームに細かいバリデーションが必要 例 )
react-hook-formとReact Datepickerを組み合わせる
Next.jsアプリケーションでフォームを扱う必要があったので、React Hook Formを利用した。 また、カレンダーから日時選択ができるようにしたかったのでReact Datepickerと組み合わせることにした。 components/DatePicker.tsxHook FormのControllerのドキュメントを参考にDatePicker用のコンポーネントを作成。 import 'react-datepicker/dist/react-datepicker.css' import React from 'react' import ReactDatePicker from 'react-datepicker' import { Control, Controller, Path } from 'react-hook-form' type Props<T> = { label
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
