2015-05-21

第1回 JavaScript社内勉強会を開催しました。

はじめましてデザインユニットの井上です。
今回は、平成27年5月12日に開催されました[第1回 JavaScript社内勉強会]の報告をしたいと思います。

当日は、メモを取りながら話を聞いているだけっだので分かった気に似合っていたのですが、振り返ると全然理解出来ていなかったです…
jqueryを利用する事で簡単に美しい動きを加える事ができますが、基本が分かっていないと簡単そうなところで躓きますね。

アジェンダ

はじめてのJavaScript

  • JavaScriptとは
  • JavaScriptを学ぶと嬉しいこと
  • 言語仕様概要
  • オブジェクトが主役
  • プロトタイプベース言語
  • プロトタイプチェイン
  • スコープとスコープチェイン

JS/jQueryの話

  • JavaScriptのスコープのこと
  • JavaScriptのthisのこと
  • まとめ

所感

グローバルスコープ、ローカルスコープの存在は知ってはいましたが、JSを普段書く機会が少ない事もあり、スコープの範囲を意識してコードを書くことはありませんでした。

何気なく宣言した変数が他のスクリプトの変数と衝突してしまう可能性があるので、必ずスコープの範囲は意識してグローバル変数の使用は避けたいと思います。

グローバルスコープとローカルスコープ

  • グローバルスコープ(どこからでも参照出来る)
  • ローカルスコープがある(特定の範囲内からのみ参照できる)

ローカル変数を作るには

必ず以下2つの条件を満たす事が必要。

  • functionの中で変数宣言する
  • varを用いて変数宣言する

jquery等で、thisを範囲や対象を意識せず適当に仕様してましたが、スコープ範囲の説明と合わせて解説してもらうことで理解できました。

これでスクリプトが動かない時も切り分けができるような気がします。

thisとは

  • javascriptで自動的に定義されるマジック変数
  • どこで使うかにより、指すものが異なる。

関数内でのthis

4パターンを抑えればOK

  • オブジェクト呼び出し時のthis
  • 関数をnewした時のthis
  • call()、.apply() や .bind() の際の this
  • それ以外のthis

フラットデザインやマテリアルデザインが多様されるようになり、表示される情報は整理され装飾はへりましたが、デザインの一部として現実を模した自然な動きをつける事が増えてきたと思います。

デザイナーだとどうしても苦手に感じてしまいますが、頑張ってJavaScriptも勉強したいと思います。


このエントリーをはてなブックマークに追加

0 コメント:

コメントを投稿