WebStormの使い方

6.1 IDEの仕組み解説

さて、何が見えているのか確認しようか。

1. プロジェクトのフォルダとファイルのツリー:

ここにはプロジェクトのフォルダの内容が表示されている — web-storm-10.

分かりやすくするために1つファイルを作成しました。次の講義でこれを行います。

2. 現在開いているファイル:

これは単にindex.htmlファイルの内容で、コードがハイライトされています。

3. 上に見えるメインメニュー:

右上の便利なボタン:

• 「緑の三角」 — プロジェクトの開始ボタン
• 「虫」 — デバッグモード開始ボタン
• 「ルーペ」 — プロジェクト内検索
• 「歯車」 — 設定

4. 左に見えるサイドメニュー:

ここには便利なボタンがいくつかあります。特にTerminalボタンが重要です。

5. ステータスバー:

ステータスバーの左側には現在開いているファイルのパスが表示されます。右側にはそのエンコーディングが表示されます: CRLF, UTF-8。 すぐにこれが完璧に理解できるようになるでしょう。

6.2 プロジェクトの解析

1. HTMLファイル。

これらのファイルは.html拡張子を持ち、WebStormはそれらを2つの矢印で緑のアイコンで表示します。 ここには1つだけのファイル — index.html

これらのファイルは.js拡張子を持ち、WebStormはそれらを黄色のアイコンで表示します。 今はスクリーンショットにはありません。

2. スタイル用のCSSファイル。

これらのファイルは.css拡張子を持ち、WebStormはそれらを青いアイコンで表示します。 今はスクリーンショットにはありません。

3. 静的メディアファイル。 データを含んでいますが、コードではないファイルのことを指します。テキストファイル、画像、メディアファイルなどです。 現在のプロジェクトにはありません。

4. 外部ライブラリ (External libraries)。 現在のプロジェクトにはありませんが、ダウンロードするとWebStormがここに表示します。

6.3 ターミナルの使用

WebStormでは、OSのコマンドラインを直接操作できます。 LinuxやMacOSではコマンドラインを「Terminal」と呼ぶことが一般的ですので、WebStormでもそのように呼ばれています。これはWebStorm独自のものではなく、プログラマーの間で一般的な呼称です。

ターミナルを開くには、サイドメニューのターミナルボタンを押します:

こんなウィンドウが表示されるはずです:

このウィンドウでオペレーティングシステムのコマンドを入力できます。特定のコマンドに注目します。

Windowsの現在のバージョンを知るために、以下のコマンドを入力します:

    
      ver
    
  

私の結果は以下のようになりました:

エラーが発生した場合は、まず「cmd」コマンドを入力し、その後に「ver」コマンドを入力してください。

6.4 CodeGymプラグインとは何か、それがなぜ必要なのか？

これは、Intellij IDEAまたはWebStormの開発環境に組み込まれる特別なソフトウェアモジュールで、CodeGymコースの課題を解くために使用されます。例えば、解決策のコードを書いたり、提出したり、デフォルトの解決策と比較したり、他にも様々な機能を提供します。プラグイン経由での課題の進捗はCodeGymアカウントと同期され、サイトと開発環境で同じように表示されます。

CodeGymのプラグインは、Jetbrainsのマーケットプレイスから直接開発環境にインストールできます。以降、WebStormを例にとって手順を説明しますが、Intellij IDEAでも同じ手順が適用されます。

1. "設定"セクションに移動し、Windows/Linux File - Settings, MacOS WebStorm - Preferencesを選択します。設定セクションがない場合、プロジェクトを開くか新しいプロジェクトを作成してください。

2. 表示されたウィンドウのサイドメニューでPluginsセクションを選択し、Marketplaceタブを開きます。検索バーにcodegymと入力してください。

3. プラグインを選択し、Installボタンをクリックします。
4. WebStormを再起動（Restart IDE）してプラグインの使用を開始します。
5. 少し変更されたインターフェースと、上部の水平パネルにアカウントにサインインボタンが表示されます。

クリックすると、アカウントにログインするためのウィンドウが開きます。シークレットキーを入力してください：

シークレットキーは“設定” → “セキュリティとログイン”セクションで確認できます。

ログイン後、プロジェクトとCodegym SDKが自動的にロードされます（他のバージョンに変更する必要はありません）。

6. 新しい課題を開くには、左縦のパネルのTasksをクリックし、左サイドパネルのカードをクリックしてポップアップウィンドウで開くをクリックします:

7. 条件付きのタブとコード入力用のタブの2つのタブがあるウィンドウが開きます。
8. 課題の解決策を書いて、チェックボタンを押してください。

プラグインの手動インストール

1. プラグインをダウンロードしてください。
2. "設定"セクションに移動し、Windows/Linux File - Settings, MacOS WebStorm - Preferencesを選択します。
3. 表示されたウィンドウのサイドメニューでPluginsセクションを選択し、歯車(⚙️)をクリックして「ディスクからプラグインをインストール」を選択します。
4. プラグインがあるフォルダを開き、プラグイン（アーカイブ）を選択してOKをクリックしてください（IDEを再起動します）。

プラグインがインストールされました！これで課題を解くことができます。

サイトとプラグインの課題シンクロ

課題のリストとそのステータスは自動的に更新されます。5分ごと、または任意の課題を提出した後（codegymサーバー）に更新されます。

したがって、サイトで課題を解決した場合、プラグインでも解決済みの課題として表示されます。課題のステータス情報をすぐに更新したい場合は、自分のアバター（右上）をクリックし、ドロップダウンメニューから課題を同期を選択してください：

プラグインの初心者モード

WebStormや他の開発環境にあまり経験のないユーザー向けの簡易版です。このモードでは一部のWebStorm機能が非表示になります。モードを解除するには、自分のアバター（右上）をクリックし、ドロップダウンメニューから設定を選択してください：

PROモードでのプラグインのナビゲーションパネルを非表示にする方法

設定 (⚙️)をクリックして、「プラグインのナビゲーションパネルを表示」のチェックを外してください：