初心者コーダーのための
HTML/CSS JavaScript PHP WordPress
難しい言葉や概念より、実践重視の入門ブログ

初心者のためのJavaScript学習ロードマップ

【JavaScript】JS学習ロードマップ 目指せ!JavaScript脱初心者!

JavaScriptに全く触れたことがない方から、JavaScript初心者までを対象に、JavaScriptの学習ロードマップを作成しました。

そもそもJavaScriptで何ができるのか?ということから、実際にウェブサイトでJavaScriptを実装するところまで幅広く対応しています。

まだまだコンテンツは少ないですが、今後も随時加筆を行なっていきます。

JavaScriptを始める前に

JavaScriptとは一体…?何からどうやって手をつけるの…?
といった方向けの記事です。

JavaScriptをさわるさわらない以前に、まずは何ができるのか、どうやって始めるのかを学んでいきましょう。

【JS入門】JavaScriptとは?そもそも一体何ができるのか【jQuery】

【JS入門】JavaScript使い方!記述位置や書き方を覚えよう!

JavaScript基礎編

ここから実際にJavaScriptをさわっていきます!
さあ!やるぞ!

まずは何よりも最初に知っておきたいこと

JavaScriptをやっていく上で、絶対に知っておかなければ死んでしまう内容です。
あまり面白い内容ではありませんが、最低限知っておかなければ先へ進めないほど、重要な記事となっています。

【JavaScript】console.log()とは

【JavaScript】 変数の使い方と使い分け【var、let、const】

【JavaScript】クォーテーションの使い分けと文字列・変数の連結方法【’と”と`】

Javascript学習本格スタート!

本格的にJavaScriptの学習に入っていきます!
ここをマスターすれば、JavaScriptは8割マスターしたと言うとさすがに過言ですが、最も基本となり、最も今後お世話になっていく内容です。

【JavaScript】関数とは?関数の解説とその使い方【関数の基本】

【JavaScript】関数リテラル、無名関数、アロー関数とは?その違いと使い方

【JavaScript】条件分岐ifの使い方

【JavaScript】配列の編集方法と出力方法

【JavaScript】for、forEach、for ofの使い方【繰り返し処理】

実際にhtml上で実装しよう!

またせたな!
ここからコーダーとして、本格的にJavaScriptを操っていきます

【JavaScript】Webサイトでイベントを発生させる【addEventListener】

【JavaScript】いろんな要素の取得方法【querySelector】

【JavaScript】要素内のテキスト取得・削除・書き換え【textContent、innerHTML】

【JavaScript】クラスやスタイル属性の付与と削除【classList、style】

【JavaScript】タグの生成とHTMLへの出力【あと削除も】

少しだけステップアップ

【JavaScript】コールバック関数とは?一体いつ使うのか?

【JavaScript】confirmで確認用ポップアップを表示する方法【ダイアログ】

【JavaScript】alertで警告ポップアップを表示する方法【ダイアログ】

【JavaScript】ランダムで値を取得する方法【乱数の取得】

【JavaScript】スクロール量や特定の要素までの距離の取得方法【要素のサイズも】

【JavaScript】一定時間毎や一定時間後にイベントを発火させる方法

【JavaScript】ブレイクポイントを設置しイベントをレスポンシブ対応させる方法【resize】

なんかそんなに使わないけどとっても大事なこと

【JavaScript】データ型一覧とその確認方法

【JavaScript】while、do whileの使い方【繰り返し処理】

【JavaScript】条件分岐switchの使い方

使う時にだけ見ればいいもの

【JavaScript】特定のクラスの有無を判定する方法【classList】

【JavaScript】1文字ずつspanタグで囲む方法【reduceの使い方】

JavaScript実践編

【JavaScript】スクロールで出現するアニメーションの実装方法【IntersectionObserver】

【JavaScript】ページ最上部へ戻るスクロールトップボタン実装方法

【JavaScript】スクロールで追従してくるスティッキーヘッダーの実装方法