|
「Web制作を始めたい」 「JQueryも勉強しないといけないらしい」 「ドットインストールという学習サイトで無料で始められるらしい」 |
今やWeb制作は人気の職業なので始めてみようと思う人が増えています。
ドットインストールという学習サイトも知られるようになり、気になる人も多いでしょう。
Web初心者がJQuery入門をやってみた感想です。
以下「JavaScript（無料）」の続きです。
JQuery入門
ドットインストールのレッスン一覧からドットインストールが提供する学習コースの一覧が見れます。
コース詳細はいずれまとめ記事に書くとして、無料で受けられる以下を受けてみました。
- JQuery入門
レッスン内容
レッスンは動画です。
動画で解説されている通りに自分のPC環境でマネして学ぶスタイルです。
ドットインストールの特徴をまとめるとこんな感じです。
（利点）
- 開発環境の設定から実際現場で使用する開発環境で学習できる
- 動画の解説通りにマネすることで学習できる
- 1レッスンの動画の長さは平均2分と短いので集中できる。
- 他のユーザーの「質問と回答」を見れる
- レッスンに必要な素材は提供されている
- 分からないことを質問できる（有料）
初心者にやさしい学習サイトです。
学習した項目は一覧で確認できます。
レッスンを完了したら手動で「完了」に設定します。
無料のJQuery入門のレッスンの以下ですが、Web制作”は”ほぼ初心者の僕がこのコースにかかった時間は2時間です。
動画は合計50分ほどありますが、動画の説明が分かりやすいので、他のプログラミング言語経験者はコードを入力しなくても理解できます。
JQuery入門のレッスンでできることは以下までです。
（処理）
- ボタンをクリックすると、テキストボックスの内容を取得
- 文字列に文字列の長さを加える
- htmlメソッドでp要素を書き換えて表示
この一連の流れでphp、Ajaxも少し使います。
なお、JQueryのレッスンはこのJQuery入門のみです。（2020年6月）
レッスン内容 ポイント
最初のレッスンはJQueryについての説明です。
「JQueryとは何か？」と必要な知識等の説明です。
HTML、CSS、JavaScriptの知識が必要ですが、それらの基礎知識があればこのJQuery入門のレッスンもだいたい理解できます。
最初にJQueryのコードの書き方の説明があって親切です。
この例だと、
- “p”の要素に対して以下処理を行う
- cssの”color”を”red”に変更する処理
- 徐々に消える処理
- メソッド（処理）を複数まとめて一行で記述できる
といったことがJQueryを学ぶ前に分かります。
レッスンの進め方はHTML、JavaScriptと同様に、
VS CodeでJavaScriptのコードを入力し、
Google ChromeでJavaScriptの動作を確認します。
レッスンはJQueryの構文で、こちらから確認できます。
レッスンの流れは基本的に以下手順です。
- htmlのDOM（htmlを構成する要素。p, div, ul等）にidやクラス名を付ける
- 名前を付けたDOMに対してJQueryの中で処理する
- DOMを$(‘○○’)で指定し、メッソドを記述する
- 記述した通りに処理されていることを確認する。特定のDOMの色が変わったり、徐々に消えたりといった処理
$(‘○○’)で指定するDOMですが、クラス名とid名でそれぞれ次のように指定します。
（例）test
| class | $(‘.test’) |
| id | $(‘#test’) |
レッスン最後の方はAjaxを使いますが、「Ajaxとはなにか？」から説明があるのでそれが理解できればだいたい分かります。
コールバック関数
Ajaxの章で非同期処理とコールバック関数について説明があります。
この間違った記述例の説明で「loadメソッドが非同期のコールバック関数だから」とあります。
要は、loadメソッドをこのコードの裏で実行するのですが、その処理結果を待たずにcssメソッドを実行しているのでうまく動作しない、ということです。
なので、「loadメソッドが完了するまで待つ」ようにコードを修正します。
cssメソッドをloadメソッドの中に入れて、loadメソッドの処理が完了したらそのcssメソッドを実行する、と修正しています。
サーバーとデータをやり取りする際は必須ですね。
感想 JQuery入門
初心者にやさしい学習サイトです。
初心者でも一人でドットインストールでJQueryを勉強できます。
ただ、途中細かい説明を省略している部分もあります。
例えば、thisは他の言語経験者なら説明不要ですが、プログラミング初めての人には分かりづらいかもしれません。
もしこれでも難しいと感じる人は超初心者向けの学習サイト、Progateで始めるのがいいでしょう。
なお、プログラミングの勉強全般に言えることですが、この講座で出てきた命令を丸覚えする必要はないです。
ある処理を行うのにどういった命令を使えば良いかが分かればよくて、書き方はその命令でググればいいです。
「#15 onメソッドを使ってみよう」の章の説明にしても、丸覚えする必要はないです。
「clickのonメソッドを使う」と「onメソッドが必要な理由」が分かればよいです。
ドットインストールではレッスン内容の分からない点を質問できるので、疑問点は質問して理解を深めるといいです。
なお、Web制作でAdobe製品（XD、Dreamweaver、Adobe Photoshop、Illustratorなど）を使う場合はAdobe Creative Cloudが必要です。
社会人やAdobeオンライン講座を受けたい場合はヒューマンアカデミーから購入するとお得です。
