Vue.jsでAvoid mutating a prop directly since the value ... が発生した場合の対応メモ

 Vue.jsで「Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: xxxx」というワーニングが出たので、以下のような対応をして回避しました。

発生原因

親コンポーネントから渡すデータを、子コンポーネント側で変更しようとしていたため出たワーニングと思われます。

エラーメッセージをGoogle翻訳で訳してみると「親コンポーネントが再レンダリングされるたびに上書きされるため、Propを直接変更することは避けてください。...」らしいです。

対応方法

子コンポーネントで値を代入している箇所があったので、該当箇所を修正しました。その後ワーニングは出なくなりました。

その他情報

vue 2.6.12

typescript 3.9.7

WSL2（Windows Subsystem for Linux2）でnpm installやvue createなどが遅い件

 WSL2（Windows Subsystem for Linux2）でnpm installやvue createなどのコマンド操作が遅い

本日２本目のブログ投稿です^^;つい先日Surface Pro 8を購入して、vue.jsの環境を構築しようとWSL2を使ってみたのですが、npmやvue createといったコマンド操作が非常に遅くて困ってました。結局解決できず、WSLで設定しなおすことにしたので、その手順をメモ次いでに記載します。

※今後解決できれば、それもブログに書きたいと思っています。

作業手順

(1)Windows PowerShellを起動する。

(2)コマンド「wsl --list --verbose」と入力し、現在の状態を確認する。

  NAME            STATE           VERSION

* Ubuntu-20.04    Stopped         2

(3)コマンド「wsl --set-version Ubuntu-20.04 1」と入力して、実行環境をWSL2からWSLに切り替える。数分かかるのでしばらく待機する。

(4)終わったら、再度(2)のコマンドを実行して、状態を確認する。

  NAME            STATE           VERSION

* Ubuntu-20.04    Stopped         1

WSL2からWSLに切り替えたことにより、npm installやvue createのコマンド操作の時間が改善されました。すごい早いわけではないですが...

WSL2だと、Windowsのファイルシステム（/mnt/c/xxxx）を参照すると非常に遅いといった書き込みなど多数見かけましたが、私はLinux上のhomeディレクトリで作業していたので、関係ないよなぁと思いつつ、たぶんネットワークのI/Oが遅いのかなぁと思って、ネットを徘徊していましたが、遅い理由が見つけられませんでした。

しばらくはWSLで様子をみつつ、WSL2のほうもたまにネットで調べてみようと思っています。

iPhoneのMagSafeバッテリーパックについて

iPhoneの背面に取り付けるMagSafeバッテリーパックを購入！

前回の投稿からだいぶ間が空いてしまいましたが、久しぶりのブログ投稿です^^;１年ほど前からコロナ禍で在宅勤務が増えて、自分の勉強を兼ねてブログを書こうと思っていましたが、やっと書く気になりましたw

基本的にはプログラミングネタを書くのですが、最近買ったガジェットとかも紹介してみようと思います。

※アフィリエイトやってないので、自由気ままに書きます。

購入の動機

iPhone12 Pro Maxを使用しているのですが、MagSafeで充電できるモバイルバッテリーがあったら便利だなぁと思い購入しました。

結論

先ほど述べた通り、アフィリエイトではないので自由な感想を述べますが、率直に申し上げてコスパが悪く、期待していたレベルのものではないなぁと思っています。完全に私の事前調査不足です。この製品を有効に活用するためには、製品の特長を理解して使うようにする必要があると思います。とはいえ、せっかく買ったので、外出時には積極的に装着して使うようにしています。

以下、良い点、悪い点、総評など好き勝手に述べていきます。

良い点

1. アップル純正のモバイルバッテリーなので、安心して使用できる。アップルの純正ケースをつけていても使用することができ、デザインも良いと思っています。
2. iPhoneにMagSafeで取り付け・取り外しができるので楽です。ただ、MagSafeモバイルバッテリーパック自体はライトニングケーブルで接続して充電する必要があります。
3. モバイルバッテリーのほかに、MagSafe充電器のような使い方もできる。ただ、充電スピードまでは確認してません。

悪い点

1. MagSafeバッテリーパックが満充電の状態でも、iPhoneを完全に充電することはできない。補助バッテリーみたいな感じ？で、iPhone本体の電池の減りを緩やかにするイメージ。
2. コストパフォーマンスが悪い。MagSafeバッテリーパックの価格で、モバイルバッテリーがいくつ買えるだろうか...
3. MagSafeバッテリーパック本体が滑りやすく、iPhoneに装着すると重みも増すので、落としそうで不安になる。
4. 厚みがそこそこあるので、ズボンのポケットとかに入れるのは厳しい。重みも増すので、ちゃんとベルトとかしないとズボンが下がってくる。カバンにiPhoneしまうと、suica使いたいときに不便なので、そういう時は外してポケットに入れてます。

総評

外出先でiPhoneの電池残量が少なくなった時に、MagSafeバッテリーパックで充電しよう！みたいな使い方を想定している方は、この製品はやめたほうが良いと思います。MagSafeバッテリーパックのバッテリー容量は1460mAhで、iPhone12 Pro Maxのバッテリー容量は3687mAhです。MagSafeバッテリーパックはiPhone本体の半分以下となっているようです。

使い方としては、iPhone本体のバッテリー容量を増やすようなイメージで、MagSafeバッテリーパックを装着すると、iPhone本体の電池の減りが緩やかになります。

お値段は、アップル公式で11,800円（税込）しますが、純正品で、安心して使えて、iPhoneのバッテリー消費を緩やかにして、さらにデザインがとても好きって人は買ってもよいのかもしれません。

単純に外出先でiPhoneを充電したいという方は、ほかのモバイルバッテリーを検討することをお勧めします。