column

ITコラム

old_javascript2

プログラミング

2015.08.22

土日でJavaScript入門!ムダのないオススメ勉強方法をご紹介!

ホームページ作成に入門を果たし、HTMLとCSSはわかってきた。だけど、Javascriptでアニメーションをつけたり、ユーザビリティを向上できるようになるためには何を勉強すればいいかわからない。そんなお悩みはありませんか?
それもそのはず。JavascriptはHTMLやCSSに比べて用途が圧倒的に多く、その分しっかり勉強しようとしてしまうと、ホームページ作成に関係ない部分もたくさん勉強する必要がでてきてしまいます。
そこで今回は、ホームページ作成に絞ったJavscript学習方法をご紹介します!もし、まだHTMLやCSSを勉強していない方はまずは下の関連記事を見て、そちらの勉強をしてみてください!

HTMLとCSSは、「HTMLがコンテンツ」「CSSがデザイン」とご紹介させていただきましたが、Javascriptは「使いやすさ」と覚えるのがまずは無難でしょう。
HTMLとCSSでカッコイイホームページができたら、今度はJavascriptで使いやすくしてみてください!

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3%で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

いきなりガッツリ!まずはドットインストールで3つのレッスンを受けてみよう!

こちらのドットインストールというサービスは、初心者向けに大変わかり易く作られたサービスです。動画で丁寧に説明されているため、自分のペースでお手軽に勉強ができます。
JavaScript入門 (全24回)
jQuery入門 (全20回)
jQueryで作るスライドショー (全8回)
まずはコチラの動画を見ながら、ひたすら動画の真似をしてみましょう。かなり丁寧に説明してくれるので、何もわからない人でも簡単にできちゃいます。
たまにスピードが早くてついていけないな..と感じたら、動画を途中でとめても全然問題ありません!自分のペースで、ゆっくり進めてみてください。
少々時間はかかりますが、まずはとにかくこの3つを全部見て、Javascriptの雰囲気を掴んで見てください。また、「jQuery」とは、Javascriptをホームページ作成用に簡単に使えるようにしたものです。殆どのホームページで「jQuery」は採用されていて、信頼のできるJavascriptライブラリです。また、入門だけでなく、実際に一つ機能を作る過程に触れるのが大事です。

次は簡単に応用編。問題形式のprogateで簡単な実践をしよう!

こちらのprogateというサービスは、とてもシンプルに要点がまとまっている上に、カンタンな問題形式で学習ができるため、小学校の計算ドリルの問題を解くような感じでHTMLを学ぶことが出来ます。
問題の前には説明もあるので、上述のドットインストールの内容を暗記している必要はありません。またゼロから始める気持ちでやってみましょう!
このサービスのなかで、とりあえず
jQuery 基礎編
を完了させれば、基礎としては十分なレベルになります。
こちらも2〜3時間もあれば十分にできるはずなので、是非お試しください!

まだまだこれから。書籍を一冊書き写してみよう!



仕上げとして、書籍を一冊選んでそれを書き写してみましょう。これはまるまる1日くらいかかってしまいますが、かなり力がつくと思います。
おすすめ書籍は上の一冊。完全な初心者向け書籍で、「ドーナツ本」として親しまれています。ドットインストールやprogateで見たような内容が出てくるので、「あ、これ知ってる!」みたいなのが多いと思います。
こちらも、とりあえず読みながら書き写すのがオススメな使い方。細かいことは気にせず、本の言うとおりに書いていきましょう!段々と仕組みが理解できてくると思います。

あとは根気!たくさん作って数をこなそう!

ここまでくれば、Javascriptについての基礎的な理解はある程度できあがります。あとは実際に作ってみるのが大事です。プログラミング能力は「自分で頭を使って書く」ことで成長するのです。
最初は難しいと思いますが、google検索などでたくさんコードが見つかるので、コピペなども駆使して出来る限り自分が思うような動きを作ってみてください!コードは書けば書くほど能力が高まります!

最後に友達に公開してフィードバックをもらおう!

オリジナルでサイトを作って公開することは、大きなモチベーションになります。また、Javascriptは「使いやすさ」を良くするためのツールなので、ぜひ友達に見せて、「実際に使いやすくなったか」を確認してみましょう。アニメーション一つでも、ユーザーがしっかり中身を認識して動くようになることがわかります。
是非Javascript(jQuery)をマスターして、あなただけのオシャレなwebサイトを作ってみてください!

無料説明会

SHARE

最新記事

無料説明会に参加してみる

INTERNOUS,inc. All rights reserved.

無料オンライン説明会へ