TypeScript Tips
実務で学んだTypeScriptの使い方まとめ。Extract<T, U>で特定の方を抽出するユニオン型TからUで指定した型だけを抽出した型を返すユーティリティ型https://typescriptbook.jp/reference/type-reuse/uti
Ei2faJSDbTPC
記事一覧
記事数
146
【GAS×Chatwork】メッセージ一覧をスプレッドシートに出力する
私はソフトウェア開発の傍ら、ホームページ制作の仕事も個人で請けているのだが、制作パートナーとのメッセージツールにChatworkを使っている。ただ2022年の10月ごろから「フリープラン」で過去のメッセージログが閲覧できなくなった。ビジネス上、メッセージログが見えなくなるのはまずい
VuetifyのOSSコントリビュートをやってみる
環境構築リポジトリのフォークVuetify公式リポジトリにアクセスhttps://github.com/vuetifyjs/vuetify（１）右上の「Fork」をクリック（２）デフォルトのまま「Create Fork」をクリック（３
【S3×CloudFront】トップページ以外が403エラーになる場合の対処法
静的サイトジェネレーターHUGOを使ってメディアを構築していた際に遭遇した事象。デプロイした後に、TOPページは問題なく表示されるが、TOP以外の下層ページにアクセスした際に「AccessDenied」となっていた。解決策以下のソースをCloudFront Function
【Vue 3】Composition APIでテンプレート参照する方法
Vue.jsのテンプレート参照は非常に便利であり、Options APIではthis.$refs.xxxという形式で参照が行えた。しかし、Composition APIではOptions API形式の記述法ではテンプレート参照ができなくなったため、Composition APIに則した形で記述を行
S3に保存したWordPressのメディアをCloudFrontで配信する
前回、WordPressのメディアファイルをS3に保存する手順について解説した。前回の記事: WordPressのメディアをS3にアップロードする手順今回はその続きで、S3に保存した画像などのコンテンツをCloudFrontで配信する手順を解説する。そのため、下記の手順が完
WordPressにアップロードされたメディアをS3に保存する手順
環境WordPressホスティングLightsailドメイン管理Route53画像コンテンツ管理S3AWS S3側の設定S3のバケット作成S3権限のIAMユーザーを作成1. S3のバケット作成S3コンソールにアクセスし「バケットを作成」をクリック
【Vue Test Utils】コンポーネントテストでVeeValidateを使用する
今回はVue.jsのバリデーションライブラリである「VeeValidate」とコンポーネントテストライブラリの「Vue Test Utils」を使用してコンポーネントテストでバリデーションエラーを検証します。「VeeValidate」を「Vue Test Utils」で使うためにはいくつか
【Vue Test Utils】overwriting methods via the methods property is deprecatedの対処法
開発環境@vue/cli-service@4.5.15@vue/test-utils@1.3.0@vue/vue2-jest@27.0.0vue-jest@3.0.7jest@27.5.1発生条件createdフックなどで初期化処理などを
【Vue Test Utils】Unknown custom element: router-viewの解決法
テスト環境@vue/cli-service@4.5.15@vue/test-utils@1.3.0@vue/vue2-jest@27.0.0vue-jest@3.0.7jest@27.5.1テスト実行とエラー処理コンポーネントテストを実行
【Vue.nextTick】DOMの変更を検知して処理を行う方法
Vue.nextTick( [callback, context] )Vue.nextTick()を使用すると、Vue.jsがデータの変更に基づいてDOMを更新した後に、何らかの処理（コールバック）を行うことができます。例えば、特定要素のclass名やテキストが変わったタイミングな
【Vue.js】provide/injectでデータバインディングする
※ 当記事はvue@2.7.4で動作確認を行なっています。provide/injectの仕組み従来のVue.jsでは、コンポーネント間のデータバインディングにはPropsを用いてきましたが、大規模なアプリケーションでは大量のデータバインディングが発生し、コードのメンテナンスが大変で
【cypress-file-upload】ファイルアップロードのテスト
e2eテストを実施する際に、ファイルアップロードをテストしたいケースもあると思う。特にシステムの場合は必ずと言っていいほどファイルのアップロード機能は存在する。今回はcypressでファイルアップロードをテストする方法を解説する。結論、cypress-file-uploadというライブラリ
【Firebase×Vue】signInWithRedirectで正常に画面遷移させる方法
signInWithRedirectは、Firebase Authenticationで外部認証(Google, Facebookログインなど)を実装する際に使用するメソッドだ。公式ドキュメントではsignInWithPopupというホップアップ形式の認証方式も紹介されているが、モバイルデバイス対
【Jest】非同期関数(Promise,async await)のテスト
今回はJavaScript テスティングフレームワーク「Jest」を使って非同期関数をテストします。テストの基礎的な概念は公式ドキュメントで十分なのですが、公式ドキュメントには実際にデータを取得する非同期関数がなかったので実用的なサンプルコードを用意しました。公式ドキュメント：非同
VeeValidateでVue.jsアプリのバリデーションを実装
「VeeValidate」は、Vue.jsアプリケーション用のバリデーションライブラリです。今回は、VeeValidateの導入手順と使い方について解説します。当記事の開発環境は以下の通り。vue@2.7.4vue-cli@5.0.8vuetify@2.6.7実
【Vue.js】ApexChartsでグラフやチャートを生成する手順
アプリケーションを開発していると、様々なデータをグラフで表現する場面があるかと思います。今回は「ApexCharts.js」というグラフ用のライブラリを使用してドーナツチャートを生成します。Chart.jsなどのライブラリと比較しても、かなりシンプルに実装できるのでおすすめです。管
【Vue.js】特定要素以外のクリックを検知して処理を行う方法
実装イメージ今回は、「メニューボタン」と「選択肢メニュー」以外がクリックされた際に、選択肢メニューを非表示になるように実装します。動作実際の動作は「Result」タブからご確認ください。ボタンと選択肢メニュー以外がクリックされた際に、選択肢メニューを非表示にするよう
CSSファイルにパラメーターを付与してキャッシュを自動削除する方法
WEBサイトの〇〇を修正しましたので、ご確認ください！変更されていませんキャッシュを削除してご確認ください。mac: command + shift + rwindows: ctrl + F5確認できました。このやりとりが無駄すぎる！ということで今回は、WE
git cloneしたvueのソースをローカル環境で起動する手順
開発環境@vue/cli 4.5.15vue@2.6.14AWS CodeCommit手順git cloneでリポジトリを複製cd コマンドで対象のcloneしたディレクトリに移動node_modulesのインストール依存関係を
