PHPを勉強してwebアプリを作っていく中で、JavaScriptを避けて通るのは難しいので、PHPとJavaScriptの勉強をしなければと感じる人は多いと思います。
今回はJavaScriptとPHPの勉強方法について書いていきます。
PHPの勉強方法について
PHPの勉強方法は以前にいくつか記事を書いていますのでそちらを参考にしてください。
PHP自体の勉強はこれらの方法である程度済ませられるかと思います。
なぜJavaScriptが必要なのか？
JavaScriptの必要な部分は大きく分けて二つあります。
- サイトに動きを付ける
- 非同期通信を行う
それぞれ詳しく書いていきます。
サイトに動きを付ける
一つ目はサイトに動きをつけること。どういうことかというと例えば都道府県のリストを最初に選ぶと、次にその都道府県内の市町村のリストが現れるといったような動きのことです。
テキスト入力欄やリスト選択といったフォーム要素に限らず、JavaScriptではwebサイト内のあらゆる要素を操作することが可能です。
PHPとは関係しませんが、今のサイトでよく使われているスライダーやカルーセルといったものもJavaScriptが使われているものが多いです。
PHPでデータベースを使ったアプリをなどを作っていると、それに合わせてサイト内でユーザーの操作によって可変に動作してほしい部分が出てきます。
そこで活躍してくるのがJavaScriptというわけです。
サイトに動きを付ける勉強方法
正直勉強というよりは都度やりたいことを検索して実現方法を探っていくというパターンが現実的なのかなと思います。
JavaScript自体の基本的なことを学びたいという場合には以下の記事も参考にしてみてください。
簡単に言えばHTML内の各タグの要素にIDを設定し、そのIDをキーにその要素を取得して、その要素に対してプロパティを変更したりといった操作を行う、といったところです。
先ほどの都道府県の例でいえば、都道府県のリストにIDを振りそのIDをキーに選択された都道府県を取得。次にその都道府県内の市町村のリストを反映させるといった具合です。
もちろん市町村の方のリストにもIDを振っておき、そちらに反映させていくという作業になります。
非同期通信を行う
こちらはHTML内の要素をいじるよりも少し難易度が上がります。そもそも非同期通信とは何か？というところからですよね。
例えばショッピングサイトで商品の検索ページ。検索欄にキーワードを入力して検索ボタンを押すと検索結果のページに遷移して表示される。
という一般的な流れが同期通信となります。入力する→ボタンを押す→検索結果ページに遷移といった具合に何かが完了したら次にいくといった流れです。
一方非同期通信では検索欄へのキーワードの入力までは同じですが、検索ボタンを押すとページが遷移するわけではなく裏でJavaScriptによる送信と検索結果の取得が行われます。
なので検索ボタンを押したあとも元ページの方では他の操作ができて、取得されれば検索結果部分に結果が表示されるというわけです。
何か処理がおこなれている時にお馴染みのグルグルが表示されて待たされているものの、他部分は操作できるといった感じですね。
非同期通信を行う勉強方法
これに関してはいくつか方法があるので、非同期通信について調べて目的の方法にあうものを試してみると良いです。
少し難しいのでいきなりやるよりはJavaScriptに慣れてきてからの勉強をおすすめします。
まとめ
PHPと連携の相性が良いJavaScriptの勉強方法について書いてきました。
JavaScriptを利用するとリッチなサイトが作れます。最初は少し難しいかもしれませんが、慣れればそこまで難しい類のプログラムではないので、是非挑戦してみてください。