2025-05-21
【2025】Amplifyとはナニモノか、最大限わかりやすく解説します【Gen2】
Amplifyってなんですか？と聞かれて「認証とかデータベースとか使うアプリケーションを簡単に作れるやつだよね・・？」 くらいの回答しかできませんか？筆者はそうでした。AWSリソースとの関係性にも注目しつつ、曖昧な理解をより明確にしていきましょう。
- Amplify
Web・アプリ開発
Webフロントエンド・サーバーサイド・インフラについての実践的な内容をまとめています。
29件
2024-01-01
Reactコンポーネントの実装カタログ
Reactフロントエンド開発の素養を深めるため、車輪の再発明ではあるが、フロントでよく使われるコンポーネントの実装を行います。
- フロントエンド
- React
2023-08-07
VSCodeのgo環境でimportエラーが発生する時
goでは、go.modファイルのあるディレクトリがモジュールとして認識されます。 VSCodeでモジュールのimportがうまくいかない場合の対処法です。
- 開発Tips
- サーバーサイド
- Go
2023-07-25
「クリーンアーキテクチャ」が伝えてくれたことを平易な言葉で説明してみる
システム設計を論じる上で必ず出てくるクリーンアーキテクチャについて知った上で、良いシステムを作るために共通して大切にすべき考え方をまとめます。
- 設計
2023-07-12
【CSS】position stickyが効かないときの対処法
position stickyは、それを指定した要素だけでなく「親」や「祖先」の要素によって挙動が左右されることがあります。
- 開発Tips
- フロントエンド
- CSS
2023-05-11
ReactのContext Hooksを使って状態管理を実現する（createContext, useContext）
Reactの状態管理のためのパッケージとしてはReduxやRecoilなどがありますが、そのようなパッケージを使わなくてもReactのContext(Hooks、フック)を作って状態管理を実現することができます。
- フロントエンド
- React
2023-01-07
Parcelでサクッとフロントエンド開発環境を手に入れる
思いついたアイデアをブラウザ上にJavaScriptを使って表現したい。 でも本格的に開発するならGulpだWebpackだと用意するのが面倒。そんな時にParcelが役立ちます。
- フロントエンド
- Parcel
2022-10-13
LaravelのTimestampsを日付時刻形式にする（Y-m-d H:i:s）
Laravel7以降、デフォルトではCarbonインスタンスになるタイムスタンプを従来のY-m-d H:i:s（yyyymmddhhiiss）での形式にします。
- 開発Tips
- Laravel
- サーバーサイド
2022-08-15
〜MVCとDDD〜設計手法を学んで脱初級者を目指そう
エンジニアを始めたての頃、Webアプリケーション開発といえばMVCに従うことが正しいと思い込んでいました。 そこから一歩脱却し、設計手法のひとつであるDDD（ドメイン駆動設計）の考え方とMVCのそれを比較しながら、良い設計とは何かを考えたいと思います。
- サーバーサイド
- 設計
- DDD
2022-08-14
Laravel SanctumのSPA認証を使ってReactにユーザー認証を導入する
LaravelにはReactなどのSPA向けに認証機能を提供するSanctum（サンクタム）というパッケージが用意されています。 Laravel Sanctumを使ってReactにユーザー認証を導入してみましょう。
- サーバーサイド
- Laravel
- React
2022-06-20
Docker+Laravel+React+TypeScript構成のフルスタックパッケージを順を追って構築する【後編:フロントエンド】
Webアプリ開発に慣れない人にとって環境構築は大きなハードルです。 この記事ではサーバーサイドはDockerとLaravel、フロントエンドではReactとTypeScriptを使ったフルスタックパッケージを、ひとつづつ手順を確認しながら構築していきます。 後編ではフロントエンドのReact+TypeScriptの構築を行います。
- フロントエンド
- React
- TypeScript
2022-06-18
Docker+Laravel+React+TypeScript構成のフルスタックパッケージを順を追って構築する【前編:サーバーサイド】
Webアプリ開発に慣れない人にとって環境構築は大きなハードルです。 この記事ではサーバーサイドはDockerとLaravel、フロントエンドではReactとTypeScriptを使ったフルスタックパッケージを、ひとつづつ手順を確認しながら構築していきます。 前編ではサーバーサイドのDockerとLaravelの構築までを行います。
- サーバーサイド
- Docker
- Laravel
2022-05-21
DockerでPHPが動くローカル環境をサクッと作る
最近のMacにはデフォルトでPHPがインストールされていません。PHPをローカルマシンに入れて汚したくないとき、DockerでサクッとPHP環境を試すことができます。
- 開発Tips
- Docker
- PHP
- ネットワーク
2022-05-20
そこそこの規模なWebシステムを設計するための知識セット
何年も使われるWebシステムを使うなら、保守性は大事です。代表的な設計手法は押さえておく必要があります。 オブジェクト指向設計、ドメイン駆動設計、マイクロサービスなどの設計手法を確認しながら、実際に設計する際のポイントをまとめます。
- サーバーサイド
- 設計
2022-04-30 / 更新: 2022-09-08
AWS ECSでWordPress+Docker環境を構築してみる
ブログやコーポレートサイトのCMSとして依然として人気のあるWordPress（ワードプレス）。 Dockerイメージを利用しAWSのECS（Elastic Container Service）上で動く環境を構築してみます。 また、WordPressをコンテナで扱う際の難しさについても言及します。
- ネットワーク
- WordPress
- Docker
2022-04-02
Laravelが使える環境で任意のUUIDを生成する
適当なUUIDを生成したい時、LaravelのコンソールアプリケーションであるTinkerが便利です。
- 開発Tips
- Laravel
- サーバーサイド
2022-03-19
Gitでコミット前に破棄（または退避）したい
特定のファイルの変更を破棄または退避したい場合のメモ。破棄する場合はcheckoutし、退避する場合はstashを用います。
- 開発Tips
- Git
2022-03-01
AWS S3で運用している静的サイトを簡単に301リダイレクト設定する
S3の静的ウェブサイトホスティングしているWebページを簡単に301リダイレクトすることができます。
- 開発Tips
- AWS S3
- ネットワーク
2022-02-27
DockerのMySQLコンテナにダンプファイルを流し込む
Docker上で動いているMySQLのコンテナにDumpfileを流し込みデータをコピーする方法です。
- 開発Tips
- Docker
- MySQL
- サーバーサイド
2022-02-15
Laravel9がリリースされたので、あらためてLaravelというフレームワークを読み解いてみる
2022年2月8日にLaravel9がリリースされました。 composer.jsonやIlluminateの中身を読み解き、さらに全体の処理を追いLaravelフレームワークへの理解を深めたいと思います。
- サーバーサイド
- Laravel
2022-01-12
デザインに自信のないエンジニアが、UIデザインするときに気をつけていること
Webの（特にサーバーサイドの）エンジニアは、デザインが絡む作業が苦手な傾向があります。 私はデザイン的なことをやるのは好きですが、今ひとつパッとしないデザインになってしまうことがよくあります。 そこで、ノンデザイナーでもそれなりに整ったデザインにするためのノウハウを書き残します。
- デザイン
2021-12-19
Dockerによる開発とうまく動かないときの対処法
Dockerは、近年のWebアプリ開発環境におけるデファクトスタンダードになりつつあります。 この記事では、Dockerの簡単な使い方と、よくあるエラーについての解決方法を紹介します。
- サーバーサイド
- Docker
2021-10-31 / 更新: 2021-07-03
Next.jsのSSGで個人ブログを作成する
シングルページアプリケーション（SPA）の弱点として、クローラによっては描画内容に到達できなかったり、 JavaScriptで描画するために、静的なページと比べると処理速度の問題があったりします。 そこで、Webページをサーバー側でレンダリング（SSR）したり、静的サイトを生成したり（SSG）する方法が編み出されました。 ここでは、ReactベースのフレームワークであるNext.jsのSSGを使って、個人のWebサイトを生成したいと思います。
- フロントエンド
- React
- Next.js
2021-07-10 / 更新: 2022-01-06
Reduxでフロントで扱うデータを一元管理する
Reduxは状態管理のためのReact向けライブラリです。 シングルページアプリケーションでは複数の画面（コンポーネント）にわたってデータを共有する場面が出てきます。 また、親子コンポーネント間のデータの受け渡しについても、コンポーネントの階層が深くなってくると煩雑になってきます。
- フロントエンド
- React
- Redux
2021-06-06 / 更新: 2022-02-22
AWS EC2でNode.js(Express)+Nginxアプリケーションのホスティング環境をVPC上に構築する
AWSのEC2上でNode.jsフレームワークであるExpressで作成したアプリケーション（API）をホスティングする方法を書いていきます。 AWSの仮想ネットワークであるVPCのセッティング方法や、EC2の起動までの流れについても画像付きで丁寧に解説します。
- ネットワーク
- Node.js
- Express
- Nginx
2021-05-22
Reactフロントエンド開発ことはじめ
近年のクライアントサイドJavaScriptはもはや単なるスクリプトではなく、より構造化されたプログラミングが求められるようになっています。 フロントエンドのフレームワークが作られていますが、今回はその一つであるReactについてまとめます。
- フロントエンド
- React
2021-04-24
Gulpでフロントエンド開発を自動化してラクをする
効率的にコーディングをするためのnpmパッケージはたくさんありますが、 何かを変更するたびに毎回コマンドを実行しないといけないのは面倒です。 ここでは、変更を検知してコマンドを自動的に実行できるGulpと、実行するタスク（gulp-sass, gulp-pug, gulp-babel）を作っていきます。
- フロントエンド
- Gulp
2021-04-17 / 更新: 2022-06-04
EJS+Sassで効率的にHTML+CSSコーディングする
HTMLやCSSをコーディングするときに、何度も繰り返し同じタグ名を書いたりするのは、手間がかかります。 そこで、効率的にコーディングをするためのツールを導入していきましょう。 この記事では、HTMLを効率的に書くためにEJS、CSSを効率的に書くためにSassを導入してみます。
- フロントエンド
- EJS
2021-04-10 / 更新: 2022-02-05
AWS S3+CloudFrontに静的Webサイトを設置し、GitHub+CircleCIでデプロイ環境を構築する
静的サイトをホスティングする場合、AWSのS3とCloudFrontを利用することができます。 さらに、GitHubからCircleCiで変更があったら自動できるにデプロイされる方法を紹介します。 また、Route53での独自ドメインと、ACMで発行した証明書の設定も行います。
- ネットワーク
- CircleCI
- AWS S3
- AWS CloudFront