やる事 今回は、日本語と英語を切り替えるボタン実装し、ボタンを押したら画面に表示されている言語を日本語と英語に切り替える多言語対応の実装をしていきます。 ※ Next.js + Typescriptプロジェクトの環境は構築済みのものとして進めます。 i18next とは 初めに、i18next がどういうものかを簡単に紹介したいと思います。 i18next は、ドキュメントにもあるように、JavaScript で記述された国際化フレームワークで、翻訳・多言語対応を提供してくれます。また、React 以外にも、Node.js、PHP でも使用できるそうです。 また、i18nとは「国際化対応 (Internationalization) 」の略らしいです。 実行環境 今回は以下の環境で実装していきます。 React : 18.3.1NextJs : 14.2.15Typescript : 5.
typescriptに関するstibbarのブックマーク (29)
-
stibbar 2024/12/02
-
【TypeScript】Utility TypesのReturnTypeを深く理解する - Qiita
この記事は何？ この記事は、Utility Typesの一つであるReturnTypeについて深く理解する記事です。 Utility Typesってそもそも何？という型（方）は以下の記事を御覧ください🙇🏻 👉 TypeScriptのUtility Typesを理解して活用する そもそも、TypeScriptって何？って型は以下を御覧ください 👉 JavaScriptを知っている方がTypeScriptをなんとなく理解するための記事① ~はじめに~ ReturnType＜Type＞とは TypeScript公式には以下のように書かれています。 Constructs a type consisting of the return type of function Type. 関数型の戻り値の型で構成される型を構築します。 https://www.typescriptlang.org/d
-
lambdaにTypeScriptをデプロイする手順(zip) - Qiita
はじめに TypeScriptをlambdaにデプロイする方はServerless FreamworkやSAMなどがあります。 しかし、installや設定などの事前準備が必要で、手軽ではありません。 そこで今回は簡単にデプロイして動作確認するために、zip化してデプロイする手順を記載していきます。 事前準備 typescriptのインストール npm install -g typescript AWS CLI AWS CLI のインストール lambda関数の作成 あらかじめ、AWSコンソールやcliでlambda関数を作成しておきます。 プロジェクトの作成 下記の構成でファイルを作成していきます。 ├─ src │ └─ index.ts # TypeScriptソース ├─ package.json # パッケージ設定ファイル ├─ tsconfig.json # TypeScrip
-
TypeScriptの等価演算子(==)と厳密等価演算子(===)について - Qiita
等価演算子(==)と厳密等価演算子(===)とは JavaScriptでもそうですが、基本的にTypeScriptでも 等価演算子(以下、==)ではなく、厳密等価演算子(以下、===)を用いることが推奨されています。 というのも==と===は厳密には違う挙動をします。 等価演算子 (==) は、二つのオペランドが等しいことを検査し、論理値で結果を返します。厳密等価演算子とは異なり、オペランドの型が異なる場合には型の変換を試みてから比較を行います。 厳密等価演算子 (===) は、二つのオペランドが等しいことを検査し、論理値で結果を返します。等価演算子とは異なり、厳密等価演算子はオペランドの型が異なる場合、常に異なるものと判断します。 実際に試してみます。 数値型の比較。 const a: number = 1; const b: number = 1; // 両方ともtrue consol
-
TypeScriptでReact + Redux + Expressのベストプラクティス - Qiita
こんにちは、Morishing362と申します。 UI/UXエンジニアをしております。普段はTypeScript/Flutter/Rust/C++などを触っています。仕事以外でツールを作る機会があり、Reactでやってみたく、その際にベストプラクティスを作ってみたので晒します。ベースは公式チュートリアルに則って少しアレンジしました。 各フレームワークの役割 React: フロントエンドフレームワーク Redux: Reactの状態管理 Express： HTTPサーバーフレームワーク 目標のアプリ 左側に比較的簡単な状態管理のカウンター機能、右側にデータベースを使った非同期処理を伴うユーザー追加機能を持つ、なんの意味もないアプリです。 環境 Yarn: 1.22.5 node: 14系 SQLite3クライアント: 3.31.1 npmやYarnのインストール手順は世の中にたくさんあるので
-
-
TypeScriptのdeclareやinterface Windowを勘で書くのをやめる2022
おことわり 個々の関数や変数に正しい型をつける話はしません。TypeScript HandbookのDeclarationの章などを読むことをおすすめします。 かわりに、本稿では関数や変数の型宣言をどこにどう置くべきかの指針を与えます。 モジュールとスクリプト declareを正しく使うにはまずモジュールとスクリプトの区別を理解し、意識することが大切です。 ブラウザやNode.jsは外部からの指定でモジュールとスクリプトを区別しますが、TypeScriptでは原則としてファイルの内容でモジュールとスクリプトを区別します。 import 宣言または export 宣言が1つ以上あればモジュール。 CommonJSモジュールの場合はTypeScript専用構文である import = 宣言、 export = 宣言を使う。 それ以外の場合はスクリプト。 ただし、JavaScriptファイル (
-
なんで JavaScript ではなく TypeScript を使うのか?
この記事の目標 「最終的に JavaScript になるのに、なんでわざわざ TypeScript を使うべきなのか? JavaScript で良くない?」 という質問に答えられるようになる なぜ TypeScript を使うべきなのか? いきなり結論を書きます。 A. 実行時エラーの少ない JavaScript を使いたいから TypeScript で書かれたコードはコンパイルが通らないと JavaScript に変換できません。そのため、生成される JavaScript コードは必ずコンパイルに成功したものです。コレが TypeScript を使っていて一番嬉しいポイントです。 まあ、いきなり結論を書いてもよく分からないと思います。順に話していきます。 型エラーとはなにか TypeScript でコンパイルを通すには、コード上の型エラーを無くす必要があります。 型エラーとは、型システム
-
【React×TypeScript】コンポーネントをPropsとして渡す方法
ポイント 指定するPropsの型は、JSX.ElementやReact.ReactNodeなどを使用するコンポーネントを受け取る際は、引数にpropsを受け取り、propsからコンポーネントを取り出す。 ※関数コンポーネントを作る際、引数にpropsを({child1, child2})などと記述することが多いが、(props)とする必要がある（多分レンダリングの関係でそうなってる）。 コードで見る Childrenというコンポーネントがchild1とchild2というprops名でコンポーネントを受け取ると仮定。 import React from 'react' type Props = { child1: JSX.Element // ポイント１(React.ReactNode などでもOK） child2: JSX.Element } export default Children
-
Prettierでコード整形を自動化しよう | TypeScript入門『サバイバルTypeScript』
このチュートリアルでは、コードフォーマッターの「Prettier」を使いTypeScriptのコードフォーマットを自動化することを学びます。 本章で学べること本章ではPrettierを導入してコード整形を自動化することを目標に次のことを学びます。 Prettierの導入方法Prettierの実行方法整形ルールの設定方法PrettierとはPrettierはコードのフォーマットを自動整形するツールです。Prettierがサポートしている形式は幅広く次の形式をサポートしています。 また、プラグインを利用することでPHPなどの他の言語のフォーマットを行うこともできます。 JavaScriptTypeScriptJSXFlowJSONHTMLVueAngularEmberCssLessSCSSstyled-componentsstyled-jsxGraphQLMarkdownMDXYAMLSv
-
TSConfig リファレンス - すべてのTSConfigのオプションのドキュメント
Type CheckingallowUnreachableCode, allowUnusedLabels, alwaysStrict, exactOptionalPropertyTypes, noFallthroughCasesInSwitch, noImplicitAny, noImplicitOverride, noImplicitReturns, noImplicitThis, noPropertyAccessFromIndexSignature, noUncheckedIndexedAccess, noUnusedLocals, noUnusedParameters, strict, strictBindCallApply, strictBuiltinIteratorReturn, strictFunctionTypes, strictNullChecks, strictPrope
-
GitHub - kysely-org/kysely: A type-safe typescript SQL query builder
Kysely (pronounce “Key-Seh-Lee”) is a type-safe and autocompletion-friendly TypeScript SQL query builder. Inspired by Knex.js. Mainly developed for Node.js but also runs on all other JavaScript environments like Deno, Bun, Cloudflare Workers and web browsers. Kysely makes sure you only refer to tables and columns that are visible to the part of the query you're writing. The result type only has th
-
-
-
-
日時を文字列で持つ案 (Dateのことは忘れる)
TypeScript の日時を表現する Date 型は貧弱で使いにくい。 日時の処理はライブラリを使うことになりがち。 個人的には、Date オブジェクトの存在を無視して、日時を文字列で持つのがよいと思っている。 Date は何か MDN の Date のページを参照。 Date オブジェクトは単に「ある1点の時刻」を表している。タイムゾーンやロケールなどの情報は持っていない。 Date はなぜダメか 例えば次のようなクエリに対する操作が用意されていない。 特定の形式で文字列に変換する (yyyy-MM-dd や yyyy/MM/dd HH:mm など) 時刻成分を切り落として、1日の始まりの時点を得る 同じ月の最後の日付に変換する etc. 日時を文字列で持つ Date のメソッドはどうせ使わないので、インスタンス化する必要はない。 代わりに luxon の DateTime オブジェク
-
TypeScript の型生成における OpenAPI Generator のハマりどころ - READYFOR Tech Blog
こんにちは。READYFOR でフロントエンドエンジニアとして働いている菅原（@kotarella1110）です！ 嬉しいことに、READYFOR のプロダクト開発組織は急拡大中で、正社員の人数は 2019年7月時点では8名でしたが2021年4月現在は29名になりました 🎉 その反面、組織が大きくなってくると「我々はどこに向かってるんだっけ？」「あの人、最近はどんなことに取り組んでいるんだろう？」といった「見えないこと」が増えてきます🤔 この「見えないこと」を減らすために、READYFOR では毎月「プロダクト開発本部会」を開催しています。 プロダクト開発本部会では、必要な全体周知（組織やプロダクトの方針等）や月替わりプレゼンテーションを行っています。 本記事はこのプロダクト開発本部会の月替わりプレゼンテーションで発表した内容になります。 はじめに 以前 READYFOR で初主催とな
-
Web フロントエンドにおけるコロケーション (co-location) という考え方について - mizdra's blog
Webフロントエンド界隈の文献などにあたっていると、「コロケーション (co-location)」という考え方が時々登場します。 コロケーションを簡単に説明すると、関連するリソース同士を近くに置いておく、という考え方です。 FooComponent.tsx と同じディレクトリに FooComponent.test.tsx を置く GraphQL fragment は、クエリを発行するコンポーネントファイル (pages/user.tsx) ではなく、fragment を利用するコンポーネントファイル (components/UserInfo.tsx) の中で定義する pages/user.tsx からはサブコンポーネントのファイルで定義されている fragment を import してきて、クエリを組み立てて発行する API ドキュメントは API.md に書くのではなく、コードの中にド
-
【TypeScript】Zod でスキーマ宣言とバリデーションを実施する
【TypeScript】Zod でスキーマ宣言とバリデーションを実施する 2022.07.02 [Zod](https://github.com/colinhacks/zod) は TypeScript first でスキーマ宣言とバリデーションを実施するためのライブラリです。 一度バリデータを宣言すれば、Zod が自動的に TypeScript の型を推論してくれるという特徴があります。このおかげで重複した型宣言を排除できます。 また、Zod はエコシステムも多く存在しており、OpenApi、Nest.js、Prisma、react-hook-form などと組み合わせて使うことができます。 Zod は TypeScript first でスキーマ宣言とバリデーションを実施するためのライブラリです。 一度バリデータを宣言すれば、Zod が自動的に TypeScript の型を推論してくれ
-
公式Twitter
- @HatenaBookmark
リリース、障害情報などのサービスのお知らせ
- @hatebu
最新の人気エントリーの配信
キーボードショートカット一覧
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Copyright © 2005-2024 Hatena. All Rights Reserved.
設定を変更しました