jQueryのおすすめの開発環境・ツールはありますでしょうか。

フリーランスエンジニアをしています。
AWS講師案件でjQueryを使ったアプリ開発指導を行う必要が出てきました。
そこで、jQuery開発におけるおすすめの開発環境やツールについて教えていただきたいです。

MacやWindowsなど環境によってバージョン差異があると面倒なので、クラウドエディタを使いたいと思っています。
検索するとCodePenやJSFiddleが出てくるのですが、どれが使いやすいのでしょうか。
良い点や悪い点についても教えて頂きたいです。
以上、宜しくお願い致します。
1年前
view数 95

    回答を投稿して企業にアピールしましょう！

    Q&Aで投稿された回答は、
    企業側に表示されるプロフィールにも投稿履歴として表示されます。

    Offersにログイン・新規登録して、気になるテーマやトピックを話してみよう！

    簡単1分登録(無料) ログインする

    ＼回答があります！／

    • 小川 純平

      エンジニア

      1年前

      jQuery は最近はだんだん使われなくなってきていますので、JavaScript 一般としてお答えしますと、私の観測範囲では、Web エディターだと最近は Stackblitz を使っている人が多いです。(※) CodePen もそれなりに使われています。JSFiddle は、使っているところもあるような気はするのですが、私の観測範囲だとあまり頻繁には目にしないですね。
      勿論、使っている人が多い == 優れている、とは限りませんし、またあくまで私の観測範囲での、感覚的な流行度に過ぎませんが。

      Stackblitz が流行っているのは、CLI を使えるからではないかと推測しています。
      最近のモダンなフロントエンド開発ではビルド (≒コンパイル) が必要になることが殆どで、ビルドコマンドやローカルサーバーの起動は CLI で実行するためです。

      一方、今回は jQuery とのことですので、多分ビルドは必要ないと思います。Next.js や Nuxt、React や Vue のようなモダンなフロントエンドフレームワークや、Vite や Webpack のようなバンドラーは使いませんよね?
      それであれば、CLI は恐らく必要ないと思いますので、必ずしも Stackblitz である必要はありません。
      CodePen のほうがシンプルでわかりやすいので、そちらの方が向いている可能性もありますが、CodePen は実際の HTML/CSS/JS とはやや乖離があるので、少し教えづらさがあるような気もしています。

      以下に、今回の状況にあてはまるであろう、両者のメリット・デメリットを列挙します。

      Stackblitz のメリット:

      - 一般的なフォルダーツリーが画面左に示されており、実際にローカル環境で開発する時の状況に近い
      - 実際の開発と同様、<script> や <link rel="stylesheet"> などの JS/CSS 呼び出しタグを書く必要があるので、それらが必要なことを受講者に教えやすい
      - CLI が使える == バンドラーやフロントエンドフレームワークが使える (今回は多分不要)

      Stackblitz のデメリット:

      - ローカルサーバーの起動コマンドを、予め package.json に記述しておく必要がある
         - エディターを開いた時に、`npm install && npm run dev` が自動的に実行されるようになっているので、それでローカルサーバーが起動するようにしておく必要があります
      - エラーなどでローカルサーバーが意図せず止まることがあるので、その対応コストがかかる可能性がある

      CodePen のメリット:

      - ローカルサーバー立ち上げコマンドなどを実行する必要はない。サーバーが意図せず止まることもまずない。

      CodePen のデメリット:

      - フォルダーツリーがなく、実際にローカル環境で開発する際にどのようにファイルを配置すればよいのかを学びづらい可能性がある
      - <script> や <link rel="stylesheet">  などの JS/CSS 呼び出しタグを書かなくても動作するので、実際の開発の際はこれらのタグを書く必要があることを教えづらい
      - CLI が使えない == バンドラーや一部のフロントエンドフレームワークが使えない (今回は多分不要)

      Visual Studio Code などのインストール型エディターであれば、CodePen を使った場合の実際の開発環境との乖離の問題はないですし、Stackblitz のようにローカルサーバーを立ち上げなくてもダブルクリックで HTML をブラウザーで表示することができますので、検討しても良いかもしれません。最悪メモ帳でも書けますし。

      何かしら参考になれば幸いです。

      ※Stackblitz がよく使われているのは、オープンソースのライブラリーなどのバグ報告時に、再現環境 (いわゆる "repro") を開発者に伝える用途でです。実際の開発の際によく使われているわけではありません。
      例: https://github.com/nuxt-modules/i18n/issues/2132
      CodePen はサンプルコードの公開によく使われている印象です。こちらも、実際の開発に使っている人はほとんどいないと思います。
      今回は多分フロントエンドエンジニアのような、フロントエンドや JS/TS をガッツリやる必要があるコースではないと思いますので、それでも問題はないと思いますが、もしフロントエンドエンジニアを目指すコースであるならば、環境構築ができないと困りますので、少なくともどこかのタイミングで、Visual Studio Code などの一般的に開発で使われているエディターに切り替えたほうが良いと思います。       （編集済み）
      view数 27