jQuery入門jQueryの開発エディタって何が良いの?ブラウザで使えるものを厳選マサト2019/7/162019/7/16どんな開発エディタを使うのが簡単なんだろうjQueryを使った手軽なプログラミングができるエディタって何?初心者でも簡単に利用できるエディタを知りたいjQueryでプログラミングする時にみなさんはどんな開発エディタを使っているでしょうか?最近はブラウザから直接利用できるクラウド型のエディタが普及しており、より一層気軽にプログラミングができるようになっています。初心者の方でも簡単に使いこなせて、効率よく学習やプログラミングを行うことができるエディタは一体どれが良いのでしょうか。そこで、この記事では初心者でも今日からjQueryの開発エディタに困らない方法について分かりやすく解説していきますので、ぜひ最後まで読んで理解を深めて頂ければ幸いです。一人でも多くの方がjQueryの不安を解消できれば幸いです。まとめブラウザの利用この章では、ブラウザに搭載されている開発者ツールをエディタのように使う方法について見ていきましょう。利用者の多いChromeブラウザのケースについて学んでいきます。DevToolsについてIE,Firefox,Chromeなど、主要なブラウザには開発者向けにデバッグなどを効率的に行えるツールが搭載されています。Chromeブラウザの場合であれば【メニュー】→【その他のツール】→【デベロッパーツール】を選択することで開発者向けのツールが起動します。i】キーを同時押しでも起動することができます。開発者ツールの【Console】タブに切り替えれば、コンソール上でJavaScriptを記述して実行できるようになります。Consoleタブに切り替える1行ずつエンターキーを押して実行していくワンライナータイプのエディタですが、手軽にコードを実行して試すことができるので非常に便利です。現在開いているWebページがjQueryを利用していない場合だと、一般的なJavaScriptだけしか実行することができません。開発者ツールでjQueryを利用するには、まず最初にライブラリを読み込んであげる必要があります。これはJavaScriptから動的に読み込んであげる必要があるので、簡単なプログラムを記述していくことになります。いっても、わずか3行だけの簡単なものなので安心してください。プログラムとしては次のコードを1行ずつコンソール上で記述して実行していきます。エラーメッセージなどが出なければ成功です!この3行を実行したあとは、普通にjQueryが利用できるようになっています。試しに、Webページの背景色を変更してみましょう。背景色が見事に赤くなりましたね!これで、ブラウザさえあればエディタを用意することなく、jQueryによるプログラミングができるようになりました。クラウドエディタの利用この章では、ブラウザから利用できるクラウド型のコードエディタについて見ていきましょう。いずれも無料で登録不要なので、気軽にプログラムを始められます。CodePenURL:https://codepen.io/CodePenはコードエディタと実行画面が1つになったエディタで、誰でも気軽にプログラミングを楽しめるようになっています。ユニークなのは、プロジェクトをポートフォリオのようにまとめて閲覧できる機能がある点です。ブログ機能もあるので、プログラムだけでなく記事として自分の作品を紹介することもできます。外部ライブラリの読み込みPug,SCSS,Babelなどのプリプロセッサ搭載JSFiddleURL:https://jsfiddle.net/JSFiddleはWebブラウザから手軽にプログラミングを楽しむために、かなり早い段階(2010年頃)からクラウド型のエディタを提供している人気のサービスです。独特の画面構成ですが(現在はカスタマイズ可能)、作って公開するだけでなくコラボレーション機能によって複数人で1つのコードエディタを共有できるのも大きな特徴の1つでしょう。外部ライブラリの読み込みHaml,SCSS,Babelなどのプリプロセッサ搭載PlayCodeURL:https://playcode.io/PlayCodeは手軽にプログラミングできるだけでなく、複数のファイルを作成してディレクトリ構造を作れることによる本格的なプロジェクトにも使えるWebエディタと言えます。作成したプロジェクトは専用の公開ページを作ることが可能なので、ユーザー側はごく普通のWebページとして閲覧できるという特徴があります。外部ライブラリは名称から自動的に検索して追加できる機能などもあるので便利です。外部ライブラリの読み込みPug,SCSS,Babelなどのプリプロセッサ搭載クラウドIDEの利用この章では、統合開発環境(IDE)に近い機能をブラウザから利用できる高度なエディタについて見ていきましょう。初心者でも手軽に利用できることで知られているCodeSandboxについて学んでいきます。CodeSandboxとは?URL:https://codesandbox.io/CodeSandboxはプログラミングをするうえで必要な機能はほとんど標準で揃っており、ブラウザで起動しているとは思えないくらい軽快に動作する非常に優れたコードエディタです。Sandbox】ボタンをクリックするだけで、あからじめ用意されたエディタのテンプレートを選択することができます。Nuxt.jsのようなサーバーサイドで実行するフレームワークも手軽に利用することができるのは大きな魅力でしょう。各種プリプロセッサを搭載し、デバッグやテストまで完結できるエディタになります。外部ライブラリの読み込みPug,SCSS,Babelなどのプリプロセッサ搭載GitHub連携、ファイルの読み込み・書き出しnpmモジュールのインポートデバッグ・テスト機能エディタカスタマイズPWAとしての利用も可プログラムの書き方それでは、CodeSandboxでjQueryを使ってみましょう。標準テンプレートから【Vanilla】を選択してコードエディタを起動させます。コードエディタが起動した画面Vanillaはピュアな素のJavaScriptを利用するためのテンプレートで、余計なライブラリや機能などは追加されていないのでゼロからスタートするには最適です。次にjQueryが使えるように設定しましょう。Dependency】ボタンをクリックするとさまざまなモジュールを追加できるリストが表示されます。モジュール選択画面キーワード検索で【jquery】と入力すると表示されるモジュールをクリックするだけで、自動的にインストールされます。"jquery";これで普通にjQueryが使えるようになりました。試しにh1要素のテキスト文字を変更してみましょう。World');h1要素のテキストを変更するデフォルトではdiv要素にID属性値として【app】が付与されているので、これをセレクタにしてh1要素を追加しています。これであとは通常通りにjQueryによるプログラミングが楽しめるというわけです。まとめ今回は、jQueryによるプログラミングを気軽に試せる開発エディタについて学習をしました!最後に、もう一度ポイントをおさらいしておきましょう!ブラウザに搭載されている開発者向けツールでもjQueryは使えるブラウザから直接プログラミングできるWebエディタがいくつかあるより高度なプログラミングをサポートしてくれる統合開発環境(IDE)がある上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう!TweetPocket無料でSEからWebエンジニアへ転職しませんか?侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、システムエンジニアという職業だけどコードが書けない事務作業が多くスキルがないため将来が不安スクールに通うと完全未経験者と同じスタートになるからレベルが合わないという、すでに知識があるSEならではのお悩みがあることに気づきました。弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。こちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。無料体験レッスンを予約する書いた人マサトフリーランスのIT系ライターを8年従事。侍ブログ編集部としては、これまで270記事以上の記事を執筆。Linuxを3年学習。個人プロダクトのWebメディア・アプリ作成経験あり。