Reactコンポーネントの実装カタログ
- フロントエンド
- React
Reactフロントエンド開発の素養を深めるため、車輪の再発明ではあるが、フロントでよく使われるコンポーネントの実装を行います。
Web・アプリ開発
Webフロントエンド・サーバーサイド・インフラについての実践的な内容をまとめています。
VSCodeのgo環境でimportエラーが発生する時
- 開発Tips
- サーバーサイド
- Go
goでは、go.modファイルのあるディレクトリがモジュールとして認識されます。 VSCodeでモジュールのimportがうまくいかない場合の対処法です。
「クリーンアーキテクチャ」が伝えてくれたことを平易な言葉で説明してみる
- 設計
システム設計を論じる上で必ず出てくるクリーンアーキテクチャについて知った上で、良いシステムを作るために共通して大切にすべき考え方をまとめます。
【CSS】position stickyが効かないときの対処法
- 開発Tips
- フロントエンド
- CSS
position stickyは、それを指定した要素だけでなく「親」や「祖先」の要素によって挙動が左右されることがあります。
ReactのContext Hooksを使って状態管理を実現する（createContext, useContext）
- フロントエンド
- React
Reactの状態管理のためのパッケージとしてはReduxやRecoilなどがありますが、そのようなパッケージを使わなくて...
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から...
年でフィルター
タグでフィルター