blog本ブログの内容は個人の意見です。所属組織の公式見解ではありませんのであしからず。この広告は、90日以上更新していないブログに表示しています。Codeではない)でやるのもいいかもという話です。高機能エディタを使ってコーディングするというスタイルが一般的かなと思います。自分もそのようにやっています。完成度高いなと使っていて思います。(当然ながらWindowsでしか動きませんし、非力なマシンだと動作が重いのがデメリットではあります。メリットを活かして、npmのエコシステムをなるべくGUIで簡単に扱う方法はないかなと探していたところ、まさにぴったりな方法があったので、使い方や所感などを書いていきたいと思います。インストールするだけです。プロジェクトを作成します。Installerを入れたことで使えるようになった機能です)。ダイアログが表示されるので、左のドロップダウンリストから"npm"を選択します。次に、インストールしたいパッケージ名を真ん中のテキストボックスに入力します。インストールしてみようと"jq"まで打ち込んだ瞬間、"jquery"にオートコンプリートされました。コマンドが生成されます。太字で表示されている部分はコマンドオプションで編集が可能です。書き込むオプションなので、「--save」に変更します。このテキストボックスでは検索もでき、キーワードにマッチしたパッケージがドロップダウンリストから選択できるようになっています。キーワードで検索しておかなければいけないので、それと比べるとかなりお手軽です!さらに、右のドロップダウンからバージョンを選択します。ボタンをクリックします。ファイルが追加されていることがわかります。作っておかなければいけないのですが、このツールを使えばパッケージインストールと同時に勝手に作ってくれるのですごく楽です。先ほどの要領でインストールしてみます。"lo"と入力した途端"lodash"にオートコンプリートされ、バージョン情報も自動で取得してきてくれたものの中から選択できました。ボタンをクリックしてインストールします。はい、追加されました。簡単ですね!※なお、複数のパッケージを同時にインストールすることもできます。その場合はスペースで区切ってテキストボックスに入力します。こんな感じになりました。編集しているのですが、なんと、インテリセンスが効きます。パッケージ名も、バージョンも。こんなことできたらいいなと思っていたことが実現されていて驚愕しました。編集した場合は、そのままではインストールされないので、後述のパッケージの復元の操作を行うことでインストールできます。あれば簡単に復元することができます。フォルダをまるごと削除してパッケージがインストールされていない状態にします。インストールされていることが分かります。最後に、インストールしたnpmパッケージの参照方法についてです。そのまま参照することができます。パッケージをインストールするのがかなり楽になりました。場合はプロジェクトフォルダ内で閉じているので気にしなくてよかったり、やっぱりGUIで操作できるのは大きいです。編集でもインテリセンスが効くという凄さ。行うメリットがあるように感じます。全て完結するので、理想的な開発環境だと言えそうです。今回はパッケージのインストールについてしか言及しませんでしたが、最近のフロントエンド開発ではほとんどの場合ビルドが必要になり、このビルド環境を構築するのが難しかったりします。次回はビルドについて書いてみようと思います。月別アーカイブはてなブログをはじめよう!tkiryuさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。