読了: 約 3 分

JavaScriptを勉強する中で勉強になったorこれから勉強するためにブックマーク的に
記事を書いておきます。

最近は更にHTML5とCSS3が普及してきて、スマートフォンのサイト制作の業務が増えていますね。
JavaScriptと組み合わせることでリッチなコンテンツを創る事が出来るので、
ここまできたのかーとワクワクします。

そんな事を考えていますが、まだJavaScript初心者。

最初に覚えておくべき記事をまとめておきます。

JavaScript編

オブジェクト指向やprototypeなど勉強している方にお勧めの記事です。

プロトタイプ(prototype)によるJavaScriptのオブジェクト指向

Javascript初心者からみたprototype

Javascript/prototypeプロパティ

第1回 Prototypeライブラリ

jQuery編

jQuery日本語リファレンス
getElement~とか書かなくて良いので楽ですよね。
ただ今通っているスクールの先生も言っていましたが、
デザイナーでもjQueryのプラグインを入れて作る機会が増えていますが、
途中でエラーや挙動がおかしくなった時にJavaScirptの知識がないと
根本的に修正するのが難しくなってしまいますよね。
だからこそjQueryだけではなくて、JavaScriptをきちんと勉強しておく必要がありますね。
エンジニアさんの工数も使ってしまいますので。

JavaScirptも書き方によってはIEで効かなかったりするので、
jQueryである程度各ブラウザ対応されているのはいいですね。

とはいえ最初に書いたJavaScriptのコードが早速Firefoxで動かなかった…笑

良い勉強法

とにかく最初はコードをとにかく書くことですね。
自分もわからなかったので、getElement~ってなんですか(ポカン?)ってところから始まりましたので
兎に角書きまくって型を覚えることなのかなと思います。

それか、jQueryのスライダーギャラリーみたいなものを創るのが良いかなと思いました。
下記のようなjQueryのスライダープラグインを見ながら書いて、学ぶっていうのは楽しくていいですね!

少し複雑になってくるかもしれませんが、
JavaScriptのパフォーマンス系の事を調べたものを記事にしましたので
こちらもご覧ください

jQueryプラグイン

画像ギャラリー用jQueryプラグインなどまとめ

写真を効果的に魅せる6つのjQueryギャラリー
flickrなどから画像を取得してくるギャラリー

37個のjQueryギャラリーサンプル集
個人的に好きなのはこのoverlayをかけていて写真などの画像が映えるプラグイン

JavaScriptとjQueryの使い分けというのが難しいですが、
個人的にはanimate,hide,showなど色々あって簡単に動きをつけられるという点と
有る程度ブラウザ対応しているという事でデザイナーは使い易いかつチャレンジし易いのではないかと思いました。

また、他のWEBサービスを作成している方から学ぶのも非常に勉強になります。
今回は、和田さんを紹介します。

30分、JavaScriptで作るWebサービスのモックアップ
という記事がバズっていましたが、ここには必要なエッセンスが全て揃っているのではないかと思います。

JavaScriptだけではどうにもなりませんし、HTML/HTML5で基礎を作って、WEBサービスですのでCSS/CSS3でデザインをする。
APIを使ってコンテンツの中身を創る。その時間配分まで細かく書いていただいております。
非常に勉強になりました。

参考書籍

何はともあれ基礎が大切です。
元々デザイナーですが、jQueryのデザインパターンみたいな書籍で済ませてしまいますが、
下記のようなJavaScriptの基本を学ぶともっとスムーズに使えるようになると思います。
個人的に参考になった書籍を2冊厳選してみました!
JSの勉強をする際に他のエンジニアの方からもおすすめされた2冊です。

私はこちらから読みましたが、結局下の書籍も買ってしまいました。笑
パーフェクトJavaScript (PERFECT SERIES 4)

JavaScript本格入門 ~モダンスタイルによる基礎からAjax・jQueryまで

スマホ最適化する際などに使ってみてはいかがでしょうか。
どんどんチャレンジしていきたいですね。
それでは、また。