Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Word bench nagoya 5月度

966 views

Published on

wordbench名古屋の2016年5月度の勉強会スライド

Published in: Engineering
  • Be the first to comment

Word bench nagoya 5月度

  1. 1. JavaScriptの基本と ReactJsの紹介 WBN 2016年5月21日勉強会 泉 陽二
  2. 2. 自己紹介 • 4,5年ぐらいプログラミングやっています。 • 主な言語はobjective-c(iOS)やC#(ウィンドウズデス クトップアプリケーション)
  3. 3. アジェンダ • JavaScriptの解説 • ReactJsの簡単な紹介
  4. 4. 変数 • 変数とは値を格納したり、取り出したりする入れ物 • 値には数値や文字列(文章)、真偽値(Bool)、配列、オブジェ クト、関数がある(JavaScriptでは関数も値として扱える)。 • 変数の宣言はvarで行う。 • JavaScriptの変数は型にとらわれない。 (文字列を格納している変数に後から数値を入れることがで きる。他のプログラミング言語だと最初に文字列を代入す ると、それ以降、文字列以外代入できない)
  5. 5. 変数(数値、文字列、boolean) • var foo = ‘bar’; //文字列 • var num = 1; //数値 • var bool = true; //boolean true or false
  6. 6. 変数(オブジェクト、配列、関 数) • var ichiro = { age : 20, country : “Japan”, }; //オブジェクト • var fruitArray = [“apple”, “orrange”]; //配列 • var addFunc = function addFunc( x, y ){ //関数 return x + y; };
  7. 7. その他の変数 • その他の変数の型にはDate(日付)やRegExp(正規表 現)、Error(エラー)等がありますが、省略します。
  8. 8. = について • =で変数に代入する時、文字列と数値は値そのもの が格納されるが、オブジェクトや配列は参照が格納 される。 var myString1 • var myStr1 = ‘str’; var myStr2 = myStr1; var myString2 文字列’str’ 文字列’str’ • var myArray1 = [ 1, 2 ]; var myArray2 = myArray1; var myArray1 var myArray2 [ 1, 2]
  9. 9. 変数の同値比較 • 変数の同値比較は === で行う。等しい場合はtrueと なり、等しくない場合はfalseとなる • オブジェクトや配列は内容が同じでも等しいと判定 されないことがある var a = [ 1, 2 ]; var b = [ 1, 2 ]; a === b //falseとなる var c = [ 1, 2 ]; var d = c; c === d; //trueとなる
  10. 10. 変数の同値比較 • オブジェクトや配列の同値比較は同一人物の時のみ 等しいと判定される。(顔も体型も同じ双子は等し くない判定される)
  11. 11. オブジェクトについて • 空のオブジェクトを作成して、プロパティを設定する方 法(サンプルコード参照) • コンストラクタを定義して、newで作成する方法(サンプ ルコード参照) • オブジェクトのプロパティは .プロパティ名 で変更、設 定、取得する • オブジェクトの例としてオブジェクトを人に見立てて Personという名前でコンストラクタに使用されることが ある
  12. 12. 配列について • 配列は連続したデータを格納する変数として使われれ る • 配列の要素にアクセスするには0,1,2と数値を使ってア クセスする。(0から始まることに注意) var myArray = [ ‘a’, ‘b’ ]; myArray[0]; //0番目の要素(この場合だと’a’)を取得・変 更することができる • .push で配列の末尾に値を追加し、 .length で配列に格 納されている値の数を取得できる(上の場合2 となる)
  13. 13. 関数について • 何かしらの演算や処理を行うもの。数値や文字列、 オブジェクト等の値(引数)を受け取って、処理を行 い。処理したものを返す(return)。 • returnが実行されるとreturn以降に記述されている 内容は省略される。 • 関数には無名関数や即時実行関数などがある。 • 関数の生成方法はサンプルコードを参照
  14. 14. メソッド使用時の注意点 • 参照している変数自体を変更するか、参照している 変数を元に新しい変数を作成するかの違いに気をつ ける。 例えば、組み込みのArrayのconcatメソッドは2つの 配列をつなげて新しい配列を作成するので、作成に 利用した2つの配列は変更されない。reverseメソッ ドは新しい配列を作成せず、元の配列の並びを逆順 にする。
  15. 15. 処理の実行順序 • 加減乗除は算数と同じで足し算、引き算よりも先に 掛け算、割り算が実行される。 x + y / z だとx + ( y / z ) の順に実行される。 • obj.obj.propertyだと(obj.obj).propertyの順に処理さ れる。obj.(obj.property)の順に処理されることはな い
  16. 16. 分岐とループ • ifやswitchを使って条件を分岐したり、forやwhileを 使ってループ処理を行う。 • breakで処理を抜け出したり、continueでループ内 の処理をスキップしたりする。 • ループ処理を考える時でn回ループする場合でも具 体的な小さい数で考えるといい。1,2,3とか1,2,3,4 など
  17. 17. スコープ • JavaScriptでは変数のスコープは関数内だけにとど まり、関数内で宣言した変数は関数外からはアクセ スできない。関数外で宣言されている変数には関数 内からアクセスできる。 ifやforループ内で宣言した変数にはifやforループ外 からでもアクセスできる。
  18. 18. 変数の巻き上げ(Hoisting) • 変数や関数は宣言する前にアクセスできる。 a = 0; //変数が宣言される前に値を代入しても //JavaScriptではエラーにならない … … var a; //変数の宣言 • 基本的に変数の宣言は関数内の一番上で行う
  19. 19. その他 • 他にもthisやprototype、クロージャとあるが今回は 省略します。
  20. 20. コーディングスタイル • javascript coding style modernなどで検索する Airbnbやgoogle、jqueryなどがコーディングスタイルを提供し ている • 参考サイト • http://noeticforce.com/best-javascript-style-guide-for- maintainable-code • https://github.com/airbnb/javascript/tree/master/es5#arrays • https://github.com/rwaldron/idiomatic.js/#native
  21. 21. イベント • addEventListenerやremoveEventListnerでボタンクリ ックやタッチイベント時に処理を追加することがで きる。 • getElementByIdやgetElementByTagNameや getElementClassNameなどで特定のHTMLの要素に アクセスする • HTMLの編集にはinsertBeforeやappendChild、 replaceChild、cloneNode、removeChild、 parendNode、innerHTMLなどがある
  22. 22. Javascriptリファレンス • MOZILLA DEVELOPER NETWORKなどに組み込み のオブジェクトやそのメソッド、イベント処理、ブ ラウザ対応状況などが載っている https://developer.mozilla.org/en- US/docs/Web/JavaScript/Reference • JavaScriptを試すのにJSFiddleなどがある https://jsfiddle.net • http://qiita.com/gaogao_9/items/ec2b867d6941173f d0b1
  23. 23. 参考にした書籍 (プログラミング初心者向きではない 可能性あり) • JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス すごく有名な本 • 開眼! JavaScript ―言語仕様から学ぶJavaScriptの本質 他のオブジェクト指向言語を知っている人だと楽に読めるかも • 入門 モダンJavaScript DOM操作やイベント処理、Ajaxにも触れている。 本が厚いので読むのが大変かも • 本を選ぶときは出版年月日が新しい方がいいかも。 今現在(2016年5月)時点ではECMAScript(ES) 5.1にほとんどの最新ブラウザが 対応している。ECMAScript2015(ES6)が去年打ち出されたが一部の機能のみ 対応しているかも babelなどのAltJSでES2015を使用可能
  24. 24. React.js • React.jsとはfacebookが提供しているJavaScriptラ イブラリです • MVCのVの部分を担う(ユーザーインターフェイス 部分)
  25. 25. React.js • 6つの異なるテクノロジー React + JSX + Webpack + Babel(ES6をES5に変換 したりする) + Flux + Express で構成されることが多いらしい
  26. 26. React.js • http://postd.cc/learn-raw-react-no-jsx-flux-es6- webpack/ を元に解説します。
  27. 27. React.js • ライブラリの読み込み react.jsとreact-dom.jsを読み込む • 読み込んだ上の2つのライブラリに定義されている ReactオブジェクトやReactDomオブジェクトを利 用する
  28. 28. React.js • ReactオブジェクトのcreateElementメソッドや createClassメソッド、ReactDomオブジェクトの renderメソッドを使用してHTMLを記述します。
  29. 29. 参考サイト • JSXやFluxを使っていないReactの解説 http://postd.cc/learn-raw-react-no-jsx-flux-es6- webpack/ • FacebookのReactサイト http://facebook.github.io/react/docs/getting- started.html https://facebook.github.io/react/docs/tutorial-ja- JP.html
  30. 30. ご静聴ありがとうござ いました

×