![](https://blog.mrym.tv/wp-content/uploads/2019/04/pose_agura_man-2.png)
JavaScript/TypeScriptを書いている時に、ちょっとした処理を試してみたい時とかありませんか?例えば日付のフォーマット変換とか、日付のフォーマット変換とか(2回書きました)
今日はそんな時に力を発揮する、VSCodeの素晴らしいプラグインをご紹介します!
ちょっと試したい時の問題点
JavaScript/TypeScriptを書いている時に、ちょっとした処理を試したい時は良くある(?)と思います。
例えばこのQiitaの記事に有るような日付のフォーマット変換とかですね。(3回目)
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGMzY3NjclMkZwcm9maWxlLWltYWdlcyUyRjE0NzM2ODcxOTE_aXhsaWI9cmItNC4wLjAmYXI9MSUzQTEmZml0PWNyb3AmbWFzaz1lbGxpcHNlJmZtPXBuZzMyJnM9MGJkNWEwNWIzNTgxMGFhYmIxNjE3M2EzMWFhZmJmNWU%26blend-x%3D120%26blend-y%3D467%26blend-w%3D82%26blend-h%3D82%26blend-mode%3Dnormal%26s%3D7b7d740e6c392ed56e78b8712fcf07d8?ixlib=rb-4.0.0&w=1200&fm=jpg&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JUU2JTk3JUE1JUU0JUJCJTk4JUUzJTgzJTk1JUUzJTgyJUE5JUUzJTgzJUJDJUUzJTgzJTlFJUUzJTgzJTgzJUUzJTgzJTg4JUUzJTgxJUFBJUUzJTgxJUE5JTIwJUU2JTk3JUE1JUU0JUJCJTk4JUU3JUIzJUJCJUU1JTg3JUE2JUU3JTkwJTg2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LXBhZD0wJnM9Yjg4ZmE3Njk3Mjk3ZjgzZTgwZjdiNTA0MDY2NWUyZWY&mark-x=120&mark-y=112&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBvc2FrYW5hZmlzaCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1wYWQ9MCZzPWI3YmE1MDE2ZWI5YjgyNTk3NDAxZDQzYWM1YTYyNzg3&blend-x=242&blend-y=480&blend-w=838&blend-h=46&blend-fit=crop&blend-crop=left%2Cbottom&blend-mode=normal&s=f9b7c8d4524b3ee9e0e7ce48ccfc103d)
日付フォーマットなど 日付系処理 - Qiita
日付をフォーマットする日付をフォーマットして返す。フォーマット(第二引数)を省略した場合2014-01-23 01:23:45.678みたいな形で返す。/** * 日付をフォーマットする * @…
こういった時、人によってはChromeのコンソールで試したり、進んだ人(?)はJSFiddleとかを使ったりしていると思います。
でも、そんな事をしなくても、VSCodeを使っている人にはとっても便利なプラグインがあるのです!
お試し実行の救世主「Quokka.js」
ご紹介するのは「Quokka.js」!
![](https://quokkajs.com/assets/img/main-video-2.gif)
Quokka - JavaScript and TypeScript playground in your editor
Quokka runs your JavaScript and TypeScript code and displays results inline in VS Code, WebStorm, and Sublime Text.
Xcodeを使った事がある人は「Playground」を想像して貰えればすぐ分かると思います。
このプラグインをVSCodeにインストールすると色々な事ができるようになりますが、正直知っておいた方が良いのは1つだけです!
VSCodeを開いた状態で以下のキーを入力するだけ。
JavaScriptの場合:Cmd/Ctrl + K, J
TypeScriptの場合:Cmd/Ctrl + K, T
すると、Quokkaファイルが開かれ、すぐさまコードを試す事ができます。
終わりに
いかがでした?
ちょっと処理を試してみたいという時には、すかさず「Cmd + k, t」を押すだけですぐに試す環境が出てくるのはかなり便利です。
プラグインをインストールするだけですぐ試す事ができるので、気になった方はぜひお試しください!
コメント