つばさのーと

つばさの日常を綴るのーと

まずは無料で。JavaScript初学者の方におすすめの入門サイトをご紹介

f:id:tsubasa123:20161212115547j:plain

 

こんにちは、つばさ(@tsubasa123)です。

 

最近お世話になっている方がプログラミングの勉強を検討されているようです。

 

その方はブログもやっているので、ブログのカスタマイズにも使えて、サーバの設定が不要で比較的導入障壁の低いJavaScriptという言語をおすすめしました。

 

JavaScriptは大人気

 

ここ数年、JavaScriptはかなりのスピードで人気を伸ばしてきました。どんどん新しい技術が導入されており、とても便利で使いやすいものに進化しています。「JavaScript」で検索すると山ほどの情報を目にすることができます。

 

JavaScriptはとても良い言語だと思うのですが、ここ数年の技術進歩が速すぎる、そして導入しやすいがゆえに有用な情報が古い情報や間違った情報に埋もれてしまっている状態です。正直、私も追いつけていません。1年前の技術がオワコンとかしんどいよ。

 

とはいえ、初学者の方が学ぶことはそこまで変わっていないと思いますので、まずは無料で、インターネットでJavaScriptを学ぶのにおすすめなサイトをいくつかピックアップしました。これだけ覚えれば簡単なブログのカスタマイズくらいなら余裕です。勉強がんばってくださいね!

 

超絶初心者のためのフロント入門(HTML、CSSJavaScript

 

qiita.com

 

まずはこちらでざっくりと技術的な部分を理解してください。WEBアプリケーションの開発にどんな技術が必要なのか、技術的にどんな切り分けがあるのかがぼんやり見えてくればOKです。

 

最後にJavaScriptの記述例が載っていますので、説明通りにコピペしてファイルに保存し、ブラウザから実行してみると初めてのプログラミング体験ができると思います。記述内容は後々理解するとして、まずは動かしてみることが大事ですね。

 

JavaScriptの基本をサルでもわかるようにまとめた【入門用】

 

www.ituore.com

 

次はこちら。プログラムを書くにあたっての作法というか書き方のルール、文法が一通りまとめられています。この記事でJavaScriptプログラミングのすべてを理解することはできませんが、よく使う文法が網羅されているのでチートシート的に使うといい感じです。

 

初学者の方であれば「3.JavaScriptの基本的な書き方」まで目を通してもらえればいいかなと。その後も大切なんですが、いきなり第一級オブジェクトとか言われても困っちゃうと思いますのでまずは基本的な書き方の雰囲気を掴んでください。

 

精読して内容を暗記する必要はありません。今後、たくさんプログラムを書くことで文法は自然と覚えますので流し読みで。実際にコードを読んだり書いたりしてわからないことがあったらまたこのページを参照してください。

 

あぁ、こーゆーページがブクマされるんだな、と勉強になりました。

 

マンガで分かるJavaScriptプログラミング講座

 

crocro.com

 

書籍化もされたサイトです。先ほどのサイトを流し読みしたら次はこちらの「第1部 JavaScriptプログラミング」に目を通してください。マンガなのですらすら読めると思います。

 

こちらは実際にJavaScriptを使ってどんなことができるのか、そのためにはどんな文法を使ってどのような記述が必要なのかまで説明されています。サンプルのソースコードもしっかり用意されています。いきなり全部は大変だと思いますが、繰り返し読んで内容を理解してください。

 

それと、サンプルコードはできるだけ実際に動かして実行結果を確認したほうが身に付きやすいと思います。ダウンロードやコピペではなくJavaScriptコード部分だけでも自分の手で入力すると体がコードを覚える感じでより効果的です。写経と呼ばれるものですね。

 

第1部が終わったら第2部は飛ばして第3部を先に見たほうがモチベーションは維持しやすいかな。第2部も大事なんですが、実際にWEBアプリに触れてJavaScriptの楽しさを実感したほうが勉強も捗るはずです。楽しんでいきましょう。

 

JavaScript入門 (全24回)

 

http://dotinstall.com/lessons/basic_javascript_v2

 

みんな大好きドットインストールです。1動画が3分以内に収められているので休憩を挟みながらでも2時間あればすべての動画に目を通せると思います。私も昔はお世話になりました。

 

文字越こしを見るには本来プレミアム会員になる必要がありますが、JavaScript入門に関してはサンプルとして無料会員でも文字越こしが見れるようになっています。やったね!

 

ですので、まずは無料会員で試してみて必要だと判断したら課金してもいいのかなと。女性の声バージョンとか、色々オプションがついてきます。ちなみに私は無課金で利用させていただいています。いつもありがとうございます。

 

動画の内容はしっかりしたもので、一通り必用になりそうな文法などが網羅されています。それと説明を聞きながら学習するので教えてもらってる感はあります。反面、聞き逃したりなど自分のペースで進められないところもあるので向き不向きはあるかもしれません。

 

もう一息

 

もっといっぱい紹介しようかと思ったのですが、情報過多はプレッシャーになりそうなのでJavaScriptのおすすめは上記の4サイトで。初学者の方であれば下のマンガと動画の内容をしっかり理解すれば十分ブログカスタマイズと戦えるようになると思います。

 

といいたいところですが、昨今のJavaScript界隈ではjQueryの呼ばれるライブラリの利用が当たり前となっていますのでそちらも多少触れておこうと思います。こちらは難しいことはありません、JavaScriptをより便利に使うための技術です。基本的な使い方だけ覚えればOKです。

 

7つのサンプルでjQueryを学ぼう!「jQueryが全く分からない人のため」の超初級者向け入門講座

 

ozpa-h4.com

 

こちらを見れば使い方はわかると思います。jQueryとかよくわからん、って人向けに非常に優しく説明されています。勉強になります。

 

jQuery入門 (全20回)

 

http://dotinstall.com/lessons/basic_jquery_v2

 

ドットインストール2回目。JavaScript同様、動画で学びたいときはこちら。特に説明は要らないですね。

 

jQuery 日本語リファレンス

 

semooh.jp

 

使い方がわかったら頻繁に利用すると思うのがこちらのサイト。jQueryが用意している処理の使い方がまとめられたリファレンスサイトです。こちらも覚える必要はありません。わからなくなったら都度参照してください。

 

jQuery 1.9 日本語リファレンス

 

jQuery 1.9 日本語リファレンス | js STUDIO

 

もうひとつリファレンスサイト。こっちのほうが少し新しいようです(といってもこっちも最新ではないのですが)。こちらのほうが公式のリファレンスに近い形で情報が掲載されています。

 

おまけ

 

ここから先はおまけ的なサービスをちょっとだけ。気が向いたときや暇つぶしにどうぞ。私が試していないものも紹介しますことをご了承ください。

 

ドットインストール

 

http://dotinstall.com/

 

ドットインストール3回目。「JavaScript」や「jQuery」などのキーワードで検索すれば関連するレッスン動画が一覧で表示されます。アイデアが欲しい時やどんなことができるか知りたいときの参考にどうぞ。

 

jsdo.it

 

jsdo.it

 

JavaScriptだけでなくHTMLやCSSの勉強にもなるサイト。初学者の方にはハードル高すぎかもしれませんが、こんなことできるんだ!という刺激にはなると思います。実際に登録してここに勉強の成果を残すのもありかもですね。

 

CodePen

 

codepen.io

 

JavaScriptを実際に実行して試すことができるサービスです。個人的にはブラウザのコンソールでも十分かと思っていますが、便利なツールは知っておいて損はありません。

 

Progate[プロゲート]

 

prog-8.com

 

私は利用したことないのですが、よく目にする、耳にするサービスです。もしよろしければこちらも試してみてはいかがでしょうか。

 

さいごに

 

JavaScriptの勉強を始めたときのことを思い出しながらこの記事を書きました。懐かしいな。

 

JavaScriptに限らず、プログラミングってやったことない人にとってはハードルが高いものだと思いますが、やってみると意外と楽しかったりします。これを機にJSer(って言うのかな)になってくれるとうれしいですね。

 

ではでは、最後までお付き合いいただきありがとうございました。