TypeScript– tag –
-
【Chakra UI】カスタムテーマで共通スタイルを使い回す
Chakra UIのカスタムテーマ、使っていますか？ カスタムテーマは便利で汎用的なスタイルを定義することができますが、その反面で意外と奥が深くやろうとしていることに時間がかかってしまうこともあります。 今回はカスタムテーマをもっと使いこなすために... -
【Tauri+Next.js】ファイル選択ダイアログで選択した場所にファイル書き込みおよびファイル読み込みする
今回はTauriでファイル操作処理を行う方法について紹介していきます。 合わせてよく使用するであろうファイル選択ダイアログの実装もしてみました。 Next.jsのみで作るWebアプリケーションの場合はファイルダウンロード処理を実装する感じになりますが、Ta... -
React+Chakra UIをShadow DOMの中で使う方法
Google Chrome拡張機能(Chrome Extension)のContent Scriptなどを使用すると、既存ページに対して新たなDOM要素を追加することができます。 しかし追加したDOMが既存サイトのCSSから影響を受けたり、また逆に追加したDOMが既存サイトのCSSを上書きしたりと... -
【Tauri+Next.js】Rust+TypeScriptで作るデスクトップアプリケーション
TauriはバックエンドにRust、フロントエンドには従来のWeb開発技術(JavaScript+HTML+CSS,ReactやNext.jsなどのフレームワーク)を用いたデスクトップアプリケーションを開発するためのフレームワークです。 クロスプラットフォーム対応しておりWindowsでもM... -
【Node.js】Dockerにmysql環境を構築してmysql2で操作する
タイトルにもあるとおり、Node.js + MySQL + Dockerな環境で開発を行う機会がありました。 Node.jsからMySQL操作を行うためのライブラリはmysql2というものを使用しましたが、 接続処理コネクションプールCRUD といった情報が意外とまとまっておらず困りま... -
【TIPS】TypeScriptで便利な型を自作する
TypeScriptでちょっとしたときに使う・使った型定義をまとめていきます。（随時更新） オブジェクトの値を型として定義する 型定義 export type RecursiveValueOf<T extends object> = { [K in keyof T]: T[K] extends unknown[] ? T[K] : T[K] exte... -
Chakra UIで素早く・美しく開発！React向けコンポーネントライブラリを使おう！
Reactの開発、楽しいですよね！ しかし、イチからUIコンポーネントを作るというのはなかなかの労力が必要です。 昨今の開発ではなにかしらのコンポーネントライブラリを使ってUI開発にかけるコストは減らしているのではないでしょうか。 今回はそんなコン... -
GitHub Actionsでユニットテストを自動実行する 〜Jest編〜
今回はGitHub Actionsにてユニットテスト（Jest）を実行させるように設定します。 ただそれだけです。 この記事でできること GitHub ActionsでNode.jsの環境を構築するGitHub Actionsでユニットテスト（Jest）を実行する 【対象環境】 Jestのセットアップ... -
Next.jsのフォルダ構成を考えよう！ 〜 アトミックデザイン編 〜
悩みがちなフォルダ構成。 Next.jsプロジェクトにおけるフォルダ構成をアトミックデザインをベースとして考えてみました。 -
とにかくやるだけ！Next.js + TypeScript + Chakra UI + ESLint + Prettier + commitlint + Jest + huskyの環境構築よくばりセット
JavaScript(TypeScript)開発環境の構築はセットアップすることが多くて大変。 そこでよく使いそうな構成の環境構築手順をまるっとまとめて紹介します。
1