5歳でも分かる、JavaScriptをどこまで学べば良いかの学習ロードマップ

ABOUTこの記事をかいた人

フロントエンドエンジニア。

こんにちは。最近色々な方から、プログラミング、特にweb制作の領域を独学する上で「HTML/CSSはやったけど、これから何をどこまで学習したらいいか分からない」という質問を受けることが多くなりました。

そこで、僕が思う「何をどこまでできれば良いか」をシリーズで連載していこうと思います。なるべく初心者に分かりやすいよう丁寧に書いていきます。

HTML/CSSの次は、JavaScriptを絡めていくつかのパーツを作れたらある程度案件に対応できる

「何をどこまでやるべきか」という話ですが、LPやサイト制作の案件目線で考えた時には目次でリストアップしたパーツがきちんと作れれば概ね大丈夫だと考えています(他にこれも追加すべき!というご意見ありましたらぜひください)。

JavaScriptと言ってもjQueryでいいですし、Vue.jsを使っても構いません。もちろん生でもいいです。

というわけで、ここからは各パーツの軽い紹介と記事をまとめていきます。

ハンバーガーメニュー

よくページの上部にある、ボタンを押すとメニューが開閉する要素です。

記事はこちらから。

【徹底解説】5歳でも分かる、ハンバーガーメニューの作り方(jQuery編)

2021年10月20日

スライドショー

中の要素がスライドするように動くパーツです。

記事はこちらから。

【徹底解説】5歳でも分かる、スライドショーの作り方

2021年10月15日

タブメニュー

いくつかのタブを切り替えることでコンテンツも合わせて切り替わるようなメニューです。

記事はこちらから。

【徹底解説】5歳でも分かる、タブメニューの作り方(jQuery編)

2021年10月20日

モーダルウィンドウ

モーダルウィンドウは、元の画面の上に別枠で表示されるウィンドウです。

記事はこちらから。

【徹底解説】5歳でも分かる、モーダルウィンドウの作り方(jQuery編)

2021年10月20日

ドロップダウンメニュー

各メニューにマウスオーバーすると、さらにメニューの項目が表示されるような要素です。実はJavaScriptを使わずに実装することができます。

記事はこちらから。

【徹底解説】5歳でも分かる、ドロップダウンメニューの作り方

2021年10月20日

スクロールアニメーション

スクロールに合わせてセクション要素をアニメーションさせつつ出現させます。

記事はこちらから。

【徹底解説】5歳でも分かる、スクロールアニメーションの作り方(jQuery編)

2021年10月20日

スムーススクロール

ページ内リンクなど、通常のスクロール以外でスクロールが発生する際の動きを滑らかにします。

記事はこちらから。

【徹底解説】5歳でも分かる、スムーススクロールの作り方(jQuery編)

2021年10月20日

アコーディオンメニュー

項目をクリックすると、各サブメニューが開閉するようなメニューです。

記事はこちらから。

【徹底解説】5歳でも分かる、アコーディオンメニューの作り方(jQuery編)

2021年10月20日

まとめ

というわけでそれぞれのパーツの紹介と解説でした。もちろん実際に案件に関わってみると今回紹介したもの以上に多くのことを要求されると思います。

しかし、初学者から無限に勉強すればいいわけではないですし、逆に勉強だけしていてもたどり着けないものが仕事の中にたくさんあります。

「その仕事にたどり着くために最低限必要なもの」という目線で今回紹介しました。

皆様の参考になれば幸いです。

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください