Get Started. It's Free
or sign up with your email address
JavaScript by Mind Map: JavaScript

1. BASICS(基礎)

1.1. BASICS part 1.

1.1.1. Boolean Logic And Operator true when all are true Or Operator true when one is true Not Operator Inverts true/false value

1.1.2. Template Literal

1.1.3. History of JavaScript ES2015(ES&6) The biggest update to the language has been annually updating ever since principles

1.1.4. Type Coercion the plus operator(+) will always convert into a string Boolean Falsey Value

1.1.5. Type Conversion

1.1.6. ways of writing conditionals 条件式の書き方 If / Else Statements Switch Statements Conditional (Ternary) Operator 三項演算子・条件演算子 the conditional operator allows us to write something similar to an if/else statement but all in one line an operator (演算子) creates a value (値) therefore is an expression (式) the conditional operator is also called the ternary operator because it has three parts. condition, if part, else part

1.1.7. Equality Operator === the strict equality operator will return true when both ends are the same == the loose equality operator if used, has a possibility of introducing hard to find bugs!!

1.2. BASICS part.2

1.2.1. strict mode 1. forbids us from doing certain things 2. creates visible errors in the console which would have otherwise failed silently

1.2.2. Functions a piece of code you can use over and over again can also receive and return data like a machine like a variable but for whole chunks of code a variable holds a value a function holds one or more lines of complete code the process of using the function is called calling the function running the function invoking the function parameters variables that are specific only to this function values of the parameters are called argurements types of functions function declaration function expressions 関数表示 arrow function three different ways of writing functions, but they all work in a similar way. receive input data, transform data, and output data. Gyazo

1.2.3. data structure データ構造 Arrays 配列 add elements remove elements indexOf includes method use for order data Objects オブジェクト in objects we define key-value-pairs creating an object using the curly brackets is called the object literal syntax because we are literally writing down the entire object content in objects, the order of the elements do not matter when we want to retrieve them use for unstructured data Object Method オブジェクト・メソッド

1.2.4. loops for loop automates repetitive tasks has three parts written like the if statement loop arrays loop inside a loop while loop can only specify the condition conclusion: the while loop does not have to depend on the counter variable 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 breaking into sub-problems

1.4. JavaScript in the browser: DOM and Events Fundamentals

1.4.1. DOM Document Object Model Structured representation of HTML documents. Allows JavaScript to access html elements and styles to manipulate them in short: the DOM is basically a connection point for html documents and JavaScript code. How it works The DOM is created as soon as the html loads and is stored in a tree structure 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 addEventListener method argument number one: type of event argument number two: event handler 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 instruct computer to do things Object-oriented Based on objects, for storing most kinds of data Multi-paradigm 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 React Angular Vue.js

2.3.2. Web applications on web servers Node.js

2.3.3. Native mobile applications React Native Ionic

2.3.4. Native desktop applications

2.4. JavaScript releases


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とは Facebookが開発 JavaScriptライブラリ(≠ ライブラリ) React ≠ SPA( Single Page Application) WebのUIを作る A JavaScript library for building User Interfaces UIは二つに分類出来る コンポーネントとは そもそも:Webの構造はコンポーネントのツリー構造になっている React apps run in the browser

4.1.2. Reactの特徴 Virtual DOM そもそも:DOMとは Reactで管理するDOM 差分描画 変更があった部分だけを書き換えてくれる JSXが使える つまりJavaScript内でhtmlっぽく書ける

4.1.3. 日本一わかりやすいReact入門#1...Reactの基礎知識

4.2. Reactの強みJSXとは

4.2.1. JSXとは JavaScript内でHTMLを簡単に記述するための言語(JavaScriptの拡張言語) Reactでは業界標準 Facebookが開発 Reactの公式ドキュメントはほぼJSXで記述 なぜ使うのか 可読性 JavaScriptではない JSXの構文をブラウザーは理解できない

4.2.2. JSXの基本文法 Reactのパッケージのインストールが必須 .jsxファイルの先頭で宣言 import React from "react" Htmlとほぼ同じ記述 (classはclassNameに) {}内に変数や関数を埋め込める {}内がJavaScriptの世界になる 変数名は全てキャメルケースで 空要素は閉じる

4.2.3. 日本一わかりやすいReact入門#2...Reactに欠かせないJSXの解説

4.3. create-react-appでの環境構築

4.3.1. create-react-appで必要なもの node 8.10以上 npm 5.6以上 インストールのためにhomebrewとnodebrewをインストール homebrewを使ってnodebrewをインストールする必要がある

4.3.2. create-react-appとは react開発環境を超簡単に構築できるツール reactを学習するのに最適な環境 なぜ create-react-app? reactに開発環境の構築は難しい トランスパイラのbabelやバンドラーのwebpackの設定が必要だから

4.3.3. create-react-appの環境の構成 src コンポーネントを作るJSファイル public HTMLファイルや設定ファイル build 本番環境用ファイル

4.3.4. コマンド集 npm run build srcとpublic内のファイルをひとつにまとめて(bundle)、buildディレクトリに出力 npm start ローカルサーバーを起動してReactを確認出来る npm run eject babelやwebpackの設定を変更したい場合のみ

4.3.5. そのた環境構築ツール Next.js サーバーサイドレンダリング Gatsby 静的ウェブサイトに最適

4.3.6. 日本一わかりやすいReact入門#3...create-react-appで環境構築しよう

4.4. コンポーネントの基本(データの受け渡しと再利用)

4.4.1. なぜコンポーネントを使うのか 再利用する為 分割統治する為 それぞれのコンポーネントは疎結合になっている 変更に強くする為

4.4.2. コンポーネントの種類 Functional Component 関数型で定義されたコンポーネント 特徴 シンプル! Class Component クラスによって定義されたコンポーネント 特徴 注意

4.4.3. propsでデータを受け渡す 親コンポーネント propsを使おう 受け渡せるデータ型 {}内に記述 文字列、数値、真偽値、配列、オブジェクト、変数等なんでも渡せる 文字列は{}なしでもOK コンポーネントを際利用しよう!

4.4.4. 日本一わかりやすいReact入門#4...コンポーネント間でデータの受け渡しと再利用をしよう

4.5. コンポーネントの状態(stateの状態と取得と変更)

4.6. BabelとWebpackとは

4.7. Reactルーターの作り方