エンジニアのはしがき

プログラミングの日々の知見を書き連ねているブログです

フロントエンド

GitHub ActionsからFirebase Hostingへデプロイするようにしてみた

プライベート用のReactアプリをたまに手直しすることがあるのですが、いい加減CI/CDでデプロイを楽できるようにしとかなきゃなぁと思い、先日GitHub Actions用の設定を追加しました。

npm linkでローカルのnpmパッケージを参照できた

最近知ったnpm linkというものについて書いてみようと思います。 やりたかったこと とあるnpmパッケージの実装を変更した後、npm publish前にパッケージをimportしている別プロジェクト側から動作が確認したいというケースがありました。 具体的には、プロジ…

GitHub Actionsでポートフォリオサイトのデプロイ自動化した

前々から触ろう、触ろうと思っていて触れていなかったGitHub Actionsの話です。 先日Dependabotくんがプルリクを出していたので、そろそろ手を出すかと思い試してみました!

CloudFront+S3構成で単一ドメインで複数のアプリを配信する

やりたいこと 同一ドメインで複数のSPAアプリケーション(Angular)を配信する要件があった為、今回下記の内容で実装をしました。 単一のCloudFrontから複数のOrigin(S3 static website hosting)にアクセスを振り分ける。 Originへの振り分けルールはパスパタ…

日付入力フォームはflatpickrがおすすめ

巷には様々な日付入力フォームのライブラリが溢れていますが その中でも先日導入したflatpickrが個人的に気持ちよく動いてくれたので紹介したいと思います!

クロスドメインにiframeを使うのは難しかった

iframeは実務でも趣味でも使う機会が全く無く、これに関しては無知だったのですが 先日Unity(WebGL)とiframeを組み合わせて自作ゲームを制作する機会があり、結果見事に頓挫したのでiframeについて調べた記録を残しておきたいと思います。 慣れた方にとって…

ポートフォリオサイトが完成しました!

空き時間を見てはちまちまとNext.jsで書いていたポートフォリオサイトを公開しました! 今後も追加する内容があればマイナーアップデートを続けていくつもりです😊 portfolio.ts-soda.net github.com

serverless-nextjsを使うもTypeError: Object(...) is not a functionエラーでビルドに失敗した

AWS環境にNext.jsをお手軽にデプロイするツールにserverless-nextjsというものがあったので、最近試してみていました。 serverless-nextjsとは 記述例 原因 ビルドに失敗したバージョン ビルドに成功したバージョン 参考 serverless-nextjsとは github.com S…

Docker Desktop for WindowsでAngularの開発環境をつくる

AWS LambdaにDockerコンテナをデプロイできることを知り、Dockerを積極利用するモチベーションが高まってきた今日この頃です。 今回はAngularのDocker上での動かし方を備忘録として残していきたいと思います。

ChromeのデベロッパーツールでWebサイトをデバッグ・検証しよう

今回はChromeのデベロッパーツールについて、普段よく使う機能に絞ってまとめていきます。

JavaScriptで使用ブラウザを判定させたい

Webアプリ開発ではブラウザの差異によって微妙な解釈違いがあり、フロントエンジニアの悩みの種になることが多々あると思います。 せめて使用ブラウザを判定して、推奨ブラウザへ誘導するような処理を実装したい… そういう思いでブラウザ判定処理について調…

Angular5から11にアップデートしたらbuttonタグ同士の隙間が無くなった

先日、Angular5をAngular11にアップデートしました。 ページのレンダリングや変更検知がスムーズになり、喜んでいたのもつかの間。 なんかボタンが詰まってる……? (※スクリーンショットのボタンはイメージです) ちなみに元々のボタンは↓のような感じでした…

AngularのレンダリングエンジンIvyとは?

今年の11/12にAngular11が公開されました。 今までずっとAngular5で開発を続けてきており、流石にそろそろアプデしないとなと思い、実際にやってみた所感と、初めて体感したレンダリングエンジンIvyについて書いていきたいと思います。

いつも見ているあのWebサイトはどんなフレームワークでできているんだろう

WappalyzerというChrome拡張を使うとそのWebサイトがどんなフレームワーク、サービスから成り立っているのか解析してくれます。 Wappalyzer - Chrome ウェブストア 今回は、興味本位で日頃お世話になっているWebサイトのフロントエンドフレームワークを解析…

フロントエンド(Node.js)でスタイル指定したExcelを出力する

Excelは好きですか? 僕は嫌いです。(UTF-8のCSVを開こうとしたら文字化けさせてきたり、0埋め数字を勝手に数値型に変えてくる辺りとか) しかし、日本はExcel大国ですので基本的にどう足掻いてもExcelから逃れることはできません…。Excel出力機能の実装を…

RaspberryPi+Node.js+Reactで赤外線リモコンをつくろう(2/2)

※この記事は前の記事の続きです。 tm-progapp.hatenablog.com

RaspberryPi+Node.js+Reactで赤外線リモコンをつくろう(1/2)

こんにちは! 仕事から帰ってくると部屋が寒い…エアコンが効くまでがツラい…そう思う時期になってきました。 せめて事前にエアコンを自宅外から操作できればいいのに…という思いから、今回は余っていたラズパイを引っ張り出して、赤外線リモコンアプリを作っ…