フロントエンド

Nuxt.jsでAPI通信なしの静的ファイルを書き出す

Nuxt.jsのComposition API、useStatic() メソッドを使用して、API通信しない静的ファイルを書き出しできるかを試してみました。 経緯 開発案件でマークアップを担当する際に、開発リポジトリとは別にデザインチーム用のGitを作成するケースは多いです。 静的…

Nuxt.js + AWS ECS Fargate その4(まとめ)

GitHub https://github.com/yuheijotaki/nuxt-fargate_app これまでの記事 その1 Nuxt.jsアプリ作成〜ECRリポジトリへのプッシュ その2 ALBとECS Fargate展開 その3 CI/CD環境作成 その4 まとめ(本記事) 構成 Nuxt.js(SSR)のコードを GitHub にプッシュ…

Nuxt.js + AWS ECS Fargate その3(CI/CD環境作成)

前回に続いてAWSのCodePipelineを使用してCI/CD環境を作成しようと思います。 アプリケーションコードのリポジトリはGitHubを使用しているので、GitHub Actionsでもできるようですが、そちらは一度触ったことがありAWSサービスの理解を深めたいので今回はAWS…

Nuxt.js + AWS ECS Fargate その2(ALBとECS Fargate展開)

前回に引き続きAWS側の設定を行っていきます。 コンテナのタスク、サービスについては改めて理解するため下記が参考になりました。 基礎から応用までじっくり学ぶECS Fargateを利用したコンテナ環境構築 #Fargate | DevelopersIO 構築手順の参考にした記事は…

Nuxt.js + AWS ECS Fargate その1(Nuxt.jsアプリ作成〜ECRリポジトリへのプッシュ)

トレンドのVuejs/NuxtをAws ECS, FargateでSSR、詳細解説します の記事を参考に進めてみる。 ローカル環境 使用バージョン Node.js: 12.11.0 AWS CLI: 2.1.31 Nuxt.js アプリの作成 create nuxt-app で作成します。 $ yarn create nuxt-app nuxt-fargate_app…

【読書メモ】フロントエンド開発入門 プロフェッショナルな開発ツールと設計・実装

フロントエンド開発入門 プロフェッショナルな開発ツールと設計・実装作者:安達 稜,武田 諭発売日: 2020/10/09メディア: 単行本 目次 Part1 導入編 なぜ使うかを知る Chapter1 フロントエンドエンジニアの歴史 Chapter2 フロントエンドエンジニアに求められ…

Nuxt.js・楽天市場APIでWebアプリをつくる

Nuxt.jsと楽天市場APIでWebアプリを作成しました。 GitHub GitHub Pages 構成 API 今回は特にAPIにこだわりなかったので使いやすそうな 楽天市場API を使いました。 Amazonの商品APIは登録や制限の縛りがきつそうで、e-Stat API は種類が多すぎるのと、統計…

JAMstack と Headless CMS

Headless CMS について調べる用事があったのですが、関わりが深そうな JAMstack についても調べてみました。 JAMstack とは? JAMstackはテクノロジーではなく、JAMstackはWebサイトやアプリを構築する新しい方法です。クライアントサイドに基づいた最新のWe…

Webサイト高速化/最適化のためにやったこと

概要 最近作っていたWebサイト( https://atelier24b.com/ )で、Chorme の Audits 使ってパフォーマンス計測しながらやってみたのでその結果 サイトの作り的には WordPress カスタム投稿で一覧/詳細ページ 固定ページあり webpack使って html/css/js コンパ…

homebrew / node.js / nodebrew / npm とは

ググってコマンド打つものの、あまり意味が分かっていなかったのでおさらいします。 homebrew とは? 「Mac OS Xオペレーティングシステム上でソフトウェアの導入を単純化するパッケージ管理システムのひとつである」 Homebrew (パッケージ管理システム) - W…

フロントエンドの学習についてなど

概要 今年 11 月末で Web 制作会社を退職、年明けから新しい会社で働くことになりました。 基本的に転職先の会社の業界や業務内容はそこまで変わらないのですが、フロントエンドエンジニアという職種でよりエンジニアらしい仕事が求められると思うので、11 …

フロントエンドまわりの略語の意味と読み方

分類順がバラバラですが。 フォーマット、言語 HTML エイチティーエムエル HyperText Markup Language CSS シーエスエス Cascading Style Sheets JS ジャバスクリプト JavaScript PHP ピー・エイチ・ピー Hypertext Preprocessor を再帰的に略したもの JPEG …