9
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

leetCodeの問題をVSコードの拡張機能でいつでも挑戦できるようにする

Last updated at Posted at 2022-12-06

エンジニア3年目を機に、leetCodeを始めてみました。
そもそも僕の知っている中で、日本で有名な競技プログラミングのサイトは「atCoder」「leetCode」「Paiza」などがあるかと思います。
その中で僕は「leetCode」を普段から使っています。
なぜかというと、単純に
英語の勉強も兼ねたかった。
atCoderみたいに出力から躓かなくて済む
という理由でした。
atCoderは一気に時間を確保して解かないといけないところを、leetCodeは空いた時間で、自分の好きな問題を解けます。
(一応atCoderも一問ずつ解けたりますが、問題数に限りがあります。)
まだ始めて半年ほどなので、大したレベルではないのですが、最近middleの問題を結構何もみずに解けるようになって、ちょっとずつ進歩は感じています。
今回はそんな僕が、「leetCode」を楽しむための方法を伝授していきます!

leetCodeをVSコードでうまいこと連携させる

やっぱりこういったお勉強というかドリルみたいなのって、子供の頃から億劫になりますよね。 一度始まったらパズルみたいに集中できるのですが、その始まりまでが大変。 ずるずるとずっと一問も解けずに、1日が過ぎてしまうことが何度かありました。 そこで見つけたのが、VSコードの拡張機能です。

利点

スクリーンショット 2022-12-06 15.15.26.png

こちらがleetCodeのVSコードでのアイコンなのですが、これを入れることによって、いつでもクリック一つで問題を解くことができます。
また問題もeasyからhardまで2449問その場で選ぶことができます。

スクリーンショット 2022-12-06 15.18.24.png
難易度も色分けされていて、とてもわかりやすいです。
また、leetcodeで問題を解いていていつも思うのが、もう一度その問題を解いたときに、前どうやって解いたっけ?となることがあります。
leetCodeのサイトでは、解けた問題のコードの保管までやってくれないので、VSコードで解くことでgitを使いコードの保管などもできるようになります!
僕はいつもここでメモをちゃんと書くように心がげ、日頃の業務でも未来の自分がみてわかるようなメモを心がけられるようになりました。

さっそく実践

では早速どうやって拡張機能を使うのかみていきましょう。 まずはleetCodeの拡張機能のアイコンから「leetCode」と検索をかけます。

スクリーンショット 2022-12-06 15.23.36.png

すると上記のようにいくつか中国語で出てくるのですが(おそらく拡張機能自体中国で作られている)、その中の一番上のものを使用しています。
(一応私が使っている中で現状、セキュリティで問題はありませんが、一応個人のPCのVSコードで利用することを推奨します。)

インストールが完了すると、sign-inを求められます。
(※ここで注意が必要なのは、現状2022/12/6 現在、通常の Email・Password でのログインが失敗するようです。
Third Party login か Cookieを選択しましょう。)

私はThird Partyでもうまく登録できなかったので、Cookieを選択しました。

最初に下記のようにleetCodeのアカウントのmailアドレスかIDを求められます.(無料で使えますので、まだ登録がお済みでない方は、まずはleetCodeの本サイトから登録してみてください。)

スクリーンショット 2022-12-06 15.37.57.png

その後、cookieを求められます。
スクリーンショット 2022-12-06 15.40.49.png

自分のleetCodeのダッシュボード画面で検証ツールを開き(右クリックから一番下の「検証」で開く)、Applicationを開きます。
スクリーンショット 2022-12-06 15.43.50.png

すると、いくつかのcookieの中から「LEETCODE_SESSION」というものがありますので、そちらをクリックしてください。
すると下に長い文字列になったcookieが現れますので、それを全部コピペして、フォームに貼り付けます。

スクリーンショット 2022-12-06 15.47.07.png

すると左のバーに問題欄が現れて利用することができます。

スクリーンショット 2022-12-06 15.48.21.png

上記のように展開して問題を解きたい場合は、解きたい問題を選び右下にある青いボタンの「Code Now」から「Just Open The File」から開くことができます。

まとめ

以上、VSコードでleetCodeを利用する方法でした。 ぜひ活用して、日々のプログラミング学習に役立ててください。
9
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?