【Vue3&TypeScript】ismobilejsでモバイルデバイス判定
Web開発において、モバイルデバイスやブラウザの種類に応じた挙動の制御は一般的な課題であり、端末の種類に基づいた特定の処理が必要な場合もある。特にiOSとAndroid端末での挙動の違いは顕著である。そこで、ismobilejsを使用して、モバイル端末の判定処理を実装することにした。ism
Ei2faJSDbTPC
記事一覧
記事数
158
【Vue3】watchとwatchEffectの違いと使い方をサンプルコードで解説
Vue 3 はリアクティブなデータを監視するために watch と watchEffect の二つの主要なメソッドを提供している。この記事では、それぞれのメソッドがどのように動作するのか、そしてどのようなケースでそれぞれを使用すべきかについて解説する。watch の基本的な使い方w
Vue 3とTypeScriptで仮想スクロールを実装: 「vue-virtual-scroller」の使い方
Vue 3とTypeScriptを使用したvue-virtual-scrollerライブラリの使い方と実装方法を解説する。仮想スクロールの基本から、DynamicScrollerとRecycleScrollerの違い、さらには動的なアイテムサイズへの対応方法まで、実用的なテクニックも紹介している。
Google Maps JavaScript APIでアプリ内に地図を表示する
本記事では、Google Maps Platformを使用してアプリケーション内に地図を表示する方法を解説している。大きく分けて以下の3つの手順で実装することができる。Google Maps Platformにアクセスしプロジェクトを作成するAPIキーを発行する使用するA
【JavaScript】Lodashの使い方まとめ
実務のアプリケーション開発でLodashを使っているため、忘備録を兼ねて使い方を記す。LodashとはLodash（ローダッシュ）は、JavaScriptで使用できる便利なユーティリティライブラリ。このライブラリは、配列、オブジェクト、文字列、関数、その他多くのデータ型に対する多く
【JavaScript】Day.jsの使い方まとめ
実務のアプリケーション開発でDay.jsを使っているため、忘備録を兼ねて使い方を記す。Day.jsとは？Day.jsは、日付と時間を扱うための軽量なJavaScriptライブラリ。Moment.jsのような機能を提供しつつ、パフォーマンスを考慮して作られている。特に、Day.jsは
【Vue3×TypeScript】画像プレビューをPhotoSwipeで実装してみた
PhotoSwipeは、高性能な画像ギャラリーライブラリで、モバイルやデスクトップ、様々なブラウザで高いパフォーマンスと使い勝手を提供するライブラリである。当記事では、いくつかの主要な特徴と実装方法について解説する。また検証環境だが、Vite×Vue3×TypeScriptで構築された環境
AWS LightsailにSSH接続してWordPressのディレクトリを操作する手順
AWS Lightsailで立ち上げたWordPressのサイト運用に際し、SSHコマンドでLightsail上のWordPressディレクトリにアクセスする手順を解説する。1. 事前準備結論、AWS LightsailにSSH接続を行うためには最終的に以下のようなコマンドを実行し
TypeScript×Vue3×Vite開発環境構築
当記事では、Viteを使ってVue3アプリケーションの開発環境構築手順を紹介する。そもそもViteとは何か？Viteは、Vue.js の作者 Evan You によって開始された次世代のフロントエンドビルドツール。一言で言えば、Vue.jsの開発効率を向上させるためのツール
【忘備録】Gitコマンド
業務で使用するGitコマンドのメモ。ブランチ関連リモートブランチ変更git remote set-url origin [変更対象のURL]git remote set-url codecommit-origin [変更対象のURL]// push URL のみ変更す
Djangoで掲示板アプリを実装する
PythonのDjangoフレームワークをローカル環境にセットアップする手順1. 仮想環境の作成: 以下のコマンドを実行して仮想環境を作成python3 -m venv myenv2. 仮想環境の有効化: 以下のコマンドで仮想環境を有効にする（管理人はMacを使用）
Python遊び
PythonのノウハウをメモPython環境構築以下は、VSCodeでPythonの実行環境を構築する手順。Pythonのインストール:コンピュータにPythonがインストールされていることを確認。インストールされていない場合は、Python公式ウェブサイト（ht
TypeScript Tips
実務で学んだTypeScriptの使い方まとめ。Extract<T, U>で特定の方を抽出するユニオン型TからUで指定した型だけを抽出した型を返すユーティリティ型https://typescriptbook.jp/reference/type-reuse/uti
【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」で使うためにはいくつか
