macoblog

「ゲーム × プログラミング」で生きていく

MMORPGに人生捧げてみ?

javascriptが難しい人はjQueryから入るべき【勉強方法公開】

JavaScript プログラミング

「javascriptってよくわからない」「書き方が複雑でいまいちピンとこない」その気持ちわかります。

本記事ではjsが難しい人にはjQueryをオススメする理由を、勉強方法を公開しながら解説しています。

まず最初に、javascriptが難しいと感じたなら一旦そこでストップしましょう。

「なぜ難しいのか」「なぜ出来ないのか」を考え乗り越える事も大切ですが挫折してしまったら元も子もありません。

これは無理だと思ったらならそこでやめた方がいいと私は思います。

そんな時にオススメしたいのがjQuery

いやjsが難しいと感じたならjQueryはもっと無理でしょ。笑

これよく聞きます、「jsで基礎を固めてからjQueryを勉強する」「jQueryはjsの基本が出来てから」

javascriptを勉強していくといつの間にか上記のような思考になるんですよね、不思議です。

これについて初心者にもわかりやすいよう解説します。

スポンサードサーチ


javascriptとjQueryは別言語として考える【やりやすい】

javascriptとjQueryは別言語として考える【やりやすい】

javascriptとjQueryは別言語として考えましょう、「jsが出来ないとjQueryは出来ない?」そんなことはありませんし、その逆も然りです。

「jQueryはjavascriptライブラリであって、その基本となるjavascr・・・」

そういう細かいことについては忘れましょう!そこに価値はありません、後からでいいです。

javascriptとjQueryの大きな違いは2つ

  • 構文が大きく異なる
  • 実際に現場でよく使われるのはjQuery

それぞれ簡単に解説しますね。

構文が大きく異なる【初心者にこそjQuery】

javascriptの基本をドットインストールで学んでからjQueryに取り組めばすぐに理解できるのか?

答えはNOです。

なぜなら構文が大きく変わるから、おそらく$()});がたくさん出てきてだいたいの人は「?」です、javascriptと雰囲気が違って見えると思います。

ですので、javascriptとjQueryは最初から別言語として考えた方がいいんです。

下手にjsの知識があるとかえって逆効果、なんでもかんでもjs構文と比べたりしていませんか?。

実際に現場でよく使われるのはjQuery【現実です】

ぶっちゃけ現場でよく使うのはjQueryなんで(;^ω^)

javascriptが使えたとしてもjQueryは触ったことないじゃ理解してもらえないし、雇ってもらえないですよ。

それだけjQueryでなんでもかんでもやる時代ってことです、どうせ勉強するならよく使う方を勉強した方がいいじゃないですか。

javascriptはその後でOK。

他にもたくさんありますが、この2つは理解しておきましょう。

jQueryについて教えて【簡単です】

jQueryの勉強の仕方教えて【簡単です】

jQueryは初心者の方でも簡単に理解することが可能です。

凝った事は慣れてから、難しい用語は後回し。

jQueryの最大の特徴は、「プログラミング勉強の王道を行くことができる」ということ。

プログラミング勉強の王道とは、実際にコードを書いて動かし、楽しく効率よく学ぶこと

jQueryは少ない記述で動かす事が可能です、実際に動作している事を確認しながら学ぶ事ができるんです。

jQuery勉強のポイントは3つ

  • HTML/CSSの基本理解
  • jQueryの基本となる型を知る
  • デベロッパーツール

これについて簡単に解説します。

HTML/CSSの基本理解【必須】

これに関してはドットインストールで基本を学ぶだけでOKです。

タグの意味やセレクタを理解していれば特に問題ありません。

逆に言えばここを理解していないとjQueryを使えません。

そもそもHTML/CSSが難しいと思った方はプログラミング自体諦めた方がいいです、そんな人はいないと思いますが。笑

jQueryの基本となる型を知る【テンプレートとして覚える】

実際にどうやってjQueryを使えばいい?って話なんですが、

細かい事より定番の型を覚えた方がいいです、下記がそのコードになります。

$('ここに要素').〇〇();

これが基本型です

何に対して、何をするか?

初心者の方にもわかりやすいように説明しますね。

「ここに要素」の部分に要素名やセレクタを指定します【’何に対して’の部分】

下記のような感じです。

// セレクタで指定(class="title"であれば)
$('.title').〇〇();

// 要素名で指定(h1タグであれば)
$('h1').〇〇();

「title」クラスを振っている要素に対して、h1要素に対してという感じですね。

「.〇〇()」の部分に処理を書く【’何をするか’の部分】

処理はたくさんあります、わかりやすい例を出しますね。

// スタイル「color: red;」を適用させる
$('.title').css('color','red');

// スタイル「color: blue;」を適用させる
$('h1').css('color','blue');

CSSを適用させる処理ですね、実行すれば色が変わります。

「何に対して、何をするか?」、上記であれば「h1.titleの要素に対して、色を変える(赤,青)」ですね。

これを基本型として覚えておいて、対象の要素を当てはめて、最後に処理を記述し実行するだけで動作します。

簡単ですね。

デベロッパーツール【超重要】

デベロッパーツールは使っていますか?

デベロッパーツールはHTML/CSSを学ぶ時点で使い始めたほうがいいです、なぜなら

デベロッパーツールを知る = js/jQueryを知る

デベロッパーツールが使えるということはjs/jQueryを学ぶ上でかなり役立ちます、というか使えないといろいろ大変です。

あまり使ったことがないという方はこの機会に覚えましょう。

jQueryの基本型を理解した上で実際にコードを実行してみます。

デベロッパーツールのコンソールからコードを実行してみる

windowsユーザーの方はF12キーを押して、Cosoleタブをクリックすればコンソール画面まで行けます。

javascriptコンソール画面の開き方

Macユーザーの方はCommand+Option+Jになります。

コンソールの使い方は簡単です、テストしたいサイト(何でもOK)でコンソール画面を開きます。

コンソールに処理を記述しEnterで実行するだけです。

コンソールにコードを記述し実行する

いろいろ試してみてください。

コードは正しいはずなのにエラーが出る

「実行するとエラーが出てしまう、コードは問題ないのに」

コードに間違いがないのにエラーが出る場合は大きく2つ考えられます。

  • jQueryが使用できないサイト
  • WordPressで構築されたサイト

だいたいこの2つです。

jQueryが使用できないサイト

これは古いサイトやシンプルなサイトにありがち。

本記事では触れていませんが、jQueryを使用するにはライブラリを読み込ませる必要があります。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

だいたいのサイトがhead内に上記のコードを記述しているので問題ないのですが、

この記述がないサイト、つまりはjQueryを使用していないサイトではコンソールからテストする事ができません。

対処策としては、jQueryを使えるようにすればOKです、これについてはデベロッパーツールでjQueryが使えない時はこれ【コピペOK】で詳しく解説しています。

WordPressで構築されたサイト

この「Macoblog」がまさにそうなんですが、WordPressで構築されているのでコンソールからjQueryを実行するとエラーが出ます。

さきほどと違ってjQuery自体は使えるのですが、書き方が少々異なります、これに関してはWordPressでjQueryが動かない時【簡単に解決】に詳しく解説しています。

スポンサードサーチ


jQueryの勉強方法【初心者向け】

jQueryの勉強方法【初心者向け】

私がjQueryを学ぶ際に取った手順を教えますね。

jQuery勉強手順【3ステップ】

  1. 基本型に慣れる
  2. イベントを使ってみる
  3. 応用する

それぞれ解説します。

ステップ1:基本型に慣れる

前述した基本型を徹底して覚えます、自然と書けるようになればOK。

いろいろな処理を試してみましょう。

  • 文字色を変えたり、消してみたり
  • テキストを変更したり、追加したり
  • クラスを追加したり、削除したり
  • フェードインやフェードアウトさせたり

挙げるときりがないくらいたくさんあります、「何に対して、何をするか?」考えてみてください。

ちなみに、今挙げたものは全て基本型の1行で実行可能です、jQueryが簡単と言われるのはこの部分かもしれませんね。

ステップ2:イベントを使ってみる

基本型を慣らして何ができるか(処理)を理解したら、イベントを使ってみます。

イベントはたくさんあり、「クリック」「チェンジ」他にもたくさんあります。

クリックした時に色を変更する、値が変わったときにクラスを付与するなどいろいろ考えられると思います。

こに関しては下記が参考になるかと。

コツはなるべくシンプルなイベントを使って取り組むこと、クリックイベントはシンプルですが需要はかなりあるのでオススメ。

ステップ3:応用する

ここまでくればjQuery初心者ではないですね、実際の実務で使えるレベルも中にはあると思います。

ここでやっとjavascriptが活きてきます、といってもif文とかのレベルですけど。笑

以下を参考にして応用パターンを身に付けましょう。

これくらいであれば普通にできると思います。

もっと上位の事を学びたいという事であれば、下記がオススメです。

ここで数をこなし慣れてくると応用も簡単と思えてくるはずです、そこからはプロトタイプだったりオブジェクト指向プログラミングを意識して勉強すればOKです。

終わりに

本記事の内容を簡単にまとめました。

下記になります。

  • jQueryはjavascriptより簡単
  • jQueryを理解した方が就職にも役立つ
  • 勉強方法は3ステップでjQuery中級者

プログラミングはまず動かしてみることが大事でありjQueryが最適です。

1行で処理を書けるのは初心者にとっても魅力であり、とっつきやすいので私は勉強するならjavascriptよりjQueryをオススメします。

以上になります。

Twitterでも情報や経過を発信していますのでフォローよろしくお願いします。

不明点やアドバイスなどありましたら、コメントかTwitterからお願いします。