ReactのContext Hooksを使って状態管理を実現する（createContext, useContext）
- フロントエンド
- React
Reactの状態管理のためのパッケージとしてはReduxやRecoilなどがありますが、そのようなパッケージを使わなくて...
まとめノート
学生時代のまとめノートのように、後で見返してわかりやすく書くことを心がけています。
Web・アプリ開発
Webフロントエンド・サーバーサイド・インフラについての実践的な内容をまとめています。
Parcelでサクッとフロントエンド開発環境を手に入れる
- フロントエンド
- Parcel
思いついたアイデアをブラウザ上にJavaScriptを使って表現したい。 でも本格的に開発するならGulpだWebpac...
LaravelのTimestampsを日付時刻形式にする（Y-m-d H:i:s）
- 開発Tips
- Laravel
- サーバーサイド
Laravel7以降、デフォルトではCarbonインスタンスになるタイムスタンプを従来のY-m-d H:i:s（yyyy...
〜MVCとDDD〜設計手法を学んで脱初級者を目指そう
- サーバーサイド
- 設計
- DDD
エンジニアを始めたての頃、Webアプリケーション開発といえばMVCに従うことが正しいと思い込んでいました。 そこから一歩...
Laravel SanctumのSPA認証を使ってReactにユーザー認証を導入する
- サーバーサイド
- Laravel
- React
LaravelにはReactなどのSPA向けに認証機能を提供するSanctum（サンクタム）というパッケージが用意されて...
Docker+Laravel+React+TypeScript構成のフルスタックパッケージを順を追って構築する【後編:フロントエンド】
- フロントエンド
- React
- TypeScript
Webアプリ開発に慣れない人にとって環境構築は大きなハードルです。 この記事ではサーバーサイドはDockerとLarav...
Docker+Laravel+React+TypeScript構成のフルスタックパッケージを順を追って構築する【前編:サーバーサイド】
- サーバーサイド
- Docker
- Laravel
Webアプリ開発に慣れない人にとって環境構築は大きなハードルです。 この記事ではサーバーサイドはDockerとLarav...
DockerでPHPが動くローカル環境をサクッと作る
- 開発Tips
- Docker
- PHP
最近のMacにはデフォルトでPHPがインストールされていません。PHPをローカルマシンに入れて汚したくないとき、Dock...
そこそこの規模なWebシステムを設計するための知識セット
- サーバーサイド
- 設計
何年も使われるWebシステムを使うなら、保守性は大事です。代表的な設計手法は押さえておく必要があります。 オブジェクト指...
AWS ECSでWordPress+Docker環境を構築してみる
- ネットワーク
- WordPress
- Docker
ブログやコーポレートサイトのCMSとして依然として人気のあるWordPress（ワードプレス）。 Dockerイメージを...
Laravelが使える環境で任意のUUIDを生成する
- 開発Tips
- Laravel
- サーバーサイド
適当なUUIDを生成したい時、LaravelのコンソールアプリケーションであるTinkerが便利です。
Gitでコミット前に破棄（または退避）したい
- 開発Tips
- Git
特定のファイルの変更を破棄または退避したい場合のメモ。破棄する場合はcheckoutし、退避する場合はstashを用います。
AWS S3で運用している静的サイトを簡単に301リダイレクト設定する
- 開発Tips
- AWS S3
- ネットワーク
S3の静的ウェブサイトホスティングしているWebページを簡単に301リダイレクトすることができます。
DockerのMySQLコンテナにダンプファイルを流し込む
- 開発Tips
- Docker
- MySQL
Docker上で動いているMySQLのコンテナにDumpfileを流し込みデータをコピーする方法です。
Laravel9がリリースされたので、あらためてLaravelというフレームワークを読み解いてみる
- サーバーサイド
- Laravel
2022年2月8日にLaravel9がリリースされました。 composer.jsonやIlluminateの中身を読み...
デザインに自信のないエンジニアが、UIデザインするときに気をつけていること
- デザイン
Webの（特にサーバーサイドの）エンジニアは、デザインが絡む作業が苦手な傾向があります。 私はデザイン的なことをやるのは...
Dockerによる開発とうまく動かないときの対処法
- サーバーサイド
- Docker
Dockerは、近年のWebアプリ開発環境におけるデファクトスタンダードになりつつあります。 この記事では、Docker...
Next.jsのSSGで個人ブログを作成する
- フロントエンド
- React
- Next.js
シングルページアプリケーション（SPA）の弱点として、クローラによっては描画内容に到達できなかったり、 JavaScri...
Reduxでフロントで扱うデータを一元管理する
- フロントエンド
- React
- Redux
Reduxは状態管理のためのReact向けライブラリです。 シングルページアプリケーションでは複数の画面（コンポーネント...
AWS EC2でNode.js(Express)+Nginxアプリケーションのホスティング環境をVPC上に構築する
- ネットワーク
- Node.js
- Express
AWSのEC2上でNode.jsフレームワークであるExpressで作成したアプリケーション（API）をホスティングする...
Reactフロントエンド開発ことはじめ
- フロントエンド
- React
近年のクライアントサイドJavaScriptはもはや単なるスクリプトではなく、より構造化されたプログラミングが求められる...
Gulpでフロントエンド開発を自動化してラクをする
- フロントエンド
- Gulp
効率的にコーディングをするためのnpmパッケージはたくさんありますが、 何かを変更するたびに毎回コマンドを実行しないとい...
EJS+Sassで効率的にHTML+CSSコーディングする
- フロントエンド
- EJS
HTMLやCSSをコーディングするときに、何度も繰り返し同じタグ名を書いたりするのは、手間がかかります。 そこで、効率的...
AWS S3+CloudFrontに静的Webサイトを設置し、GitHub+CircleCIでデプロイ環境を構築する
- ネットワーク
- CircleCI
- AWS S3
静的サイトをホスティングする場合、AWSのS3とCloudFrontを利用することができます。 さらに、GitHubから...