jqueryで出来ること(webサイトの仕掛け)をJavaScriptで書く為の勉強方法

Question

JavaScriptでwebサイトの仕掛けを作るという技術をどうやって勉強すればいいか、教えて頂きたいです。

web制作会社に勤め始めた駆け出しのコーダーです。

今までjqueryを勉強し、webサイトのモーダルや開閉するヘッダーメニュー等をいろいろ作ってきました。

しかし今勤めている会社ではそういったものはjqueryを使わず、JavaScriptで書くそうです。

JavaScriptの基礎はprogateで学んだのですが、かなり基礎的な部分になりますので
JavaScriptでwebサイトの仕掛けをどうやって作ればいいかよくわかりません。

そこでそういった技術を学びたいのですが、何をどう勉強すればわからず、困っている状況です。

javascriptでwebサイトの仕掛けを作るための技術を勉強するための何か良い参考書や参考サイト、
方法をご存知でしたら教えて頂けないでしょうか。
何卒よろしくお願い致します。

Answer 1

下記のようなプラグラミング学習サイトにいくつか作り方が載っています。
それか「ハンバーガーメニュー　javascript」等のUIパーツ名で検索するとqiitaや個人・企業のブログ等で作り方が沢山ヒットすると思います。

参考：
ドットインストール
https://dotinstall.com/search?q=javascript&f=topbar
CODEPREP
https://codeprep.jp/books?tags=JavaScript&sortBy=createdAt&keyword=

ただ、そもそもUIパーツを作るDOM操作に関しては基本的には同じだと思います。

そのため、例えば何かクラスの付け外しをして表示を切り替える処理は

$(element).click(function() {
  $(this).toggleClass(class);
});

が、

document.querySelector(element).addEventListener('click', e => {
  e.target.classList.toggle(class);
}); //※要素の取得方法は様々

になる。
といった具合に、ご自身が以前にjQueryで作られたものを題材に、
そこでjQueryでやっている事（ここで言う要素の取得とclassのtoggle）を、ネイティブではどう書くのかを調べてネイティブに書き直してみる、といった方法をやられてみるのが良い気がします。

私も人にアドバイスが出来るような身分ではないですが、自分がJavaScriptのライブラリを学習する際に同じものを題材にして学習するやり方が分かり易かった憶えがあるので、何か参考になれば幸いです。

Comments

[kakedashi07]

ご回答ありがとうございます！
返信遅れてすみません。
色々と調べ方や資料を教えて頂いてとてもありがたいです。
確かに検索でも調べてみると色々出てくるのですね。

Takuさんがおっしゃるように、まずは自分が作ったjqueryをJavaScriptに変換する練習をしていこうと思います。とても参考になりました。

Answer 2

以下の2箇所を見るとだいたいやりたいことは移行できると思います。

ライブラリを使わない素のJavaScriptでDOM操作
たまにはjQueryに頼るのをやめてみる

あとは ajax()かなぁ。。。

Comments

[kakedashi07]

ご回答ありがとうございます！
返信遅れてすみません。
とても参考になるサイトを教えて頂いてありがとうございます！
勉強させていただきます。

Answer 3

$('#hoge')=document.getElementById('hoge')のようにjQueryとJSは大体1対1になっています。
たまに(言い方悪いですが)jQueryアレルギーの方もいらっしゃいますのでjQueryがJSだとどう書けるかを覚えることは必須です。（それ以外の理由もあります）

結論

jQueryは使いこなせるようなのでjQueryとJSの対応を覚えると良いかと

Comments

[kakedashi07]

ご回答ありがとうございます！
返信遅れてすみません。
仰る通りjQueryがJSだとどう書けるかをまずは勉強していこうと思います。ありがとうございます。

[kyoya0819]

頑張ってください。