厳選！Javascriptの入門で役に立つ10サイト+1
- Javascriptとは？
- Javascriptでこんなことが出来るようになる！
- 開発を学ぶ
- Javascriptを試してみる
- 初心者に優しいJavascript学習サイト7選
- 3.paizaラーニング
- 4.Progate
- 5.CODEPREP / はじめてのJavaScript
- 6.ドットインストール
- 7.JavaScript超入門2019(YouTube)
- 8.全くの初心者でも大丈夫！JavaScriptをゼロから学ぼう
- 9.JavaScript入門
- もっと本格的に学びたい
- jQueryも学びたい
- おわりに
Javascriptとは？
Javascriptとは何者なのでしょうか。
プログラミングを勉強し始めると必ずどこからともなく「Javascript」という単語が聞こえてきます。
そして、Javascriptとは？と調べ始めると難しそうな単語だらけでわけがわからず、結果「よくわからないけど苦手」という状態に陥ってしまう人も少なくないでしょう。
JavascriptとはWebページやWebブラウザの制御ができるプログラミング言語です。
この一文だけで「やっぱり難しそう…。」「制御？」と意欲にシャッターが下りてしまう人もいるかもしれません。
この”制御”という部分が実際どんなことをしていて、皆さんの身近のどんなものに使われているのか想像しづらいのではないでしょうか。
一度Javascriptがどんな分野で活躍しているのかみてみましょう。
Javascriptでこんなことが出来るようになる！
1.【ざっくりわかる！】JavaScriptでできること15選 まとめてみた
コチラのサイトではJavascriptが使われている有名な機能を紹介してくれています。
その中でも皆さんが一度は見たこと・利用したことがあるであろう機能の一部を抜粋します。興味がある方はぜひサイトで詳細を確認してみてください。
ポップアップウィンドウ
画面の内容を更新しないまま、ブラウザを戻ろうとしたりすると「変更内容は保存されていません」などの警告文がポップアップで表示されることがあると思います。
よく見る機能ですが、実はこれはJavascriptでコーディングされていたのですね。
Ajax
Ajaxとはページ遷移をしなくてもデータを取得・表示できる機能のことです。
こう聞くと「何のこっちゃ」という感じですが、Ajaxの代表といえばGoogleマップでしょう。
Googleマップ上で目的地の周辺にカーソルを移動するのにイチイチ画面は遷移しませんよね。こんなに身近なところでもJavascriptは利用されているんですね。
カーソルを合わせると詳細メニューを表示
メニューバーにカーソルを合わせると更に詳細なメニューが表示される機能です。
サイトの階層が深いとその分ページも多くなるので、この機能はありがたいですよね。
スライダー機能でサイトをブラッシュアップ
Javascriptを使用することで、UI（ユーザーインターフェイス=ユーザーの使い勝手）を各段にアップすることができます。
例えばあのAppleのサイトでも用いられている画像がスライドする機能、こちらは複数の画像をただ並べられるよりも見やすく美しいですよね。
また一定時間経過すると画面が切り替わる機能などもJavascriptが使われています。
開発を学ぶ
JavascriptがGoogleマップや、ポップアップウィンドウなど一度は見たことがある、使ったことがあるサービス・機能に利用されていることがわかりました。
第一印象が悪いほど、よく知った後の好感度はあがるものです。
しかし、こんな複雑なことをいとも簡単にやってのけるJavascriptはどのように開発されているのでしょうか。
開発環境の準備
まずは開発環境を整えましょう。と言ってもコードを書くのに特別なものは必要ありません。実はブラウザとテキストエディタだけあれば始められるのです。もう少し高度な開発では、他の環境が必要になりますが、まずは「ブラウザ」と「テキストエディタ」だけで十分です。
【準備するもの1】自分の描いたコードを確認するブラウザ
使用されていることが多いのはGoogle chromeやFirefoxでしょう。
Firefox QuantumとChromeはどっちが優秀？特徴や違いを徹底比較！
好みのものでかまわないと思いますが、私は両方使用しています。ただ圧倒的にchromeを使う機会が多いです。
翻訳などが必要な場合にすぐに翻訳アプリを起動することができたり便利なのですが、使用感が気に入った方を使ってかまわないと思います。
【準備するもの2】コードを書くためのエディタ
コードを書く際に使用するエディタですが、こちらも無料で優秀なものが山ほどあります。
ちなみに私はSublime Textを無料で使用しています。
Javascriptを試してみる
ブラウザとエディタの準備ができたらさっそくJavascriptを試してみましょう。
2.サンプルで学ぶJavaScript入門編
一見すると複雑そうなことがこの3行のコードでできているとは驚きです。
<script>
alert("Hello world!!");
</script>
実際にブラウザで動いているところを見ると嬉しいですよね。
初心者に優しいJavascript学習サイト7選
とりあえず基本的なコードの書き方と、それによってブラウザ上でどのような変化が起このかがわかりました。
しかしJavascriptをもっと本格的に学ぼうと思うともちろん上記のサイトだけではなく、ほかのサイトも試してみましょう。今はJavascriptを学ぶためにたくさんの良いサイトがあります。自分にあったものを探してみてください。
2で紹介したサイトはあくまでも”入門編”なので実際に色々なコードを手を動かして書いていく必要があります。
3.paizaラーニング
paizaラーニングの最大の特徴は、環境構築不要で独自のシステムによりサイト上でコーディング+ブラウザ上での動きを確認できる点です。
有料プランもありますが、無料でもJavascriptの基本的な解説や基礎のコーディングは受講可能です（※ただし会員登録が必要です）。
4.Progate
コチラはプログラミング初心者に大人気のProgateです。
Paiza同様に環境構築不要で解説のスライドを見る→実際にコーディングするという流れで学習ができます。
ただ残念ながら無料で学べるJavascript講座は第1回のみで、2回目以降は有料会員のみのサービスとなっています。
実際の講座はこのような仕様になっています。
5.CODEPREP / はじめてのJavaScript
コチラも無料で使える機能が多い初心者～中級者向けのプログラミング学習サイトです。
実際の講座はこのような仕様になっています。
6.ドットインストール
こちらもプログラミング初心者には定番のサイトですね。
1本の動画が短く、サクっと見られることと動画を見ながらエディタにコードを書く→ブラウザで確認する、という方法で学習している方が多いようです。
コチラの画像のpremiumマークがついているもの以外は無料でも視聴可能です。
Javascriptのコードを書きながらゲームを作っていくという工程ですし、「最初は動かなくても大丈夫です。」との先生の一言も頼もしいですね。
解説の先生の声にあまり抑揚がないので聞きなれるまではちょっと違和感を感じる方もいるかもしれませんが、ProgateやPaizaなどのサイト独自の環境ではなく自分でコードを確認しながら学習を進めたいと思う方にはドットインストールがおススメです。
7.JavaScript超入門2019(YouTube)
こちらはYouTubeで視聴できる動画です。
JavaScript超入門とあるように、プログラミングを今から始める人にとってもわかりやすく丁寧な解説になっています。
またこのように画面半分が、音声の文字起こし、左半分が操作画面となっている為わかりにくかった部分は動画をストップしてテキストを読むことができるのもありがたいですね。
8.全くの初心者でも大丈夫！JavaScriptをゼロから学ぼう
こちらもタイトルから頼もしさがにじみ出ています。
JavaScriptとは？ということから、どのような構造の言語なのか？というコーディングというよりもJavaScriptの仕組みそのものをイラストや図でわかりやすく解説してくれています。
また後半にはJavaScriptの学習のおすすめサイトも3つあげられており、先ほど紹介したドットインストールやそのほか2つのサイトも紹介されています。
9.JavaScript入門
入門、とあるようにこちらのサイトも非常に初心者に優しい作りになっています。
このようにファイルの作り方や、記入場所についてもイラストや図で詳しく解説してくれています。
もっと本格的に学びたい
実際にProgateやPaizanなどの講座でコーディングを行っても、見本通りに簡単なコードを書いていけばサイト上でのブラウザではシステムは動くのでこのようなサイトで基本的なことを学んだ後はしっかりと自分でコードを書いていくことが必要です。
10.JavaScript Primer / はじめてのJavaScript
こちらは完全に無料で利用できるチュートリアルサイトです。
パッと見、文字情報が非常に多いので苦手意識を持ってしまう人もいるかもしれませんが内容は濃く、JavaScriptで困ったことがあればコチラで確認する為のJavaScript辞典として利用するのがオススメです。
jQueryも学びたい
まだまだライブラリなどの豊富さからjQueryを使う必要がある場合もあります。そんなときはSkillhubの講座を見てみてください。かなりわかりやすい内容になっています。
11. jQuery/Javascript入門講座
おわりに
ドットインストールの先生がおっしゃっていたようにJavaScriptは似たような記号がコードの中でたくさん出てきます。
その為はじめの内はタイプミスなどでコードがうまく動かないことがよくあるそうです。タイプミスの見つけ方なども今後ご紹介できればと思います。
また、もちろん今回紹介した学習サイトを全て利用する必要はありません。いくつか試してみて自分にあった学習方法を見つけてくださいね。
まずは無料で14講座から始めましょう！
募集人数には制限があります。サインアップはお早めに。
4月28日まで