Word bench nagoya 5月度
•Als PPTX, PDF herunterladen•
1 gefällt mir•1,249 views
wordbench名古屋の2016年5月度の勉強会スライド
Empfohlen
Weitere ähnliche Inhalte
Andere mochten auch
Andere mochten auch (16)
Ähnlich wie Word bench nagoya 5月度
Ähnlich wie Word bench nagoya 5月度 (16)
Word bench nagoya 5月度
- 4. 変数 • 変数とは値を格納したり、取り出したりする入れ物 • 値には数値や文字列(文章)、真偽値(Bool)、配列、オブジェ クト、関数がある(JavaScriptでは関数も値として扱える)。 • 変数の宣言はvarで行う。 • JavaScriptの変数は型にとらわれない。 (文字列を格納している変数に後から数値を入れることがで きる。他のプログラミング言語だと最初に文字列を代入す ると、それ以降、文字列以外代入できない)
- 5. 変数(数値、文字列、boolean) • var foo = ‘bar’; //文字列 • var num = 1; //数値 • var bool = true; //boolean true or false
- 6. 変数(オブジェクト、配列、関 数) • var ichiro = { age : 20, country : “Japan”, }; //オブジェクト • var fruitArray = [“apple”, “orrange”]; //配列 • var addFunc = function addFunc( x, y ){ //関数 return x + y; };
- 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. 変数の同値比較 • 変数の同値比較は === で行う。等しい場合はtrueと なり、等しくない場合はfalseとなる • オブジェクトや配列は内容が同じでも等しいと判定 されないことがある var a = [ 1, 2 ]; var b = [ 1, 2 ]; a === b //falseとなる var c = [ 1, 2 ]; var d = c; c === d; //trueとなる
- 11. オブジェクトについて • 空のオブジェクトを作成して、プロパティを設定する方 法(サンプルコード参照) • コンストラクタを定義して、newで作成する方法(サンプ ルコード参照) • オブジェクトのプロパティは .プロパティ名 で変更、設 定、取得する • オブジェクトの例としてオブジェクトを人に見立てて Personという名前でコンストラクタに使用されることが ある
- 12. 配列について • 配列は連続したデータを格納する変数として使われれ る • 配列の要素にアクセスするには0,1,2と数値を使ってア クセスする。(0から始まることに注意) var myArray = [ ‘a’, ‘b’ ]; myArray[0]; //0番目の要素(この場合だと’a’)を取得・変 更することができる • .push で配列の末尾に値を追加し、 .length で配列に格 納されている値の数を取得できる(上の場合2 となる)
- 13. 関数について • 何かしらの演算や処理を行うもの。数値や文字列、 オブジェクト等の値(引数)を受け取って、処理を行 い。処理したものを返す(return)。 • returnが実行されるとreturn以降に記述されている 内容は省略される。 • 関数には無名関数や即時実行関数などがある。 • 関数の生成方法はサンプルコードを参照
- 15. 処理の実行順序 • 加減乗除は算数と同じで足し算、引き算よりも先に 掛け算、割り算が実行される。 x + y / z だとx + ( y / z ) の順に実行される。 • obj.obj.propertyだと(obj.obj).propertyの順に処理さ れる。obj.(obj.property)の順に処理されることはな い
- 16. 分岐とループ • ifやswitchを使って条件を分岐したり、forやwhileを 使ってループ処理を行う。 • breakで処理を抜け出したり、continueでループ内 の処理をスキップしたりする。 • ループ処理を考える時でn回ループする場合でも具 体的な小さい数で考えるといい。1,2,3とか1,2,3,4 など
- 18. 変数の巻き上げ(Hoisting) • 変数や関数は宣言する前にアクセスできる。 a = 0; //変数が宣言される前に値を代入しても //JavaScriptではエラーにならない … … var a; //変数の宣言 • 基本的に変数の宣言は関数内の一番上で行う
- 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. イベント • addEventListenerやremoveEventListnerでボタンクリ ックやタッチイベント時に処理を追加することがで きる。 • getElementByIdやgetElementByTagNameや getElementClassNameなどで特定のHTMLの要素に アクセスする • HTMLの編集にはinsertBeforeやappendChild、 replaceChild、cloneNode、removeChild、 parendNode、innerHTMLなどがある
- 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. 参考にした書籍 (プログラミング初心者向きではない 可能性あり) • JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス すごく有名な本 • 開眼! JavaScript ―言語仕様から学ぶJavaScriptの本質 他のオブジェクト指向言語を知っている人だと楽に読めるかも • 入門 モダンJavaScript DOM操作やイベント処理、Ajaxにも触れている。 本が厚いので読むのが大変かも • 本を選ぶときは出版年月日が新しい方がいいかも。 今現在(2016年5月)時点ではECMAScript(ES) 5.1にほとんどの最新ブラウザが 対応している。ECMAScript2015(ES6)が去年打ち出されたが一部の機能のみ 対応しているかも babelなどのAltJSでES2015を使用可能
- 25. React.js • 6つの異なるテクノロジー React + JSX + Webpack + Babel(ES6をES5に変換 したりする) + Flux + Express で構成されることが多いらしい
- 28. React.js • ReactオブジェクトのcreateElementメソッドや createClassメソッド、ReactDomオブジェクトの renderメソッドを使用してHTMLを記述します。
- 30. ご静聴ありがとうござ いました