JavaScript
GoLand を使うことで、 JavaScript を利用して最新の Web、モバイル、デスクトップアプリケーションを開発できます。
JavaScript 対応のコーディング支援には、キーワード、ラベル、変数、パラメーター、関数の 補完、 エラーと構文ハイライト 、フォーマット、 コードインスペクションおよび クイックフィックス 、さらに 一般的および JavaScript 固有のリファクタリングが含まれます。 GoLand は JavaScript リンター や Flow 型チェッカー とも統合されます。
組み込みのデバッガーを使用すると、クライアント側とサーバー側の両方のコードをデバッグでき、 対話的なデバッガーコンソールで JavaScript コードスニペットを実行することもできます。
GoLand は Jest、 Karma、 Protractor、 Cucumber、 Mocha テストフレームワークと統合します。 GoLand は、テストの実行やデバッグ、テストとサブジェクト間、失敗したテストとその原因となったコードの断片間のナビゲーションをサポートします。
このページには、Web アプリケーションの作成からデバッグ・テストまで順を追って案内する簡単なスタートガイドがあります。
始める前に
設定で JavaScript and TypeScript プラグインが有効になっていることを確認します。 Ctrl+Alt+S を押して設定を開き、 を選択します。 インストール済み タブをクリックします。 検索フィールドに JavaScript and TypeScript と入力します。 プラグインの詳細については、 プラグインの管理を参照してください。
新しいアプリケーションを作成する
GoLand では、基本的な JavaScript プロジェクトを作成でき、最小限の構成でプロジェクトをセットアップできます。 生成されたプロジェクトには、 console.log() ウェルカムメッセージを含む package.json ファイルと index.js ファイルが含まれており、さらにサンプル Web アプリケーションを生成することもできます。
デフォルトで、GoLand は自動的に Git リポジトリを作成し、 生成されたソースを Git の管理下に置きます。
メインメニューから をクリックします。 または、ウェルカム画面で をクリックします。
左側のペインで、次のオプションのいずれかを選択します。
Bootstrap
HTML 5 ボイラープレート
React
React Native
Angular、Node.js、Vue.js のプロジェクトオプションを表示するには、対応するプラグインをインストールして有効にします。
右側のペインで、 JavaScript を選択し、プロジェクト関連ファイルが保存されるフォルダーへのパスを指定します。
サンプル Web アプリケーションを生成するには、 オンボーディングのヒントを使用して playground プロジェクトを生成する チェックボックスを選択します。 GoLand は Vite テンプレートを基にプロジェクトを作成し、スムーズなオンボーディングとなるようヒントを提供します。
作成 をクリックしてください。
既存の JavaScript アプリケーションから始める
既存の JavaScript アプリケーションを開発し続ける場合は、GoLand で開き、 使用する JavaScript バージョンを選択し、ライブラリを構成します。 オプションで、 必要な npm 依存関係をダウンロードします。
すでにマシン上にあるアプリケーションソースを開く
ようこそ 画面で 開く をクリックするか、メインメニューから を選択します。 開いたダイアログで、ソースが保存されているフォルダーを選択します。
バージョン管理からアプリケーションのソースをチェックアウト
ようこそ 画面で クローン をクリックします。
または、メインメニューから または を選択します。
メインメニューの Git の代わりに、プロジェクトに関連付けられている他のバージョン管理システムが表示される場合があります。 例： Mercurial または Perforce。
プロジェクトのセキュリティ
GoLand の外部で作成されインポートされたプロジェクトを開くと、GoLand は未知のソースコードを含むこのプロジェクトをどのように処理するか決定できるダイアログを表示します。
次のいずれかのオプションを選択します：
セーフモードでプレビュー ：この場合、GoLand はプロジェクトをプレビューモードで開きます。 これは、プロジェクトのソースを参照することはできますが、タスクやスクリプトを実行したり、プロジェクトを実行 / デバッグしたりすることはできないことを意味します。
GoLand はエディター領域の上部に通知を表示し、 プロジェクトを信頼する… リンクをクリックすることで、いつでもプロジェクトをロードできます。
プロジェクトを信頼 ：この場合、GoLand はプロジェクトを開いてロードします。 これは、プロジェクトが初期化され、プロジェクトのプラグインが解決され、依存関係が追加され、すべての GoLand の機能が利用可能になることを意味します。
開かない ：この場合、GoLand はプロジェクトを開きません。
詳しくは プロジェクトのセキュリティ をご覧ください。
JavaScript 言語バージョンを選択する
信頼性が高く効率的なコーディング支援を受けるには、プロジェクト内のすべての JavaScript ファイルでデフォルトで使用される言語バージョンを指定する必要があります。
設定 ダイアログ（Ctrl+Alt+S ）で に移動します。 JavaScript ページが開きます。
リストからサポートされている JavaScript 言語バージョンのいずれかを選択します：
ECMAScript 6 以降 (英語): このバージョンでは、ECMAScript 2015-2020 で導入された機能と JSX 構文のサポート、および標準に対するいくつかの現在の提案が追加されています。
Flow(英語): このバージョンでは、Flow 構文がサポートされています。
複数の JavaScript バージョンを使用する
ECMAScript 5.1 と新しいバージョンの ECMAScript の両方を使用するアプリケーションに取り組んでいる場合、最も簡単な方法は、 JavaScript ページ () のリストからプロジェクト全体の最も高い言語バージョンを選択することです。
JavaScript ページで、 JavaScript 言語バージョン リストの横にある
をクリックします。 JavaScript 言語バージョン ダイアログが開きます。
をクリックして表示されるダイアログで、カスタム言語バージョンが必要なフォルダーを選択します。 GoLand は パス フィールドに選択したフォルダーが表示されている JavaScript 言語バージョン ダイアログに戻ります。言語 リストから、選択したフォルダー内のファイルの言語バージョンを選択します。 プロジェクト内の他のすべての JavaScript ファイルでは、GoLand は JavaScript ページで選択されたバージョンを使用します。
JavaScript コードの JSX 構文
JavaScript コードで JSX 構文を使用している場合は、 ECMAScript 6 以降 を有効にします。
設定 ダイアログ（Ctrl+Alt+S ）で、 に移動し、 JavaScript 言語バージョン リストから ECMAScript 6 以降 を選択します。
JSX 構文が誤って使用された場合に警告されるようにするには、 設定 ダイアログ（Ctrl+Alt+S ）を開き、 に移動して、 JavaScript and TypeScript | 一般 ノードで JSX 構文の使用 インスペクションを有効にします。 検索フィールドを使用してインスペクションを見つけます。
オプションで、インスペクションの重大度とスコープを構成します。 詳細については、 コードインスペクションを参照してください。
プロジェクトの依存関係をダウンロードする
アプリケーションでツールやライブラリ、フレームワークを使用している場合は、必要なパッケージをダウンロードしてください。 プロジェクト依存関係の管理には、 npm、 Yarn 1 、または Yarn 2を使用できます。詳細は npm と Yarnを参照してください。
空のプロジェクトにパッケージをインストールする
組み込み ターミナル (Alt+F12) で次のように入力します。
npm install <package name>。
すでにプロジェクトに package.json ファイルがある場合
エディターまたは プロジェクト ツールウィンドウ（Alt+1 ）で package.json ファイルを右クリックし、コンテキストメニューから 'npm install' を実行 を選択します。
または、 ターミナル Alt+F12 で
npm installを実行します。
プロジェクトの依存関係に合わせてコード補完を構成する
プロジェクト依存関係のコード補完を提供するため、GoLand は node_modules ライブラリを自動で作成します。 言語と IDE のコンテキストでは、 ライブラリはファイルまたはファイルのセットです。 これらのファイルの関数やメソッドは、編集対象プロジェクトのコードから GoLand が取得する関数やメソッドに加えて、GoLand の内部知識として追加されます。
インレイヒントを見る
インレイヒントはエディターに表示され、コードの可読性とナビゲーション性を向上する追加情報を提供します。
型ヒント
型ヒントは、変数、フィールド、パラメーターの型を示します。 変数とフィールドの型は、その定義の横に表示されます。 パラメーターの型ヒントは関数呼び出しに表示されます。 型ヒントは JSDoc コメントやコードの静的解析から推論されます。
型ヒントを構成する
設定 ダイアログ（Ctrl+Alt+S ）を開き、 に進みます。
カテゴリのツリーで、 を展開します。
型ヒントを表示するコンテキストを指定してください。
プレビューで、設定変更がコードの見た目にどう影響するかを確認できます。
任意のコンテキストで任意の値の型のパラメーターパラメーターの型と戻り型のヒントを非表示にするには、 タイプ の JavaScript チェックボックスをオフにします。
Import ステートメントの追加
GoLand は、モジュール、クラス、コンポーネント、エクスポートされているその他のシンボル用のインポートステートメントを生成できます。 インポートステートメントは、シンボルの作成時にその場で追加することも、後からインポートツールチップ、クイックフィックス、インテンションアクションを使用して追加することもできます。 詳しくは 自動インポート をご覧ください。
GoLand は、 ES6 または CommonJS スタイル、両方のインポートステートメントを生成できます。 GoLand はインポートステートメントのスタイルを自動的に決定するか、必要なスタイルを選択できるポップアップを表示します。
GoLand がファイルで使用する構文を自動判定できない場合、ES6 構文と CommonJS 構文のいずれかを選択できるポップアップが表示されます。
コード補完に ES6 インポート文を常に自動的に追加するには、 設定 ダイアログ (Ctrl+Alt+S) を開き、 に移動して、 TypeScript/JavaScript 領域の JavaScript のインポートを自動的に追加する チェックボックスを選択します。
ES6 インポートステートメントを追加する
インポートステートメントは、シンボルの作成時にその場で追加することも、後からインポートツールチップ、クイックフィックス、インテンションアクションを使用して追加することもできます。
プロジェクトからシンボルを ES6 モジュールまたはすでに ES インポートステートメントが含まれているファイルにインポートする場合、GoLand はシンボル補完時に ES6 インポートを自動で挿入します。
未解決のシンボルにカーソルを合わせると、自動インポートのツールチップが表示され、インポート文を追加するように提案されます。
提案を受け入れるには、 Alt+Enter を押してください。
ツールチップを無効にするには、エディターの右上隅にあるインスペクションウィジェットにカーソルを合わせ、
をクリックして、 自動インポートツールチップを表示 オプションのチェックを外します。
以前の JavaScript バージョンの場合や 補完時の自動インポートが無効化されている場合、GoLand はシンボルを未解決としてマークし、エラーの説明と推奨クイックフィックスを含むポップアップを表示します：
提案を受け入れるには、 Alt+Shift+Enter を押してください。
または、 Alt+Enter を押します。
インポート可能なソースが複数ある場合、GoLand は候補のリストを表示します：
GoLand は、プロジェクトの依存関係で定義されているシンボル用のインポートステートメントも生成できます。 自動インポートは、 TypeScript 定義ファイル(英語)を含むパッケージ（moment(英語) や redux(英語) など）や ES モジュールとして記述されたソースのシンボルに対して機能します。
現在のファイルにすでに ES6 インポートステートメントが含まれている場合、GoLand は新たに ES6 スタイルのものも挿入します。
CommonJS（必須）インポートステートメントを追加する
プロジェクトからすでに require ステートメントや module.export を持つ CommonJS モジュール（ファイル）にシンボルをインポートする場合、GoLand はシンボル補完時に CommonJS インポートを自動的に挿入します。
あるいは、インポートするシンボルにキャレットを置き、 Alt+Enter を押して、CommonJS (require) インポートスタイルのクイックフィックスを選択します。
import defer ステートメントを追加する
GoLand は JavaScript コンテキストで import defer 構文をサポートし、コード補完、エラーハイライト、 インポート ステートメント向けのライブテンプレート、使用箇所検索を提供します。
import.defer 構文もサポートされています。
インポートソースステートメントを追加する
GoLand は JavaScript コンテキストで import source 構文をサポートし、コード補完、エラーハイライト、 インポート ステートメント用のライブテンプレート、使用箇所検索を提供します。
import.source 構文もサポートされています。
自動インポートを構成する
コード補完に ES6 インポート文を常に自動的に追加するには、 設定 ダイアログ (Ctrl+Alt+S) を開き、 に移動して、 TypeScript/JavaScript 領域の JavaScript のインポートを自動的に追加する チェックボックスを選択します。
インポートステートメントの外観を構成するには、 設定 ダイアログ (Ctrl+Alt+S) を開き、 に移動し、 インポート タブのコントロールを使用します。 詳細については、「インポートタブ 」を参照してください。
構文ハイライトを構成する
好みや習慣に合わせて JavaScript 対応の構文ハイライトを設定できます。
設定 ダイアログ（Ctrl+Alt+S ）で に移動します。
カラースキームを選択するか、デフォルトから継承されたハイライト設定を受け入れるか、 色とフォント で説明されているようにカスタマイズします。
コードの整形
GoLand では、現在の コードスタイルスキームに従って JavaScript コードを整形できます。
.editorconfig でフォーマット設定を指定したり、 Prettier を使うこともできます。
デコレーター
デコレータでは、再フォーマット時にそれぞれの後に改行を挿入しないようにすることが重要な場合があります。
デコレーター用には次のフォーマットオプションがあります：
折り返さない
このオプションを選択すると、装飾文字を使用して行を再フォーマットする際に、折り返しは適用されません。
長い場合は折り返す
このオプションを選択すると、行が右端を超えた場合に折り返されます。
右余白は 次でハードラップ フィールドで 設定 | エディター | コードスタイル | JavaScript | 折り返しと波括弧に定義されています。 行が指定された数値を超えると、折り返されます。
長い場合は切り捨てる
このオプションを選択すると、デコレーターが右余白を超えた場合 1 行ごとにフォーマットされます。
常に折り返す
このオプションを選択すると、すべてのデコレーターが 1 行ごとにフォーマットされます。
ブラウザーで JavaScript を実行する
エディターで、JavaScript リファレンスを使用して HTML ファイルを開きます。 この HTML ファイルは、必ずしもアプリケーションの開始ページを実装するものである必要はありません。
次のいずれかを実行します：
メインメニューから を選択するか、 Alt+F2 を押します。 次にリストから目的のブラウザーを選択します。
コードの上にカーソルを置くと、ブラウザーのアイコンバー
が表示されます。 目的のブラウザーを示すアイコンをクリックします。
JavaScript のデバッグ
GoLand は、 Chrome または Chrome ファミリーの他のブラウザーで動作するクライアントサイド JavaScript コード用の組み込みデバッガーを提供します。 GoLand を使えば、組み込みサーバー、外部サーバー、リモートサーバーで実行中の JavaScript アプリケーションをデバッグできます。 詳細については、 Chrome での JavaScript のデバッグ を参照してください。