Jestの分かりにくい挙動たち
数年Jestを書いていますが、Jestのモック周りで頭を抱えることが多く意図通りに動かすのに苦労しました。 何が難しくさせているのかというと主に以下の理由から来ているのかなと思っています。 今回はそれぞれの難しいと感じる…
タグフロントエンド18件
GitHub ActionsからFirebase Hostingへデプロイするようにしてみた
プライベート用のReactアプリをたまに手直しすることがあるのですが、いい加減CI/CDでデプロイを楽できるようにしとかなきゃなぁと思い、先日GitHub Actions用の設定を追加しました。 詳細は割愛しますが大まか…
npm linkでローカルのnpmパッケージを参照できた
最近知ったnpm linkというものについて書いてみようと思います。 とあるnpmパッケージの実装を変更した後、npm publish前にパッケージをimportしている別プロジェクト側から動作が確認したいというケースが…
GitHub Actionsでポートフォリオサイトのデプロイ自動化した
前々から触ろう、触ろうと思っていて触れていなかったGitHub Actionsの話です。 先日Dependabotくんがプルリクを出していたので、そろそろ手を出すかと思い試してみました！ 下記ソースコードがローカルにcl…
CloudFront+S3構成で単一ドメインで複数のアプリを配信する
同一ドメインで複数のSPAアプリケーション(Angular)を配信する要件があった為、今回下記の内容で実装をしました。 各Angularアプリ毎にS3を作成し、static website hostingの機能を使ってホ…
日付入力フォームはflatpickrがおすすめ
巷には様々な日付入力フォームのライブラリが溢れていますが その中でも先日導入したflatpickrが個人的に気持ちよく動いてくれたので紹介したいと思います！ npm、CDNで公開されているjsライブラリです。 軽量で記述…
クロスドメインにiframeを使うのは難しかった
iframeは実務でも趣味でも使う機会が全く無く、これに関しては無知だったのですが 先日Unity(WebGL)とiframeを組み合わせて自作ゲームを制作する機会があり、結果見事に頓挫したのでiframeについて調べた…
ポートフォリオサイトが完成しました！
空き時間を見てはちまちまとNext.jsで書いていたポートフォリオサイトを公開しました！ 今後も追加する内容があればマイナーアップデートを続けていくつもりです😊 AWS環境へデプロイしようというのは当初から思っていたので…
serverless-nextjsを使うもTypeError: Object(...) is not a functionエラーでビルドに失敗した
AWS環境にNext.jsをお手軽にデプロイするツールにserverless-nextjsというものがあったので、最近試してみていました。 Serverless Framerworkを使っているならお馴染みのserver…
Docker Desktop for WindowsでAngularの開発環境をつくる
AWS LambdaにDockerコンテナをデプロイできることを知り、Dockerを積極利用するモチベーションが高まってきた今日この頃です。 今回はAngularのDocker上での動かし方を備忘録として残していきたいと…
ChromeのデベロッパーツールでWebサイトをデバッグ・検証しよう
今回はChromeのデベロッパーツールについて、普段よく使う機能に絞ってまとめていきます。 何らかのサイトを開いた状態で、F12を押すとデベロッパーツールが開きます。 Winの場合、Ctrl+Shift+IでもOKです。…
JavaScriptで使用ブラウザを判定させたい
Webアプリ開発ではブラウザの差異によって微妙な解釈違いがあり、フロントエンジニアの悩みの種になることが多々あると思います。 せめて使用ブラウザを判定して、推奨ブラウザへ誘導するような処理を実装したい… そういう思いでブ…
Angular5から11にアップデートしたらbuttonタグ同士の隙間が無くなった
先日、Angular5をAngular11にアップデートしました。 ページのレンダリングや変更検知がスムーズになり、喜んでいたのもつかの間。 なんかボタンが詰まってる……？🤔 （※スクリーンショットのボタンはイメージです…
AngularのレンダリングエンジンIvyとは？
今年の11/12にAngular11が公開されました。 今までずっとAngular5で開発を続けてきており、流石にそろそろアプデしないとなと思い、実際にやってみた所感と、初めて体感したレンダリングエンジンIvyについて書…
いつも見ているあのWebサイトはどんなフレームワークでできているんだろう
WappalyzerというChrome拡張を使うとそのWebサイトがどんなフレームワーク、サービスから成り立っているのか解析してくれます。 今回は、興味本位で日頃お世話になっているWebサイトのフロントエンドフレームワー…
フロントエンド(Node.js)でスタイル指定したExcelを出力する
Excelは好きですか？ 僕は嫌いです。（UTF-8のCSVを開こうとしたら文字化けさせてきたり、0埋め数字を勝手に数値型に変えてくる辺りとか） しかし、日本はExcel大国ですので基本的にどう足掻いてもExcelから逃…
RaspberryPi+Node.js+Reactで赤外線リモコンをつくろう(2/2)
※この記事は前の記事の続きです。 ここからは、スマホやタブレットから簡単に赤外線発信させるためのwebアプリを使っていきます。 ちなみにReactで実装する必要性はないので、Vue.jsなりAngularなり得意なフレー…
RaspberryPi+Node.js+Reactで赤外線リモコンをつくろう(1/2)
こんにちは！ 仕事から帰ってくると部屋が寒い…エアコンが効くまでがツラい…そう思う時期になってきました。 せめて事前にエアコンを自宅外から操作できればいいのに…という思いから、今回は余っていたラズパイを引っ張り出して、赤…