アフィテク

アフィ収入月10万円以下の初心者を対象に『アフィリエイトで稼ぐテクニック』を発信！

【入門】JavaScript初心者が基礎を身につける為に読むべき記事まとめ+α、JavaScript講座の紹介もあります

      2017/12/04

js-beginner-matome

ブログの記事数もだいぶ増えてきたので情報を整理するという意味でも入門向けJavaScript（JS）関連の記事をまとめてみようと思います。合わせてJavaScript初心者が基礎知識を高める為に有用なお勧めの書籍も紹介します。※現時点では当ブログの記事だけのまとめですが今後他サイトの紹介も追加する予定です。

メニュー

この記事の目次

JavaScriptプログラミングの基礎中の基礎を学び初心者を卒業しよう

js1

ここではJavaScriptの基本的文法（文の最後にはセミコロンを付ける、数値は半角で書く、文字列はダブルクォーテーションまたはシングルクォーテーションで囲うなど）をある程度理解した人に読んでもらいたい記事をまとめています。

JavaScriptの勉強を始める際まず知っておきたい３つの知識

この記事では「プログラミングに必要なツールを知りたい」「プログラムはどこに書けばいいのか？」「プログラミングをする上での基本的なルールは？」というプログラミングする以前の素朴な疑問をまとめています。

基礎を見直そう！まずは変数！【JavaScript入門】

プログラミングを学習する上で一番最初に学ぶことになるであろう「変数」はデータを格納する役割があります。適切な変数名を設定することで情報を整理するという効果もあります。この記事でプログラムのはじめの一歩を学ぼう。

プログラムを簡潔にする、関数とは？【JavaScript入門】

プログラミングの根幹部分である「関数」はうまく活用することでプログラムを非常にシンプルに書くことが可能です。初心者が最初につまづき易い部分なのでしっかりと学習しましょう。

柔軟な処理を実現！条件分岐（if文、switch文）とは？【JavaScript入門】

「条件分岐」を利用すると状況に応じて処理内容を変えることができます。ウェブサービス、スマートフォン、ゲームは利用する人や環境、進行状況に応じて振る舞いを変えますが、これは条件分岐による恩恵です。条件分岐を学習して柔軟で多彩なプログラムを書こう。

膨大な処理をサクッと処理！繰り返し（ループ）構文（while文、for文）とは？【JavaScript入門】

「ループ構文」は大量の処理を行うのに最適です。大量の処理というのはコンピュータの得意分野です。人間だと何日もかかることを一瞬でできるわけです。ループ構文を学習してコンピュータの性能を発揮させよう。

膨大なデータの管理に便利！配列とオブジェクトを学ぼう！【JavaScript入門】

「配列」や「オブジェクト」は変数の進化系です。扱うデータ量が多い場合の情報整理に役立ちます。また、ループ構文と組み合わせると抜群の効果を発揮します。

値渡しと参照渡しを知りプログラムの挙動を正しく把握しよう【JavaScript入門】

関数の引数の渡し方には「値渡し」と「参照渡し」があります。少々分かりにくい概念かもしれませんが正確に理解しないと思わぬバグが発生します。正しい知識を学ぼう。

意外と知らないJavaScriptの常識【JavaScript入門】

「サンプルをコピペしたのに何故か動かない・・・」そういうことありませんか？それはJavaScriptの常識を知らないことが原因かもしれません。意外と語られることがないテーマをまとめました。

JavaScriptを必ずCSSの後に読み込ませるべき理由とは？

JavaScriptをCSSより後に読み込ませない場合に起こる不具合を記事にしました。普段問題無くても何かの拍子に不具合が起こるものです。

オライリー「JavaScript」（通称サイ本）

上記の内容を一通り理解した後により知識を深めたい人にオススメしたいのがオライリーが出版する「JavaScirpt」です。オススメというよりJavaScriptプログラミングを仕事でやるなら読まなければならない、いわば教科書でありバイブルです。内容は高度なテクニックというよりは基礎をとにかく深く追求していくような内容となっています。少々お高い書籍ですが手元に置いておくことをオススメします。

JavaScript 第6版

jQueryの基礎を学ぶ

js2

ここではJavaScriptを扱う上では欠かせない定番ライブラリであるjQueryの記事をまとめています。クロスブラウザ対策には必須です。

jQueryの基礎中の基礎をなるべく分かり易く解説！

jQueryプログラミングの学習を始める前に身につけておきたい概念的知識です。「jQueryとは何か」を知ろう。

jQueryを使ってCSSを操作してみよう【jQuery基礎】

jQueryプログラミングで最も基本的な機能であるCSS操作についての解説です。サンプル付きで分かりやすく解説しました。

DOMを操作してHTMLを制御してみよう【jQuery基礎】

jQueryプログラミングの最も重要な部分であるDOM操作。ページ内コンテンツを自由自在に操るための一歩です。

Web制作の現場で使うjQueryデザイン入門

jQuery入門の定番書籍です。オールカラーで要点が良くまとまっていて、これで分からなければjQueryはあきらめた方がいいってくらい分かりやすく書かれています。2013年に改訂されたばかりになのでスマートフォン、HTML5、jQuery2.0といった最新トレンドにも対応しています。

Web制作の現場で使うjQueryデザイン入門改訂新版 (WEB PROFESSIONAL)

初心者卒業！中級者向け知識＆実用テクニック

js3

ここでは初心者を卒業してある程度自由にプログラミングをできる人が、より知識を深められるような記事をまとめました。なお、オライリー「JavaScript」をなんとなく理解できる程度の知識は必須となります。また、一部の記事にはjQueryの知識も必要となります。

【JavaScript】ラッパー関数を利用して簡潔で分かりやすいプログラミングをしよう

引数が多く使いにくい関数ってありますよね（JSじゃないけどWordpressのget_posts関数とか）。そんな関数をラッパー関数を用いて使いやすく改善する方法を紹介しています。初心者でも比較的分かりやすい概念だと思いますので是非覚えて活用してください。

【JavaScript】クロージャーを使って再利用しやすくメンテナンス性の高いコード書こう！

クロージャーを利用することで関数内で定義した変数の値を永続的に保持することが出来ます。JavaScriptにある程度精通してないと理解が難しい概念かも知れません。しかし、習得すればメンテナンス性に優れたコードを書けるようになりますので頑張りましょう。

JavaScriptの関数型パターンによるクラス定義を学び信頼性のあるプログラムを書こう

クロージャーを用いたクラス定義方法をまとめました。メモリ効率はあまり良くないので速度が求められるプログラムには向きませんが最も直感的で分かりやすいクラス定義方法だと思いますので、これからオブジェクト指向を学習する人やメンテナンス性重視の人にはオススメです。

【JavaScript】ヘッダーなど共通部分を外部化してメンテナンス性を高めよう

ヘッダー、フッター、グロナビなど外部化してメンテナンス性を向上させるテクニックを取り上げています。サイトのメンテナンス性が飛躍的に向上するのでオススメです。

【サンプル付】外部化したヘッダー・グロナビの現在位置をアクティブにするテクニック【自動化】

上記の記事の補足・応用編です。外部化すると各ページで同一のコードを読み込むことになるので部分的な変更が難しくなります。現在ページに対応するナビのハイライト表示などですね。その解決策をまとめました。JavaScriptに限らずPHPやSSIによるインクルードでも応用できますので是非参考にしてみてください。

jQueryプラグイン＆ツールを紹介

js4

ここでは管理人が作成したjQueryライブラリや制作の手助けになるツールを紹介します。なお、サポートはいたしませんので自己責任でご利用ください。

多機能フェードロールオーバー：jQueryCrossFadeRollOver

多機能フェードロールオーバーライブラリです。定番ロールオーバーライブラリのようにも使えますし、CSSスプライトによるフェードロールオーバーも可能です。ただレスポンシブWebデザインと相性が悪いです。また、HTMLの構造によっては正常に動かない場合もあります。

簡単フォントサイズ切り替え：jQueryFontSize

極力シンプルに、余計なファイルを読み込むことなくフォントサイズを切り替えられるjQueryプラグインです。元々配布を想定したものでは無いので作りが甘いです。

動画埋め込み：jQueryCreateVideo

超簡単に動画埋め込みが出来るjQueryプラグインです。ニコニコ動画、Youtube、Vimeo、Dailymotionを自動で判別します。現時点ではhttpsプロトコルには対応していないので、https→httpに直してご利用ください。こちらも配布を想定したものではないのでちょっと不便なところがあるかと思います。

納品ファイル作成＆不要ファイル削除：File Extractor AIR

4年ほど仕事で使用しているファイル納品時に便利なツール。AIR（JavaScript + HTML）で作成。万人向けではありませんが使う人によっては大幅に作業時間を減らせるかも知れません。詳しい活用方法はこちらで説明しています。

CSSハックや条件分岐コメントを一切使わずIE対策するスクリプト

IE向けの余計な記述を極力無くすことが出来るJavaScriptライブラリ（ってほどのものではありませんが）です。綺麗なソースコードにこだわるひとにはオススメでしょうか。

効率よく学ぶならオンラインレッスンを活用するのもあり！

js5

社会人になると勉強する時間も限られてくるので習得に時間のかかるプログラミングを独学で学習するのは難しい場合があります。また、独学だと些細な疑問も質問できなかったりするので意外と初歩でつまずくことが多いんですよね。

私がWebを勉強し始めた十数年前はまともなスクールが無かった為、独学を余儀なくされたのですがかなり遠回りしたと思っています。スクール教えてもらえば2、3ヶ月で済むことを1年以上かかりましたからね・・・ｗ

オススメするオンラインプログラミングスクールの特徴をまとめましたのでよろしければご覧ください。

おわりに

いかがでしたでしょうか。是非学習の参考にしてみてください！

 - Web制作テクニック , , ,