HTMLやCSSをコーディングするときに、何度も繰り返し同じタグ名を書いたりするのは、手間がかかります。
そこで、効率的にコーディングをするためのツールを導入していきましょう。
この記事では、HTMLを効率的に書くためにEJS、CSSを効率的に書くためにSassを導入してみます。

EJS+Sassで効率的にHTML+CSSコーディングする

効率的にコーディングをするためのnpmパッケージはたくさんありますが、
    何かを変更するたびに毎回コマンドを実行しないといけないのは面倒です。
    ここでは、変更を検知してコマンドを自動的に実行できるGulpと、実行するタスク（gulp-sass, gulp-pug, gulp-babel）を作っていきます。

Gulpでフロントエンド開発を自動化してラクをする

近年のクライアントサイドJavaScriptはもはや単なるスクリプトではなく、より構造化されたプログラミングが求められるようになっています。
  フロントエンドのフレームワークが作られていますが、今回はその一つであるReactについてまとめます。

Reactフロントエンド開発ことはじめ

Reduxは状態管理のためのReact向けライブラリです。
  シングルページアプリケーションでは複数の画面（コンポーネント）にわたってデータを共有する場面が出てきます。
  また、親子コンポーネント間のデータの受け渡しについても、コンポーネントの階層が深くなってくると煩雑になってきます。

Reduxでフロントで扱うデータを一元管理する

シングルページアプリケーション（SPA）の弱点として、クローラによっては描画内容に到達できなかったり、
  JavaScriptで描画するために、静的なページと比べると処理速度の問題があったりします。
  そこで、Webページをサーバー側でレンダリング（SSR）したり、静的サイトを生成したり（SSG）する方法が編み出されました。
  ここでは、ReactベースのフレームワークであるNext.jsのSSGを使って、個人のWebサイトを生成したいと思います。

Next.jsのSSGで個人ブログ風サイトを作成する

Dockerは、近年のWebアプリ開発環境におけるデファクトスタンダードになりつつあります。
  この記事では、Dockerの簡単な使い方と、よくあるエラーについての解決方法を紹介します。

Dockerによる開発とうまく動かないときの対処法

2022年2月8日にLaravel9がリリースされました。
composer.jsonやIlluminateの中身を読み解き、
さらに全体の処理を追いLaravelフレームワークへの理解を深めたいと思います。

Laravel9がリリースされたので、あらためてLaravelというフレームワークを読み解いてみる

静的サイトをホスティングする場合、AWSのS3とCloudFrontを利用することができます。
  さらに、GitHubからCircleCiで変更があったら自動できるにデプロイされる方法を紹介します。
  また、Route53での独自ドメインと、ACMで発行した証明書の設定も行います。
  

AWS S3+CloudFrontに静的Webサイトを設置し、GitHub+CircleCIでデプロイ環境を構築する

AWSのEC2上でNode.jsフレームワークであるExpressで作成したアプリケーション（API）をホスティングする方法を書いていきます。
  AWSの仮想ネットワークであるVPCのセッティング方法や、EC2の起動までの流れについても画像付きで丁寧に解説します。

AWS EC2でNode.js(Express)+Nginxアプリケーションのホスティング環境をVPC上に構築する

ブログやコーポレートサイトのCMSとして依然として人気のあるWordPress（ワードプレス）。Dockerイメージを利用しAWSのECS（Elastic Container Service）上で動く環境を構築します。


AWS ECSでWordPress+Docker環境を構築する

Webの（特にサーバーサイドの）エンジニアは、デザインが絡む作業が苦手な傾向があります。
  私はデザイン的なことをやるのは好きですが、今ひとつパッとしないデザインになってしまうことがよくあります。
  そこで、ノンデザイナーでもそれなりに整ったデザインにするためのノウハウを書き残します。

デザインに自信のないエンジニアが、UIデザインするときに気をつけていること

S3の静的ウェブサイトホスティングしているWebページを簡単に301リダイレクトすることができます。

AWS S3で運用している静的サイトを簡単に301リダイレクト設定する

Docker上で動いているMySQLのコンテナにDumpfileを流し込みデータをコピーする方法です。

DockerのMySQLコンテナにダンプファイルを流し込む

特定のファイルの変更を破棄または退避したい場合のメモ。破棄する場合はcheckoutし、退避する場合はstashを用います。

Gitでコミット前に破棄（または退避）したい

適当なUUIDを生成したい時、LaravelのコンソールアプリケーションであるTinkerが便利です。

ITエンジニアのまとめノート

Web・アプリ開発記事一覧

Articles

Clips