1. BASICS(基礎)
1.1. BASICS part 1.
1.1.1. Boolean Logic
1.1.1.1. And Operator
1.1.1.1.1. true when all are true
1.1.1.2. Or Operator
1.1.1.2.1. true when one is true
1.1.1.3. Not Operator
1.1.1.3.1. Inverts true/false value
1.1.2. Template Literal
1.1.3. History of JavaScript
1.1.3.1. ES2015(ES＆6)
1.1.3.1.1. The biggest update to the language
1.1.3.2. has been annually updating ever since
1.1.3.2.1. principles
1.1.4. Type Coercion
1.1.4.1. the plus operator(+) will always convert into a string
1.1.4.2. Boolean
1.1.4.2.1. Falsey Value
1.1.5. Type Conversion
1.1.6. ways of writing conditionals 条件式の書き方
1.1.6.1. If / Else Statements
1.1.6.2. Switch Statements
1.1.6.3. Conditional (Ternary) Operator 三項演算子・条件演算子
1.1.6.3.1. the conditional operator allows us to write something similar to an if/else statement but all in one line
1.1.6.3.2. an operator (演算子) creates a value (値) therefore is an expression (式)
1.1.6.3.3. the conditional operator is also called the ternary operator because it has three parts. condition, if part, else part
1.1.7. Equality Operator
1.1.7.1. ===
1.1.7.1.1. the strict equality operator
1.1.7.1.2. will return true when both ends are the same
1.1.7.2. ==
1.1.7.2.1. the loose equality operator
1.1.7.2.2. if used, has a possibility of introducing hard to find bugs!!
1.2. BASICS part.2
1.2.1. strict mode
1.2.1.1. 1. forbids us from doing certain things
1.2.1.2. 2. creates visible errors in the console which would have otherwise failed silently
1.2.2. Functions
1.2.2.1. a piece of code you can use over and over again
1.2.2.2. can also receive and return data
1.2.2.2.1. like a machine
1.2.2.3. like a variable but for whole chunks of code
1.2.2.3.1. a variable holds a value
1.2.2.3.2. a function holds one or more lines of complete code
1.2.2.4. the process of using the function is called
1.2.2.4.1. calling the function
1.2.2.4.2. running the function
1.2.2.4.3. invoking the function
1.2.2.5. parameters
1.2.2.5.1. variables that are specific only to this function
1.2.2.5.2. values of the parameters are called argurements
1.2.2.6. types of functions
1.2.2.6.1. function declaration
1.2.2.6.2. function expressions 関数表示
1.2.2.6.3. arrow function
1.2.2.6.4. three different ways of writing functions, but they all work in a similar way. receive input data, transform data, and output data.
1.2.2.6.5. Gyazo
1.2.3. data structure データ構造
1.2.3.1. Arrays 配列
1.2.3.1.1. add elements
1.2.3.1.2. remove elements
1.2.3.1.3. indexOf
1.2.3.1.4. includes method
1.2.3.1.5. use for order data
1.2.3.2. Objects オブジェクト
1.2.3.2.1. in objects we define key-value-pairs
1.2.3.2.2. creating an object using the curly brackets is called the object literal syntax because we are literally writing down the entire object content
1.2.3.2.3. in objects, the order of the elements do not matter when we want to retrieve them
1.2.3.2.4. use for unstructured data
1.2.3.2.5. Object Method オブジェクト・メソッド
1.2.4. loops
1.2.4.1. for loop
1.2.4.1.1. automates repetitive tasks
1.2.4.1.2. has three parts
1.2.4.1.3. written like the if statement
1.2.4.1.4. loop arrays
1.2.4.1.5. loop inside a loop
1.2.4.2. while loop
1.2.4.2.1. can only specify the condition
1.2.4.2.2. conclusion: the while loop does not have to depend on the counter variable
1.2.4.2.3. use when you do not know how many iterations you will have beforehand
1.3. How to think like a developer
1.3.1. understanding the problem
1.3.1.1. breaking into sub-problems
1.4. JavaScript in the browser: DOM and Events Fundamentals
1.4.1. DOM
1.4.1.1. Document Object Model
1.4.1.2. Structured representation of HTML documents.
1.4.1.3. Allows JavaScript to access html elements and styles to manipulate them
1.4.1.4. in short: the DOM is basically a connection point for html documents and JavaScript code.
1.4.1.5. How it works
1.4.1.5.1. The DOM is created as soon as the html loads and is stored in a tree structure
1.4.1.5.2. The DOM is not part of JavaScript Language, yet it works because DOM and DOM Methods are part of WEB APIs
1.4.2. Handling click events
1.4.2.1. addEventListener method
1.4.2.1.1. argument number one: type of event
1.4.2.1.2. argument number two: event handler
1.4.2.1.3. manipulating css styles
2. What is JavaScript
2.1. JavaScript is a high-level object-oriented, multi-paradigm programming language
2.1.1. Programming language
2.1.1.1. instruct computer to do things
2.1.1.2. Object-oriented
2.1.1.2.1. Based on objects, for storing most kinds of data
2.1.1.3. Multi-paradigm
2.1.1.3.1. We can use different styles of programming
2.2. The role of JavaScript in web development
2.2.1. Building web applications
2.3. There is nothing you can’t do with JavaScript
2.3.1. Dynamic effects and web applications in the browser
2.3.1.1. React
2.3.1.2. Angular
2.3.1.3. Vue.js
2.3.2. Web applications on web servers
2.3.2.1. Node.js
2.3.3. Native mobile applications
2.3.3.1. React Native
2.3.3.2. Ionic
2.3.4. Native desktop applications
2.4. JavaScript releases
2.4.1. ECMASCRIPT
2.5. Linking a JavaScript File
3. 作ってみたいアプリ
3.1. インスタグラムもどき
3.1.1. React元祖？？
3.1.2. 画像の管理
3.1.3. apiの活用
3.2. マインドマップ
3.2.1. 個人的に欲しい
3.3. タスク管理ツール
3.3.1. 個人的に欲しい
3.3.2. google calendarとの連携
4. React(トラハック）
4.1. 基礎知識
4.1.1. what is React Reactとは
4.1.1.1. Facebookが開発
4.1.1.2. JavaScriptライブラリ(≠ ライブラリ)
4.1.1.3. React ≠ SPA( Single Page Application)
4.1.1.4. WebのUIを作る A JavaScript library for building User Interfaces
4.1.1.4.1. UIは二つに分類出来る
4.1.1.4.2. コンポーネントとは
4.1.1.4.3. そもそも：Webの構造はコンポーネントのツリー構造になっている
4.1.1.4.4. React apps run in the browser
4.1.2. Reactの特徴
4.1.2.1. Virtual DOM
4.1.2.1.1. そもそも：DOMとは
4.1.2.1.2. Reactで管理するDOM
4.1.2.2. 差分描画
4.1.2.2.1. 変更があった部分だけを書き換えてくれる
4.1.2.3. JSXが使える
4.1.2.3.1. つまりJavaScript内でhtmlっぽく書ける
4.1.3. 日本一わかりやすいReact入門#1...Reactの基礎知識
4.2. Reactの強みJSXとは
4.2.1. JSXとは
4.2.1.1. JavaScript内でHTMLを簡単に記述するための言語（JavaScriptの拡張言語)
4.2.1.2. Reactでは業界標準
4.2.1.2.1. Facebookが開発
4.2.1.2.2. Reactの公式ドキュメントはほぼJSXで記述
4.2.1.3. なぜ使うのか
4.2.1.3.1. 可読性
4.2.1.4. JavaScriptではない
4.2.1.4.1. JSXの構文をブラウザーは理解できない
4.2.2. JSXの基本文法
4.2.2.1. Reactのパッケージのインストールが必須
4.2.2.1.1. .jsxファイルの先頭で宣言
4.2.2.1.2. import React from "react"
4.2.2.2. Htmlとほぼ同じ記述 (classはclassNameに)
4.2.2.3. {}内に変数や関数を埋め込める
4.2.2.3.1. {}内がJavaScriptの世界になる
4.2.2.4. 変数名は全てキャメルケースで
4.2.2.5. 空要素は閉じる
4.2.3. 日本一わかりやすいReact入門#2...Reactに欠かせないJSXの解説
4.3. create-react-appでの環境構築
4.3.1. create-react-appで必要なもの
4.3.1.1. node 8.10以上
4.3.1.2. npm 5.6以上
4.3.1.3. インストールのためにhomebrewとnodebrewをインストール
4.3.1.3.1. homebrewを使ってnodebrewをインストールする必要がある
4.3.2. create-react-appとは
4.3.2.1. react開発環境を超簡単に構築できるツール
4.3.2.1.1. reactを学習するのに最適な環境
4.3.2.2. なぜ create-react-app?
4.3.2.2.1. reactに開発環境の構築は難しい
4.3.2.2.2. トランスパイラのbabelやバンドラーのwebpackの設定が必要だから
4.3.3. create-react-appの環境の構成
4.3.3.1. src
4.3.3.1.1. コンポーネントを作るJSファイル
4.3.3.2. public
4.3.3.2.1. HTMLファイルや設定ファイル
4.3.3.3. build
4.3.3.3.1. 本番環境用ファイル
4.3.4. コマンド集
4.3.4.1. npm run build
4.3.4.1.1. srcとpublic内のファイルをひとつにまとめて(bundle)、buildディレクトリに出力
4.3.4.2. npm start
4.3.4.2.1. ローカルサーバーを起動してReactを確認出来る
4.3.4.3. npm run eject
4.3.4.3.1. babelやwebpackの設定を変更したい場合のみ
4.3.5. そのた環境構築ツール
4.3.5.1. Next.js
4.3.5.1.1. サーバーサイドレンダリング
4.3.5.2. Gatsby
4.3.5.2.1. 静的ウェブサイトに最適
4.3.6. 日本一わかりやすいReact入門#3...create-react-appで環境構築しよう
4.4. コンポーネントの基本（データの受け渡しと再利用）
4.4.1. なぜコンポーネントを使うのか
4.4.1.1. 再利用する為
4.4.1.2. 分割統治する為
4.4.1.2.1. それぞれのコンポーネントは疎結合になっている
4.4.1.3. 変更に強くする為
4.4.2. コンポーネントの種類
4.4.2.1. Functional Component
4.4.2.1.1. 関数型で定義されたコンポーネント
4.4.2.1.2. 特徴
4.4.2.1.3. シンプル！
4.4.2.2. Class Component
4.4.2.2.1. クラスによって定義されたコンポーネント
4.4.2.2.2. 特徴
4.4.2.2.3. 注意
4.4.3. propsでデータを受け渡す
4.4.3.1. 親コンポーネント
4.4.3.1.1. propsを使おう
4.4.3.2. 受け渡せるデータ型
4.4.3.2.1. {}内に記述
4.4.3.2.2. 文字列、数値、真偽値、配列、オブジェクト、変数等なんでも渡せる
4.4.3.2.3. 文字列は{}なしでもOK
4.4.3.3. コンポーネントを際利用しよう！
4.4.4. 日本一わかりやすいReact入門#4...コンポーネント間でデータの受け渡しと再利用をしよう