Xcodeの文字化けしたログをVisual Studio Code (VSCode) でデコードする

# はじめに

Xcodeで開発している際、`print`や`NSLog`でログ出力をしたときに、下記のような文字化けに遭遇したことはありませんか？

```
{
    "long_name" = "\U6e0b\U8c37";
    "short_name" = "\U6e0b\U8c37";
}
```
こちらはUnicodeで出力されているようです。
今回はこちらをVisual Studio Code （VSCode） を使い、読める状態にしていきたいと思います。

# 前準備

* [Visual Studio Code](https://azure.microsoft.com/ja-jp/products/visual-studio-code/) をインストールする
* Visual Studio CodeのExtensionで[Encode Decode](https://marketplace.visualstudio.com/items?itemName=mitchdenny.ecdc) をインストールする

VSCodeを起動し、`Shift+Cmd+X` もしくは `View → Extensions` で *Extensions: Marketplace* のタブを開き、`Encode Decode`と検索すると簡単にインストールできます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37344/cb950d27-7d4b-2f35-9d56-921212ca38ab.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37344/7d6a83d9-71c8-31ef-d551-5ac8f2adfdbf.png)


# 手順

### 1. 文字化けしたログをコピーし、VSCodeへ貼り付ける

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37344/ce5f6060-11bb-f4ab-5788-ed31f4632369.png)

### 2. VSCodeの置換機能で`\U`を`\u`へ置換する

`Cmd＋Opt+F` もしくは `Edit → Replace` を押してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37344/26edac07-c8c9-6e53-c543-4e77c05adff5.png)

置換する際は下記のように検索すると簡単です。

||正規表現あり|正規表現なし|
|:---|:---:|:---:|
|**検索キーワード**|`\\U`|`\U`|
|**置換キーワード**|`\\u`|`\u`|
||![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37344/d3a5b9ee-8546-2e6e-b1c7-eb50e273ffa3.png)|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37344/7e2675f4-5302-c1d3-fe01-8da188fd075d.png)|

検索後、`Cmd+Enter`で全件置換を行えます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37344/97554d09-635d-bf2b-673a-829ceef70fd0.png)

### 3. VSCodeの検索機能でUnicode部分を全選択する

`Cmd＋Opt` もしくは `Edit → Find` を押してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37344/8644a409-583c-4b0f-3e83-5d24f4059afb.png)

正規表現をONにし、検索キーワードへ `\\u.{4}` と入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37344/006a0f47-7c50-5f14-ef8c-947bf0226089.png)

その後 `Opt+Enter`を押すと、Unicodeの部分が全選択されます。
この際、カーソルが全てのUnicode部分にあることを確認してください。
これ移行の操作でずっと選択されている必要があるため、誤操作等で選択が解除されてしまった場合は、再度こちらを行い、Unicode部分を全選択してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37344/2f99e07b-c22e-d25c-4a00-27fd7aaec997.png)

### 4. コマンドパレットを表示する

`F1` もしくは `Shift+Cmd+P` もしくは `View → Command Palette...` を押し、コマンドパレットを表示します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37344/8d3db172-dd4c-3e55-8854-a2f9e34f3726.png)

### 5. Encode/Decodeを起動する

`Encode/Decode: Convert Selection` を選択します。
途中まで文字を打つと簡単に見つかると思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37344/ed626ebb-ea99-c41a-d715-6d1eb79cbab8.png)

### 6. Encode/DecodeでUnicodeをStringへ置換する

`Unicode to String`を選択します。
こちらも途中まで文字を打つと簡単に見つかると思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37344/78dc0030-ffac-2a64-8e05-f265dfff2e84.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37344/9707651d-ecc0-ed11-c2be-e4746dd21a2d.png)

### 7. 選択を解除する

`Esc`で選択を解除します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37344/2d5803c6-7bb3-a14e-53d5-70f965a9a859.png)

選択解除せずに文字入力をしてしまうと、全ての文字が入力した文字に置換されてしまうので、必ず選択を解除しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37344/b3503942-5b9d-8caf-dc60-cd6c7839e8d2.png)


# 最後に
今回はVSCodeを使って文字化けしたログを読めるようにする方法を紹介しました。
もっと簡単な方法があったり、VSCodeを使わなくても簡単にコンバートできる方法があったら、是非コメントで教えて下さい！