# エンジニアビギナー > 　初心者向けにプログラミング情報を発信！ --- ## 投稿 - [【AWSコスト削減】「PublicIPv4:IdleAddress」とは？課金を止める方法](https://hiro8blog.com/aws-ipv4-idleaddress-cost-reduction/): 最近AWSに移行したツールのコスト管理を... - [【Cursor】OpenAIのAPIキー設定時の「Invalid API Key」エラーの解消方法](https://hiro8blog.com/cursor-openai-api-key-invalid-error/): CursorにOpenAIのAPIキーを... - [【Cursor】エディタ内の入力をVim→通常モードに変更する方法](https://hiro8blog.com/switch-cursor-input-mode/): こんにちは！ 最近リリースされて話題にな... - [WordPressが重い原因はRinker？！](https://hiro8blog.com/rinker-makes-wordpress-heavy/): 今回はこんな疑問に対する1つの解決策を共... - [Promiseの使い方【JavaScript】](https://hiro8blog.com/how-to-use-promise/): 概要 今まで同期処理を書くときはasyn... - [【Xserver】「永続オブジェクトキャッシュを使用してください」の対処方法【WordPress】](https://hiro8blog.com/resolve-persistent-object-cache-indication/): 今回はこのような疑問にお答えします！ W... - [eslint実行エラー"Error: Failed to load plugin 'vue' declared in '.eslintrc.cjs'"](https://hiro8blog.com/error-failed-to-load-plugin-vue/): 概要 eslint実行時にlintとは別... - [XserverにSSH接続する方法【Mac】](https://hiro8blog.com/connect-to-xserver-by-ssh/): WordPressでブログを運営している... - [【WordPress】環境間をコマンド1つで簡単に同期する](https://hiro8blog.com/sync-wp-between-local-and-production/): WordPressでブログを運営している... - [Dockを擬似的に常に非表示にする【Mac】](https://hiro8blog.com/always-hide-dock/): 概要 Spotlight でアプリを起動... - [【Git】ブランチ切り替えはcheckoutではなくswitchを使おう！](https://hiro8blog.com/git-switch/): 今までブランチ切り替えはgit chec... - [マージコミットをrevertする方法【git revert merge commit】](https://hiro8blog.com/how-to-revert-merge-commit/): 通常のコミットと同じようにマージコミット... - [aタグ内の子要素のクリックイベントによる画面遷移ができない【javascript】](https://hiro8blog.com/page-transition-by-click-atag-child-elem/): この記事でわかること aタグ内の子要素の... - [【vscode】タブを閉じた後の遷移先を右隣のタブにする](https://hiro8blog.com/focus-righttab-after-close-tab/): この記事でわかること vscodeでタブ... - [Laravelのmigrateエラー"No such file or directory"【Laravel×Docker】](https://hiro8blog.com/migrate-error-in-laravel-container/): dockerコンテナ内のlaravelプ... - [【Laravel】プロジェクト名を簡単に変更する方法](https://hiro8blog.com/rename-laravel-project/): laravelプロジェクトを作成して色々... - [【Homebrew】マイナーバージョン指定でパッケージをインストールする](https://hiro8blog.com/brew-install-minor-version-formula/): brew installでインストールで... - [【Django×Docker】"Can't connect to MySQL server on"の原因と解決方法](https://hiro8blog.com/cannot-connect-to-mysql-server-error/): 環境 docker 20. 10. 8d... - [django-environで.envから環境変数を読み込む方法【Django × Docker】](https://hiro8blog.com/load-env-by-django-environ/): はじめに Django×Docker 環... - [【git revert】複数コミットをまとめてrevertする【使い方】](https://hiro8blog.com/revert-commits-all-at-once/): Gitを使って開発をしているとまとめて複... - [【Laravel×Docker】browser-syncでホットリロードする方法](https://hiro8blog.com/how-to-watch-laravel-container-by-browser-sync/): 環境 docker 20. 10. 6 ... - [【Laravel×Docker】XdebugでLaravelコンテナをデバッグ実行する方法](https://hiro8blog.com/how-to-debug-laravel-container-by-xdebug/): 環境 Docker 20. 10. 5 ... - [MAMPでPHPの環境構築【PHP / M1 Mac】](https://hiro8blog.com/built-php-enviroment-by-mamp/): 今回はphpの環境構築の中でも比較的簡単... - [【Mac】スクショの保存先を変更する方法](https://hiro8blog.com/how-to-change-screen-shot-save-location/): スクショの保存先を変更したいとき ターミ... - [Streaming APIでツイートを取得するたびに通知音を鳴らす方法【Vue.js】](https://hiro8blog.com/how-to-play-sound-when-getting-tweet-by-streaming-api/): 特定のワードを含んだツイートをリアルタイ... - [【レビュー】ロジクール ワイヤレストラックボールマウス MX ERGO](https://hiro8blog.com/review-mx-ergo/): コロナが長引いていて、在宅ワークも定着し... --- # # Detailed Content ## 投稿 ### 【AWSコスト削減】「PublicIPv4:IdleAddress」とは？課金を止める方法 - Published: 2024-08-09 - Modified: 2024-08-09 - URL: https://hiro8blog.com/aws-ipv4-idleaddress-cost-reduction/ - カテゴリー: AWS こんにちは！ ヒロ（@hiroya232）です！ 最近AWSに移行したツールのコスト管理をしていたら見つけた「PublicIPv4:IdleAddress」についてです。 そもそも「PublicIPv4:IdleAddress」は何なのか、なぜ課金が発生しているのか、課金を止めるにはどうすればいいのか丁寧に解説していきます。 今困っている方はもちろん、たまたま本記事... --- ### 【Cursor】OpenAIのAPIキー設定時の「Invalid API Key」エラーの解消方法 - Published: 2024-01-09 - Modified: 2024-05-04 - URL: https://hiro8blog.com/cursor-openai-api-key-invalid-error/ - カテゴリー: 開発ツール CursorにOpenAIのAPIキーを登録する際、確実に正しいAPIキーを設定しているはずなのになぜかエラーが発生する。。。 といった状況になることがあると思います。 そこで、本記事ではその際発生する「Invalid API Key」エラーの解消方法について解説しています。 確実に正しいAPIキーを設定しているのにもかかわらずエラーになる場合、OpenAI APIのクレジット残高が不足している可能性があります。その場合OpenAI APIのクレジットのチャージとAPIキーの再作成等をする必要が... --- ### 【Cursor】エディタ内の入力をVim→通常モードに変更する方法 - Published: 2023-12-28 - Modified: 2024-05-04 - URL: https://hiro8blog.com/switch-cursor-input-mode/ - カテゴリー: 開発ツール こんにちは！ 最近リリースされて話題になっているAIエディタの「Cursor」ですが、 まだ情報が少なく少し困ったことがあったのでその内容を共有したいと思います。 対処方法は非常にシンプルですが、うっかり入力がVimモードに設定されていたということもあるので、ぜひ最後まで読んで参考にしてみて下さい。 この記事で分かること なぜ入力がVimモードになってしまっているのか 入力をVim→通常モードに変更する方法 なぜ入力がVimモードになってしまっているのか Vimの拡張機能がインストールされていて... --- ### WordPressが重い原因はRinker？！ - Published: 2023-07-10 - Modified: 2024-05-04 - URL: https://hiro8blog.com/rinker-makes-wordpress-heavy/ - カテゴリー: WordPress Rinkerを導入したらブログが重くなった... Rinkerの商品リンクの設定を変更したらブログが重くなった... 今回はこんな疑問に対する1つの解決策を共有します！ 私自身、別で運営しているキャンプ系ブログで商品リンクを貼るのにRinkerを使用しています。 先日、Rinker含め諸々の設定を変更した後、ブログへアクセスしてみるとページの表示速度が異常に遅いことに気づきました。色々調査... --- ### Promiseの使い方【JavaScript】 - Published: 2022-12-01 - Modified: 2024-05-04 - URL: https://hiro8blog.com/how-to-use-promise/ - カテゴリー: JavaScript 概要 今まで同期処理を書くときはasync/awaitで何となくわかった気になりながら実装していましたが、最近Promiseベースで書かれたコードをがっつり読む機会があり、実際何をやっているのかよく分からなかったのでこれを機にPromiseについて調べてみました。 本記事ではその調べた内容を共有していきます。 この記事で分かること Promiseって？ Promiseの使い方 Promiseって？ 特定の処理の終了を待つ（同期処理をする）ために使われるオブジェクトです。 Promiseオブジェク... --- ### 【Xserver】「永続オブジェクトキャッシュを使用してください」の対処方法【WordPress】 - Published: 2022-11-21 - Modified: 2024-05-04 - URL: https://hiro8blog.com/resolve-persistent-object-cache-indication/ - カテゴリー: WordPress 永続化オブジェクトキャッシュって何？ どうやって対処したらいいの？ 今回はこのような疑問にお答えします！ WordPressのサイトヘルス画面におすすめの改善として表示される「永続オブジェクトキャッシュを使用してください」という勧告ですが、これは適切に対処してあげることでページの表示速度が改善できる可能性があります。 表示速度が向上することはSEOの観点でもプラスに働くので、皆さんのサイト... --- ### eslint実行エラー"Error: Failed to load plugin 'vue' declared in '.eslintrc.cjs'" - Published: 2022-08-02 - Modified: 2024-05-04 - URL: https://hiro8blog.com/error-failed-to-load-plugin-vue/ - カテゴリー: JavaScript 概要 eslint実行時にlintとは別のエラーが発生したのでその解消方法を共有します この記事で分かること 以下エラーの解消方法 Error: Failed to load plugin 'vue' declared in '. eslintrc. cjs' エラー内容 $ yarn lint:fix yarn run v1. 22. 19 $ eslint --fix --ext . jsx,. js,. tsx,. ts,. vue . Oops! Something wen... --- ### XserverにSSH接続する方法【Mac】 - Published: 2022-06-12 - Modified: 2024-05-04 - URL: https://hiro8blog.com/connect-to-xserver-by-ssh/ - カテゴリー: Xserver XserverにSSH接続する方法を知りたい！ WordPressでブログを運営しているとXserverにSSH接続して作業をすることも出てきますよね。 今回はXserverにSSH接続する方法を、「Xserverの管理画面で認証キーを作成する方法」と「独自の認証キーを作成する方法」の2パターンに分けて解説していきます。 本記事を読めばどちらの方法でもXserverにSSH接続することができるようになるので、是非参考にしていただければと思いま... --- ### 【WordPress】環境間をコマンド1つで簡単に同期する - Published: 2022-06-03 - Modified: 2024-05-04 - URL: https://hiro8blog.com/sync-wp-between-local-and-production/ - カテゴリー: WordPress WordPressでブログを運営していると、サイトのデザインの変更や、wp-config. phpやfunction. phpやなどのPHPファイルを編集による設定変更、WordPress・プラグインのアップデートなど様々な作業があると思います。PHPファイルの編集やアップデートする際は慎重になる必要があると思いますが、ときにはミスをして画面が真っ白みたいなことになりますよね... （私は何度もやらかしました） そのため動作確認用のステージング環境や開発用のローカル環境を用意している方も多いと思います... --- ### Dockを擬似的に常に非表示にする【Mac】 - Published: 2022-05-15 - Modified: 2022-09-19 - URL: https://hiro8blog.com/always-hide-dock/ - カテゴリー: Mac 概要 Spotlight でアプリを起動して、アプリの切り替えはCmd+Tabで操作したりしている方にとって、Dock が無用の産物になっていると思います。システム環境設定から「Dock を自動的に表示/非表示」の設定にチェックを入れれば多少マシにはなりますが、意図せず Dock の領域にマウスオーバーしてしまった際にも出てくるので邪魔ですよね。今回は、この邪魔な Dock を擬似的に常に非表示にする方法について解説していきます。 この記事で分かること Dock を擬似的に常に非表示にする方法 ... --- ### 【Git】ブランチ切り替えはcheckoutではなくswitchを使おう！ - Published: 2022-05-13 - Modified: 2023-07-25 - URL: https://hiro8blog.com/git-switch/ - カテゴリー: Git ブランチを切り替える方法を知りたい！ ブランチ切り替えにはswitchいいと聞いたけど、どうやって使うの？ 今までブランチ切り替えはgit checkout が使われることが多かったと思います。 しかし、このcheckoutコマンドでできることはブランチ切り替えだけでなく、変更の取り消しや過去ファイルの復元など様々な用途で使われてきました。同じコマンドなのにできること... --- ### マージコミットをrevertする方法【git revert merge commit】 - Published: 2022-04-06 - Modified: 2024-05-04 - URL: https://hiro8blog.com/how-to-revert-merge-commit/ - カテゴリー: Git マージコミットをrevertしようとしたらエラーが出た... どうしたらrevertできるの？ 通常のコミットと同じようにマージコミットをrevertするとエラーが発生してrevertできませんよね。もちろんマージコミットもrevertすることはできるのですが、追加でオプションを指定してやる必要があります。 本記事ではそのオプションを使用してマージコミットをrevertする方法について解説していきます。この方法を知っておけば基本的にrevert... --- ### aタグ内の子要素のクリックイベントによる画面遷移ができない【javascript】 - Published: 2021-12-27 - Modified: 2022-09-19 - URL: https://hiro8blog.com/page-transition-by-click-atag-child-elem/ - カテゴリー: JavaScript この記事でわかること aタグ内の子要素のクリックイベントで画面遷移する方法 結論 クリックイベントの中でpreventDefaultを使う 経緯 aタグ内の子要素のクリックイベントで画面遷移をしたい状況があり、以下のような構造のコードを書いたら、jsは実行されているのに、なぜか親要素のリンク先に飛んでしまうということがありました。 親要素子要素&... --- ### 【vscode】タブを閉じた後の遷移先を右隣のタブにする - Published: 2021-12-26 - Modified: 2024-05-04 - URL: https://hiro8blog.com/focus-righttab-after-close-tab/ - カテゴリー: VSCode この記事でわかること vscodeでタブを閉じたあとの移動先を前回開いたタブではなく右隣のタブにする方法 はじめに 特に大きいサービスのコードを読んでいると、あっちこっちのファイルに飛んで行って、タブがごちゃつくと思います。 でもデフォルトの設定だと、整理しようとするとタブを閉じる度にあっちこっちにフォーカスが飛んで、そのファイルは閉じていいやつなのか確認をいちいちしないのが手間だと思います。 そこでちょっと調べてみたところ、良さそうな設定があったので今回はそちらの紹介です。 設定方法 1. v... --- ### Laravelのmigrateエラー"No such file or directory"【Laravel×Docker】 - Published: 2021-09-28 - Modified: 2022-09-19 - URL: https://hiro8blog.com/migrate-error-in-laravel-container/ - カテゴリー: Laravel dockerコンテナ内のlaravelプロジェクトでphp artisan migrateがなかなかうまく行かなかったのでその解消法について書いていきます 環境 Laravel Framework 8. 61. 0PHP 8. 0. 11Docker 20. 10. 8docker-compose 1. 29. 2 エラー内容 laravelコンテナ内でphp artisan migrateするとSQLSTATE No such file or directoryとエラーが出る $ ... --- ### 【Laravel】プロジェクト名を簡単に変更する方法 - Published: 2021-09-27 - Modified: 2022-09-19 - URL: https://hiro8blog.com/rename-laravel-project/ - カテゴリー: Laravel laravelプロジェクトを作成して色々進めたけどやっぱりプロジェクト名を変えたいってときの方法をググったら、「基本的にできない」or「Githubにプッシュしてクローンし直す」の2択しか見当たらず手間に感じて、試してみた比較的簡単な別の方法が(たぶん)うまく行ったのでその方法について書いていきます ※確実に問題ないかは保証できないので、やるときは自己責任でお願いします。 環境 Laravel Framework 8. 61. 0PHP 8. 0. 11 ディレクトリ構成 . ├── README. md... --- ### 【Homebrew】マイナーバージョン指定でパッケージをインストールする - Published: 2021-09-23 - Modified: 2022-09-19 - URL: https://hiro8blog.com/brew-install-minor-version-formula/ - カテゴリー: Homebrew brew installでインストールできる fomula には基本的に過去のマイナーバージョンは保持していないようなので、指定してインストールしたい場合にはひと手間必要になります。今回はそのやり方について解説していきます。 この記事で分かること homebrew で過去のマイナーバージョンを指定してパッケージをインストールする方法 環境 Homebrew 3. 2. 13 大まかな流れ git リポジトリからインストールしたいバージョンのコミットを探すHEAD の位置を対象コミットに移動する通常通... --- ### 【Django×Docker】"Can't connect to MySQL server on"の原因と解決方法 - Published: 2021-09-06 - Modified: 2022-09-19 - URL: https://hiro8blog.com/cannot-connect-to-mysql-server-error/ - カテゴリー: Django 環境 docker 20. 10. 8docker compose 1. 29. 2django 3. 1mysql 8. 0 エラー内容 settings. py、docker-compose. ymlが下記設定内容の状態でdocker-compose upでコンテナを起動しようとすると、 Can't connect to MySQL server on 'db'とエラーが出る DATABASES = { "default": { "ENGINE": "dja... --- ### django-environで.envから環境変数を読み込む方法【Django × Docker】 - Published: 2021-07-11 - Modified: 2022-09-19 - URL: https://hiro8blog.com/load-env-by-django-environ/ - カテゴリー: Django はじめに Django×Docker 環境の構築をする際に環境変数を. envから読み込むやり方についての解説です今回は. envから環境変数を読み込む方法に限定しているので、django-environ の使い方全般については触れません 環境 Django 3. 1Python 3. 9. 6django-environ-2 2. 1. 0Docker 20. 10. 7 前提 以下のディレクトリ構成で、Djangoアプリケーションのシークレットキーを. envファイルから読み込むことを想定して説明していきますf... --- ### 【git revert】複数コミットをまとめてrevertする【使い方】 - Published: 2021-06-12 - Modified: 2023-07-07 - URL: https://hiro8blog.com/revert-commits-all-at-once/ - カテゴリー: Git Gitを使って開発をしているとまとめて複数コミットをrevertしたくなることがあると思います。 そのコミット数が数十、数百だったりするとと一つ一つrevertしていては日が暮れてしまうし、何より面倒ですよね。それにたとえ数コミットしかなくて数秒で終わる作業だったとしても、その数秒の積み重ねは大きな差につながります。 そこで、本記事では複数コミットをまとめて一括でrevertする方法について解説していきます。 この記事で分かること ポイント 基本的なrevertの使い方 指定した範囲内にあるコミ... --- ### 【Laravel×Docker】browser-syncでホットリロードする方法 - Published: 2021-06-08 - Modified: 2024-05-04 - URL: https://hiro8blog.com/how-to-watch-laravel-container-by-browser-sync/ - カテゴリー: Laravel 環境 docker 20. 10. 6 docker-compose 1. 29. 1 composer 2. 0. 14 laravel 8. 42. 1 laravel Mix 6. 0. 19 php 8. 0. 7 browser-sync 2. 26. 14 手順 browser-sync をインストール webpack. mix. js を編集 起動 browser-sync をインストール 以下のコマンドでグローバルに browser-sync をインストール（今後使わなそうなら開発環境のみでも OK） npm ... --- ### 【Laravel×Docker】XdebugでLaravelコンテナをデバッグ実行する方法 - Published: 2021-05-23 - Modified: 2024-05-04 - URL: https://hiro8blog.com/how-to-debug-laravel-container-by-xdebug/ - カテゴリー: Laravel 環境 Docker 20. 10. 5 Laravel 8. 42. 1 PHP 8. 0. 6 Xdebug 3. 0. 4 前提 vscode使用 拡張機能「PHP Debug」導入済み Xdebug以外の環境は構築済み 手順 Xdebugの導入 php. iniの編集 launch. jsonの編集 動作確認 Xdebugの導入 phpのDockerfileに以下のように記述 FROM php:8. 0-fpm-buster SHELL ["/bin/bash", "-oeux&q... --- ### MAMPでPHPの環境構築【PHP / M1 Mac】 - Published: 2021-05-12 - Modified: 2024-05-04 - URL: https://hiro8blog.com/built-php-enviroment-by-mamp/ - カテゴリー: PHP 今回はphpの環境構築の中でも比較的簡単なMAMPというソフトウェアを使った環境構築、動作確認まで行っていきます。差があるかはわかりませんが、m1macでやっていきますので環境合わせたい方は参考までに。 MAMPって？ 最初にMAMPが何者なのかだけサラッと説明しておきます。mac上でphpの開発環境を作るソフトウェアのことで、 M ... Macintosh(マシン) A ... Apache(サーバー) M ... MySQL or MariaDB(DB) P ... PHP の略になってい... --- ### 【Mac】スクショの保存先を変更する方法 - Published: 2021-04-14 - Modified: 2022-09-19 - URL: https://hiro8blog.com/how-to-change-screen-shot-save-location/ - カテゴリー: Mac スクショの保存先を変更したいとき ターミナルで↓のコマンドを入力すると変更できます defaults write com. apple. screencapture location 保存したいフォルダのフルパス killall SystemUIServer finderからパスを持っていきたい場合は保存先のフォルダを選択した状態で、「option + command + V」でフルパスをコピーできます また、一応finder下のパスバーを右クリックして、「"〇〇"のパス名をコピー」を選択すればコピ... --- ### Streaming APIでツイートを取得するたびに通知音を鳴らす方法【Vue.js】 - Published: 2021-03-28 - Modified: 2022-09-19 - URL: https://hiro8blog.com/how-to-play-sound-when-getting-tweet-by-streaming-api/ - カテゴリー: Vue.js 特定のワードを含んだツイートをリアルタイムで取得して表示するwebアプリを作っているときに、取得されたら通知音を鳴らしたくなったので、その実装方法を書いていきます。 環境 vue@2. 6. 12@vue/cli 4. 5. 9 実装方法 今回はjavascriptのAudioオブジェクトを使って実装します まずは、鳴らしたい音声ファイル(今回はsound. mp3とします)をsrc/assets に置きます。 あとは以下のコードを書けばツイート取得時に音がなります --- ### 【レビュー】ロジクール ワイヤレストラックボールマウス MX ERGO - Published: 2021-03-27 - Modified: 2024-05-04 - URL: https://hiro8blog.com/review-mx-ergo/ - カテゴリー: ガジェット コロナが長引いていて、在宅ワークも定着しつつありますね。私は新卒ですが未だに一度も出社したことがなくて寂しさを感じています... まあそんなことは置いておいて、在宅が増えてくると自宅の仕事環境も整えたくなりますよね。ディスプレイを買ってデュアルディスプレイにしてみたり、いい椅子を買ってみたり... そんな中から今回はマウスの紹介をしようと思います。2020年9月くらいから半年ほど使っていた「ロジクール ワイヤレストラックボールマウス MX ERGO」で、結構使ってきたので、良かった点・悪かった点について... ---