なぜJavaScriptやjQueryが必要か？
webサービスやwebアプリといったものを作成するwebエンジニアにとって、プログラム言語を用いた開発には二つの種類があります。
- よりユーザーに見える位置にあるフロントエンド側
- ユーザーには見えない部分で処理を行うサーバサイド側
JavaScriptやjQueryは①のフロントエンド側の開発を行う言語になります。ユーザーに見えるページの部分ですね。
webサイトはHTMLで作成しますが、それだけだとせいぜい動きのあるページはフォームのボタンを押す、リンクをクリックで遷移するくらいになります。
ボタンを押すとページ遷移せずに詳細がポップアップしたり、画像をアップロードするとその画像のプレビューが遷移無しで表示されたり、動きのあるサイトを作るにはJavaScriptやjQueryの知識が必要になってきます。
JavaScript
というわけではじめはJavaScriptについてですが、そもそもJavaScriptは何なのかということを理解しておくと良いと思います。
ざっくり言ってしまえばJavaScriptは「HTMLの各要素に対して処理を追加できるもの」ということになるかと思います。
例えばこのリンクがクリックされたら「本当に進みますか？」というアラートを表示するといった感じです。
他にもブラウザでページが表示された実行する、ページから離脱しようとしたら実行する等、ブラウザ周りの挙動に対して処理を追加することも可能です。
JavaScriptの実例
おそらくwebサービスを作るうえで必須になってくるのはページ遷移無しで各種の処理を行うということだと思います。
- プロフィール画像を選択してアップロードをすると、その画像のプレビューが表示される
この例を普通に作ると、画像を選択した後にアップロードボタンを押して次のページに遷移し、遷移先でプレビュー画像が表示されるといった形になります。
これを同期処理と言います（同期＝ボタンを押す→画面遷移してデータが送信される（この間ユーザーは既存ページから移動し閲覧は不可）→処理が行われる→結果が表示される）
JavaScriptを利用するとアップロードボタンを押すとページは遷移させずに、裏側でデータを送信し結果を取得して現在のページに表示させるといったことが可能です。
これを非同期処理といいます（非同期＝アップロードボタンを押す→画面遷移せず裏側で処理される＝ユーザーは並列で既存のページを閲覧したままでいられる）
JavaScriptではユーザーがいちいち画面遷移せずに、非同期で色々な処理を同時並行でできる利点があります。
クリックやマウスオーバーにイベントを割り当てられる
非同期処理以外にもJavaScriptの実例として、HTMLの各要素に対しクリックやマウスオーバーされたら処理を行うというイベントの登録ができることです。
例えばスライダーの次へボタンが押されたら次のスライドに移動するといったものから、メニューボタンを押すとメニューが開くなどといったものまであらゆる処理が可能です。
webサービスを作るうえでは入力フォームのチェックや補助にJavaScriptを利用することも多いです。
- メールアドレスが必須の入力欄だとして、空欄のまま進むとエラーがポップアップして進めないなどのチェック
- 最初に都道府県を選ぶと、その都道府県の市町村が続いて動的にリストに表示され選択できる
- 郵便番号を入力すると郵便番号からある程度まで住所が自動入力される
このように入力フォームまわりでJavaScriptを利用できることはwebエンジニアになるにはほぼ必須かなと思います。
JavaScriptの勉強方法
二つのアプローチがあると思います。
- 何が出来るのかをあらかじめ勉強しておく
- やりたいことに合わせて調べて実装する
何が出来るのかをあらかじめ勉強しておく
これをやっておくと何か作らなければいけない時に、これはアレを利用すればできそうだなということがわかるようになるのでおすすめです。
勉強の仕方は評価の高いJavaScriptのリファレンス本を一冊通しでやってみることです。
数も多く途中で飽きてくると思いますので、全部実行しなくてもある程度は流し読みするだけでもOKかと思います。
どの言語にも当てはまりますが、どんなに長い文章を読むよりも、短いコードでも実際に書いて動かしてみることの方が理解しやすいです。
やりたいことに合わせて調べて実装する
すべてがすべてリファレンス本に載っているような基本的なことだけで実装できないのが実務です。
例えば非同期で画像をアップロードして、リサイズしたプレビュー用の画像のURLを取得して表示したいという場合。
「非同期 画像 アップロード」などで検索して様々な記事から学び、自分が作ろうとするサイトに合わせてカスタムするといったことが必要になるでしょう。
これは事前に勉強するというよりも、必要になったら都度調べるといった形ですね。
jQuery
続いてjQueryですが、jQueryは結局のところJavaScriptで作られたライブラリなので、結局中身はJavaScriptと同じです。
なのでJavaScriptが理解できてしまえばjQueryもほぼほぼ問題無いと考えてOKです。
jQueryの実例
jQueryにはwebで良く使うような処理がライブラリとして作成されています。
例えば音楽を再生するプレイヤーを実装したり、ファイルアップロードの際にプログレスバーを表示するようなリッチなアップローダーなどがあります。
ただHTML5でvideoタグやaudioタグが追加されたり、CSSでもアニメーションが実装できたり、jQueryを使わなくてもできるようになっていることが増えてきています。
その為、脱jQueryなんていう流れもあるようですが、まだまだ使われていますし、既存サイトのメンテなどでも必要になるので勉強しておくのは良いことです。
jQueryの勉強方法
これも入門書的な本を一冊読めばひとまずはOKかなと思います。
あとは実際にやりたいことに合わせて、それが実現できるjQueryのライブラリが無いかを調べる作業ですね。
さらに見つかったとしても自分の作るサイトに合わせてカスタマイズが必要なので、使うライブラリをカスタマイズすること自体が勉強になると思います。
実はjQueryのライブラリ使わずに他の方法でも出来るということが見つかったりもしますので、状況に合わせて一番合う方法を選んでいけばOKです。
JavaScriptやjQueryはメインではない
この二つはこれまで書いてきた通り、動きのあるリッチなサイトを作成するには必須の知識です。
しかしwebエンジニアの世界で「JavaScriptやjQueryだけが出来ます！」という人は見たことが無いし、おそらくその人は雇われません。
PHPやRubyといった言語がメインで、かつJavaScriptやjQueryも使いこなせるというのが基本スタンスかなと思います。
webエンジニアを目指すのであれば、そちらの言語の勉強をメインに頑張っていくのが良いと思います。