package.json

依存パッケージを更新することなくpackage.jsonとpackage-lock.jsonのversionを上げる方法をまとめる。 $ npm version patch このコマンドでセマンティックバージョニングのパッチバージョンを上げることができる。versionが 1.0.0 だった場合、1.0.1 になる。1.0.1 というメッセージでgitのコミットが作成され、v1.0.1 というgitのタグが作成される。マイナーバージョンを上げたい場合はpatchをminorに、メジャーバージョンを上げたい場合はpatchをmajorにすればよい。コミットメッセージを指定したい場合は -m もし…

package.jsonとは？ React(CRA)package.jsonの中身 node_modules 最後に 以前は、Reactアプリケーションを作成するのには、webpackやBabelなど、多くの設定が必要でした。 しかし、Create-React-Appという優れたツールが登場し、Reactアプリケーションを簡単に構築できるようになりました。 Create-React-Appには、react-scriptsというスクリプトコマンドが付属しており、デフォルトで4つのメインスクリプトが用意されています。 これらのスクリプトを使うことで、Reactアプリケーションの構成に必要なすべての…

結論 ワイルドカードが含まれている場合はクォートでくくりましょう。 具体例 例えば、以下のような書き方だとエラーになります。 "scripts": { "hoge": "yarn clean && run-s -c hoge:*", ワイルドカードが含まれる場合は以下のようにクォートでくくります。 "scripts": { "hoge": "yarn clean && run-s -c \"hoge:*\"", 補足 シングルクォートでくくるかダブルクォートでくくるかですが、エスケープする手間と可読性を考えるとシングルクォートの方がいい気がします。

1. 開発環境 個人商店のお客様に、小さな売上管理アプリを提供するってことになりまして。 下記環境でコツコツ開発を続けています。じっくり作ってるうちに、どんどんフロントエンド技術が進化しちゃって使ってるフレームワークが古びてゆき困る。早くリリースせねば。backend: CakePHP ver. 2.10.19 (.lib/Cake/VERSION.txtで確認) front: CakePHPの標準view (*.ctp の拡張子) + jQuery + vue.js server: ローカルでの確認はとりあえずdocker上せっかくお勉強しているvueを使いたいんで、伝統的javascrip…

prismaでは2024/09時点で複数のDBに対応する場合の正式な実装方法はないようです。 上記に対するワークアラウンドがあったので、そちらについてメモしておきたいと思います。 github.com 基本的には上記にある内容です。 ディレクトリ構成 以下のような状態になっているとよいかと思いました。 . ├── prisma/ │ ├── db1/ │ │ └── schema.prisma │ └── db2/ │ └── schema.prisma └── package.json /prisma 配下にschema.prisma を配置してしまうと、prisma直下にdb1、db2それ…

SREの菅原です。 カンムのサービスはWebサービス・バッチ処理なども含めて基本的にはECS上で動かしているのですが、簡単なバッチ処理はLambda+EventBridge Schedulerの組み合わせで動かすこともあります。 LambdaはECSに比べてDockerイメージのビルドやECRの準備が不要で作成の手間が少ないのですが、terraformでデプロイまで含めて管理しようとすると少し問題がありました。 terraformでのLambdaのデプロイの問題点 例えば以下のような構成のNode.jsのLambdaをデプロイする場合 / ├── lambda.tf └── lambda ├─…

業務でタイトルのようなことをする必要があったので、サンプルで作ってみた 以下のような流れでサンプルを作成する サンプルリポジトリを二つ作って npm package として公開する サンプルリポジトリを一つのリポジトリに統合し、npm workspace でモノレポにする turborepo を導入し、turbo コマンドで複数リポジトリの build を実行できるようにする lerna-lite を導入し、npm package のバージョン管理をする サンプルリポジトリを二つ作成する 事前準備:npm のアカウントを作成する npm adduserを実行すると url が表示される。あとは…

ESLint についてまとめました。 この記事は以下の構成になっています。 ESLint とは Prettier との違い 従来の設定形式と Flat Config ESLint を使う手順 従来の設定形式から Flat Config への変更 VSCode で ESLint を使う ESLint とは ESLint はコードの品質やスタイルに関する規約に基づいてコードを検査し、エラーや警告を検出する JavaScript の静的解析ツール。 コーディングスタイルの統一や潜在的なバグの発見、可読性の向上、そしてチームでの一貫したコード品質を保つために広く使われる。 Prettier との違い …

個人のサービスでpnpmのバージョン管理にCorepackを利用していたのですが、Corepackは以下の通りNode.jsから削除されてしまうようです 😢 zenn.dev そのためpnpmのv9.7で追加されたmanage-package-manager-versionsを使ってpnpmのバージョン管理をCorepackと同様にpackage.json内ので行うpackageManagerで行うようにしたので対応したことをメモ📝 github.com manage-package-manager-versions Added in: v9.7.0 Default: false Type: …

npm workspaceを使ったモノレポ構成でのパッケージ管理メモ init $ npm init -w 作りたいパッケージ名 このコマンドを実行することで、指定したパッケージ名のディレクトリと、そのディレクトリ内にpackage.jsonが生成される。 .npmrcを使った便利な設定 npm init -wを毎回実行する際に、scopeやversionなどの設定を都度指定するのが面倒な場合は、.npmrcに事前設定を記載しておくと便利。 scope=@my-org version=1.0.0 license=MIT author.name=Your Name author.email=yo…

以前、SQLのCTEを使って階層構造を持つデータから、祖先のデータを取得してみました。 django-cteと共通テーブル式(CTE)を用いた再帰クエリにより、階層構造を持つテーブルからデータを取得する - メモ的な思考的な このときは django-cte の利用がメインだったため、祖先は1つ (りんごの種子親) だけを扱いました。 ただ、現実のりんごの祖先は単一ではなく、 花粉親 (父) 種子親 (母) がそれぞれ存在します。また、当然ながら、それ以前の代のりんごも存在します。 例えば、シナノリップの場合、祖先をたどると以下のような感じになります。 シナノリップ (父) シナノレッド (父…

Create React App で React の環境構築を行う方法という記事を書いたので、今回は Create React App を使わずに一から環境構築を行う方法についてまとめました。 この記事は以下の構成になっています。 必要なパッケージ・ツール 完成系のディレクトリとファイルの構造 環境構築の流れ 必要なパッケージ・ツール 必要なパッケージ・ツールは以下の通り。 Node.js npm か yarn react react-dom webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/prese…

React のプロジェクトを作成する時に使う Create React App についてまとめました。 この記事は以下の構成になっています。 Create React App とは Create React App が行うこと Create React App でプロジェクトを作成する 開発環境 本番環境 テスト Create React App とは Create React App は React アプリの初期設定を自動化して作成するツール。 Create React App が行うこと Create React App は React アプリの初期設定以外にも、主に以下のことを行う。 開…

Remixiの新規プロジェクト作成 下記で新規プロジェクトを作成します。プロジェクト名はhogeとします。 npx create-remix@latest cd hoge サーバをexpressにする expressを入れて、server.tsを追加します。 npm i express @remix-run/express cross-env @types/express touch server.ts server.tsを下記にします。 import { createRequestHandler } from "@remix-run/express"; import express from…

こちら、下記3つの記事の組み合わせです。blog.kimizuka.org blog.kimizuka.org blog.kimizuka.orgM5StickC Plus2でGPS座標を取得して、Cloud Firestorに送信します。 準備するもの M5StickC Plus2 GPSユニット Arduino Firebaseのアカウント（Blazeプランにする必要あり） Firebase側の実装 ❶ パッケージを用意する yarn add firebase firebase-tools ❷ package.jsonを編集する package.json { "name": "functi…

僕がプログラマーになった20代前半の時期は、ちょうどRubyやPythonが日本でもキャズムの峠を越え始めたあたりだったようにおもう。 なので最初の数年間は、当初の所属組織がSIerやハードウェア寄りのお堅い環境だったのもあって 「OSSはとにかく最高でバンバン使え」 「（他人が作った）小さいパーツをとにかく組み合わせろ」 「自分で書いたコードは少ないほど良い」 という当初の風潮を無邪気に信用していたようにおもう。 （とはいえ僕がプログラミングを覚えた言語であるPythonは他と比べると比較的堅実で、標準でできることをちょっと楽に書けるだけのライブラリは入れるんじゃねえ！というような文化はあっ…