はてなブックマーク

はじめに 普段、CircleCIさまに大変お世話になっているのですが、とある要件でGitHub Actionsを使う機会があり、使ってみるとCircleCIでいう所のこれかと思った部分が結構あったのでまとめることにしました CircleCIのyamlをGitHub Actionsのyamlで書くことで、CircleCI使いの人たちがGitHub Actionsの概要をざっくりと理解する参考になれば幸いです GitHub Actionsに導かれた瞬間 ちなみにドラゴンクエスト4は未プレイです 記事のターゲット GitHub Actionsの基本的な部分をざっくりと知りたいCircleCI使いの人 サンプルコード全容 今回はフロントエンドのリポジトリで、任意のブランチ名でプルリクが作成された際に下記処理の実行をするワークフローをサンプルコードとします yarn(v3)でdependencies

はじめに ある日、クリーンアーキテクチャで定義した各レイヤーの依存関係が正しいかどうかを ESLint がチェックしてくれると楽だよねという話が出た(今のプロジェクトではこのような構成を取り入れております) ESLint に追加したいルールの要件を整理してみるとわざわざ plugin として公開するほど汎用的なものでもないと思い、プロジェクト内で完結する ESLint の独自ルールを作ってみたというお話 ゴール 下記に示すディレクトリ構成で以下の条件をチェックしたい domains配下のファイルはinfrastructures、adapters, usecases, view-modelsを import しない usecase配下のファイルはinfrastructures、adaptersを import しない view-models配下のファイルはinfrastructures、ad

はじめに 普段開発している Next.js プロジェクトの構成がなかなかいけてるんじゃないかということで、その構成を公開しちゃおうというお話。ほんとはタイトルをぼくがかんがえたさいきょうのNext.jsの構成にしたかったけどひよりました (今回の記事を作るにあたり改めて一から Next.js のリポジトリ作ったら husky のバージョン上がってたり、eslint-config-prettier の v8 系になって config の書き方ちょっと変わってたり、時代は移り変わるのです・・) 意外と手順書いていくと長くなったので一部coming soonになっているものは確固たる意思を持って、随時追記します 更新履歴 2021/04/01 css modules が storybook で上手く呼べてなかったので修正、あと storybook のバージョンアップ 2021/03/31 なんと

"dependencies": { "next": "10.0.3", "react": "17.0.1", "react-dom": "17.0.1", }, type ChildProps = { count: number; }; const Child = ({ count }: ChildProps): JSX.Element => { useEffect(() => { console.log("Childがレンダリングされたよ"); }); return <p>Child：{count}</p>; }; const Parent: NextPage = () => { const [parentCount, setParentCount] = useState<number>(0); const [childCount, setChildCount] = useState<n

はじめに はい、詐欺タイトルです 何も知らない状態から Amplify を使って Next.js をデプロイするのに私は 1 日半ほど費やしました ただ、デプロイするまでにいくつかあるつまづきポイントを超えるとほんとに簡単にデプロイして公開できるので、そのつまづきポイントをご紹介できれば 記事のターゲット S3 + CloudFront に Next.js 環境をデプロイしたい人 Amplify 使ってみたい人 Amplify でのデプロイ は GitHub 連携じゃなくて CLI 使って手動でしたい人 概要 なんと! 今なら!! たったの 5 ステップで!!! Amplify CLI のインストール デプロイ権限がある IAM の作成 amplify init amplify add hosting amplify publish 環境 関係ありそうなのだけ @aws-amplify/c

はじめに 新しい Next.js のプロジェクトに、ログイン情報など page 層をまたぐ値を格納する Store を導入したく、Redux を触ってみた 間違いやもっといい方法がある場合はどしどしご指摘くださいませ 記事のターゲット Redux を導入しようとしてる人 基本は page でステート管理するけどグローバルな情報だけ store を使いたい(ライトに redux 使いたい)人 概要 ざっくりイメージ @reduxjs/toolkit で state の管理 react-redux で react と bind してる 環境 Redux(+localStorage とバインドさせるために)を入れるためにインストールしたもの yarn add @reduxjs/toolkit redux-persist react-redux yarn add -D @types/react-r

概要 個人的には下記の観点から React Hook Form を推す方向で進めようと思った React Hook Formはドキュメントがおしゃんで、さらに日本語対応してる useFormContext や FormProvider など、既存の React Context と同じような使用感でコードをわかりやすくかけた(とっつきやすかった) ref={register}がめちゃめちゃ楽 比較 input 入力時のレンダリング回数等のパフォーマンスの計測はしてませぬ あくまで実装の違いのみ ただ React Hook Form のドキュメントの中でわかりやすい比較表を作ってくれてるのでそれが参考になるかと(いや、ほんとは自分で調べないといけないと思ってるんですよ・・わかってるんですよ・・) 環境 { "dependencies": { "@hookform/resolvers": "1.

概要 1 年半前の自分にむけて Nuxt + TypeScript で開発する時に伝えたかった 10 のこと (Nuxt + TypeScript の開発を 1 年半やった振り返りと反省) 社内 LT 用に作ったスライドはコチラ 注意事項 記載したコードはvue-property-decoratorを使用した記法になっています その 1 props と $emit だと props で完結させた方がシンプルでいいぞ props で関数を渡せるので関数渡したほうがシンプルでいいよねってお話(補完も効くようになるし) atomic design でコンポーネント分けてたりすると、親 → 子 → 孫 → 孫孫みたいにコンポーネントのリレーが長くなった際に、props で完結させておくと props で渡した挙動だけしかしないので親で定義した部分を見るだけでいい。 それに対し、emit の場合、e