JavaScript と TypeScript の入門

JetBrains Toolbox をダウンロードしてインストールする

• JetBrains Toolbox をダウンロードしてインストールします。

  macOS の場合、プロセッサーの種類 (Apple Silicon または Intel) に一致するインストーラーをダウンロードすることもできます。システムのプロセッサーに基づいて正しいオプションを選択してください。

JetBrains Fleet をダウンロードしてインストールする

• JetBrains Toolbox で、JetBrains Fleet アイコンの横にあるインストールをクリックします。

  

ワークスペースを開く

1. ⌘ O を押すか、メインメニューからファイル | オープンを選択します。

2. ファイルブラウザーで、コードを保存する空のフォルダーに移動し、オープンをクリックします。

ディレクトリを開くと、それがワークスペースのルートになります。ファイルビューでその内容を表示できます。

Node.js インタープリターを構成する

1. ⌘ , を押して、プロジェクト設定のタブに切り替えます。タブの名前は通常、プロジェクトが保存されているフォルダー名にちなんで付けられています。

2. ツールチェーン | Node.js セクションでドロップダウンリストをクリックし、次のいずれかの操作を実行します。

   • 検出された Node.js インタープリターの 1 つを選択します

   • Node.js インタープリターの追加をクリックし、Go SDK ディレクトリへのパスを指定します。

   

プロジェクトファイルの作成

1. ファイルビューでルートフォルダーを右クリックし、新規ファイルを選択します。新しいファイルに app.js という名前を付けます。

2. 次のコードをエディターに貼り付けます。

   const http = require('http'); const hostname = '127.0.0.1'; const port = 3000; const server = http.createServer((req, res) => { res.statusCode = 200; res.setHeader('Content-Type', 'text/plain'); res.end('Hello World'); }); server.listen(port, hostname, () => { console.log(`Server running at http://${hostname}:${port}/`); });

3. ファイルビューでルートフォルダーを右クリックし、新規ファイルを選択します。ファイルに package.json という名前を付けます。

4. 次のコードをエディターに貼り付けます。

   { "name": "server", "version": "1.0.0", "scripts": { "start": "node app.js" } }

スマートモードを有効にする

• ウィンドウの右上隅にあるスマートモードをクリックし、次に Enable をクリックします。

  有効にするボタンをクリックした後、バックエンドの準備が行われるまでしばらく待つ必要がある場合があります。

  

クイックフィックスとインテンションアクションを使用する

• ⌥⏎を押して、現在のコンテキストで Fleet が提案するアクションにアクセスします。

  クイックフィックスを使用して問題を解決します。

  

  インテンションアクションを使用してコードを改善します。

  

コードのリファクタリング

• 名前を変更したいシンボルにキャレットを置きます。⌃ R を押して、新しい名前を付けます。

  

  シンボルに新しい名前が付けられ、その使用箇所がすべて更新されます。

コードベースを移動する

• ⌘ B を押してシンボルの宣言に移動します。

• コードの行間を使用して使用箇所に移動します。

  

• ⌘ E と⌘⇧ E を使用してエラー間を移動します。

  

• package.json ファイルに移動し、start スクリプトの横にあるガターにある実行アイコンをクリックして、実行 'start' を選択します。

  アプリケーションの出力はコンソールに表示されます。

  

1. Prettier をインストールするには、組み込みのターミナル ( 表示 | ターミナル ) を開き、次のいずれかのコマンドを実行します。

   npm install --save-dev --save-exact prettier
   npm install --global prettier

   インストールオプションの詳細については、公式 Prettier Web サイト(英語)を参照してください。

2. Prettier を使用すると、ファイル全体または選択したコードフラグメントを再フォーマットできます。

   • ファイル全体を再フォーマットするには、ファイルを右クリックし、コンテキストメニューからコードの整形を選択します。

   • コードフラグメントを再フォーマットするには、コードフラグメントを選択し、コンテキストメニューからコードの整形を選択します。