Yuki Kakazu

はじめにCJSやESMといったモジュールタイプ、先人たちの記事を読み理解したつもりになるが、時間が経つと完全に忘れるということを繰り返している。package.jsonの最低限の設定と、その読み込み方法を簡易的に記載する。これは検証で書いたサンプルコードhttps://github.com/kkznch/sample-dual-package CJSからCJS, ESMを読み込むパッケージ中の .js は、パッケージのpackage.jsonに記載されている type フィールドが commonjs の場合はCJSとして扱われ、 type フィールドが module の場...

Node.jsのモジュールタイプごとの読み込み方法

はじめにローカル開発環境（以下、ローカル）で検証する際に、一部の機能をライブラリとして切り出しておくためのリポジトリ作った。npmで公開しないようにするためにpackage.jsonのprivateフィールドはtrueにしている。テンプレートリポジトリ化しているので、ライブラリを作る際は複製して使うよろし。 対象読者ローカルで検証時にぽちぽちライブラリ作りたい人pnpm使ってる人下記にpmpn linkを使う方法を記載しているが、npmでも同じことできるので必要あれば適宜読み替えてください 作ったものほい。https://github.com/kkznc...

ローカル開発環境で検証時に使用するTSライブラリ作成テンプレ作った

はじめに前回create-react-appを使わないReactにESLintとPrettier入れた。https://zenn.dev/kekezun/articles/65cd0fb69896c1プロジェクトが小さい内はWebpackでも気にならないが、肥大化してくるとビルドに時間がかかって面倒なので、WebpackからViteに乗り換える。成果物はこちら。https://github.com/kkznch/template-react-for-inspection/tree/04-change-bundler-to-vite 環境vite: v4.1.4※...

create-react-appを使わないReact、さようならWebpackこんにちはVite

はじめに前回create-react-appを使わないReactのTypeScript化を行った。https://zenn.dev/kekezun/articles/bf59a0e02b8aa4このままだと開発しにくいので、ESLintとPrettierを入れてく。なおESLintは現在（2023年3月9日）試験的機能として提供されているFlat configを用いて設定を行う。成果物はこちら。https://github.com/kkznch/template-react-for-inspection/tree/03-adding-eslint 環境eslint...

create-react-appを使わないReactにFlat configなESLint入れる

はじめに前回create-react-appを使わずにReactの環境構築を行なった。https://zenn.dev/kekezun/articles/b086a1e8976294上記ではJavaScriptしか使えないため、TypeScriptを使うように修正していく。なおTypeScriptからJavaScriptへのトランスパイルに関しては、babelではなくtscのみで行う。成果物はこちら。https://github.com/kkznch/template-react-for-inspection/tree/02-adding-typescript 手順...

create-react-appを使わないReactのTypeScript化

はじめにTerraformの名前だけ知ってる人向けに、なんとなく分かるレベルでTerraformを説明していく。今回書いたコードはこちら。AWS IAMの認証情報の設定をして、READMEに記載されたコマンドを実行すれば本記事に記載された環境を構築することができる。https://github.com/kkznch/2023-01-06_sample-terraform TerraformとはHashiCorp社が提供する、インフラをコードで管理するためのツール。インフラをコードで管理することにより、効率よく且つ安全にインフラの管理をすることを目的としている。Terra...

なんとなくわかるインフラ構築 〜Terraform編

はじめにcreate-react-appを使わずにReactの環境作るよ。下記の参考サイト通りに進める。インストールしたパッケージの概要や、Webpack設定ファイルの項目の概要など書いてくれてるのでわかりやすい。https://dev.to/ivadyhabimana/how-to-create-a-react-app-without-using-create-react-app-a-step-by-step-guide-30nl成果物はこちら。https://github.com/kkznch/template-react-for-inspection/tree/01...

create-react-appを使わないReact環境構築

概要LighthouseとLaravel Sanctum、その他開発ツールなどを設定したテンプレ作った。https://github.com/kkznch/template-lighthouse-with-sanctum 背景テンプレ作っておくと便利だよねって話になったのでテンプレ作った際の手順を書いておく。 構成Laravel 9.xLaravel SailLaravel SanctumCookie認証使うLigthousePHP_CodesnifferLarastanGitHub Actions 手順 Laravelプロジェクトの作...

Lighthouse + Laravel Sanctumのテンプレ構築手順

はじめに社内向けに今まで構築してきたインフラ構成を伝えようと思ったが、そもそもインフラについて知らない人が構成図見てもなんのこっちゃという気持ちになるだろうと思ったので、インフラ構築ってこういうことしてるんだよ〜となんとなく知ってもらうために、物理的なインフラ構築を例に説明していく、というのが前回のお話。https://zenn.dev/kekezun/articles/78049ffd706339今回はAWSを用いたインフラ構築について説明していく。※構築した後に放置すると従量課金が発生するので、不要な場合は全て消してね AWSとはAmazonが提供するクラウドプラッ...

なんとなくわかるインフラ構築 〜AWS編

はじめに社内向けに今まで構築してきたインフラ構成を伝えようと思ったが、そもそもインフラについて知らない人が構成図見てもなんのこっちゃという気持ちになるだろうと思ったので、インフラ構築ってこういうことしてるんだよ〜となんとなく知ってもらうために、物理的なインフラ構築を例に説明していく。 インフラ構築前の説明 インフラって何？Infrastructureの略称社会や経済、あるいは国民生活が拠って立つ基盤となる、必要不可欠な施設やサービス、機関、制度、仕組みなどのことITにおけるインフラとは、システムを構成するサーバ、ソフトウェア、ネットワークなどのこと皆が開発したア...

Yuki Kakazu

Node.jsのモジュールタイプごとの読み込み方法

ローカル開発環境で検証時に使用するTSライブラリ作成テンプレ作った

create-react-appを使わないReact、さようならWebpackこんにちはVite

create-react-appを使わないReactにFlat configなESLint入れる

create-react-appを使わないReactのTypeScript化

なんとなくわかるインフラ構築〜Terraform編

create-react-appを使わないReact環境構築

Lighthouse + Laravel Sanctumのテンプレ構築手順

なんとなくわかるインフラ構築〜AWS編

なんとなくわかるインフラ構築〜物理インフラ編

Node.jsのモジュールタイプごとの読み込み方法

ローカル開発環境で検証時に使用するTSライブラリ作成テンプレ作った

create-react-appを使わないReact、さようならWebpackこんにちはVite

create-react-appを使わないReactにFlat configなESLint入れる

create-react-appを使わないReactのTypeScript化

なんとなくわかるインフラ構築 〜Terraform編

create-react-appを使わないReact環境構築

Lighthouse + Laravel Sanctumのテンプレ構築手順

なんとなくわかるインフラ構築 〜AWS編

なんとなくわかるインフラ構築 〜物理インフラ編

なんとなくわかるインフラ構築〜Terraform編

なんとなくわかるインフラ構築〜AWS編

なんとなくわかるインフラ構築〜物理インフラ編