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

JavaScript

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

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

10/02追記

本シリーズはjQueryで解説をしておりますが、今後は基本的にVanilla JSなど別の方法で実装した方がベターかと思われます。→参考:https://itokoba.com/archives/4765

10/4追記
jQueryからVanilla JSに移行する際の手助けになるような情報をまとめた本をzennさんで出しました。ぜひお買い求めください。

【徹底解説】JavaScriptをどこまで学べば良いかの学習ロードマップ + 頻出UIパーツの作り方8選
Web制作の領域を独学する上で「HTML/CSSはやったけど、これから何をどこまで学習したらいいか分からない」という疑問は、多くの方が持っているように思います。 技術的に次に学ぶべきはJavaScriptだと思います。しかしこれも「じゃあJavaScriptはどこまでやれば良い


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

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

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

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

ハンバーガーメニュー

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

記事はこちらから。

スライドショー

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

記事はこちらから。

タブメニュー

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

記事はこちらから。

モーダルウィンドウ

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

記事はこちらから。

ドロップダウンメニュー

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

記事はこちらから。

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

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

記事はこちらから。

スムーススクロール

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

記事はこちらから。

アコーディオンメニュー

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

記事はこちらから。

まとめ

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

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

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

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

より詳しいロードマップはこちらから

別の記事にて、web制作全体の学習ロードマップをまとめております。是非ご覧ください。

学習ロードマップ
こちらのロードマップは、皆さんの学習の手助けになるよう制作しています。 このロードマップや各種記事は、新しい情報を取り入れたり、よりわかりやすい内容になるよう常に改善をしていきますので、ぜひブックマークお願いします。 まずはどんな状態を目指して学んでいくかを明確にしておきましょう。 目標を明確に意識しておかないと、学習...

コメント

タイトルとURLをコピーしました