20230619_変数定義の方法

• var
  関数スコープ
  再定義可能
  巻き上げが起こる
  
• let
  関数スコープ
  再定義可能
  巻き上げが起こらないので、前方に定義されていないとエラーとなる
  
• const
  関数スコープ
  再定義可能
  巻き上げが起こらないので、前方に定義されていないとエラーとなる
  

通常、これまで、varを使っていたところは、letを使いましょう

20230619_undefinedとは

undefined は 変数自体は定義されているけど、中身が定義されていない状態

20230619_TypeScript_環境インストール

まず、node.js をインストールする

次にTypeScriptをnode.jsのnpm機能を使ってコマンドプロンプトからインストールする

npm install -g typescript

20230619_TypeScript_TypeScriptで書かれたソースの変換

TypeScriptの文法で書かれたソースは、JavaScriptエンジンで解釈できるように変換する必要がある。
拡張子 ts は TypeScript で 記述されたものを指す
jsに変換するには、tsコマンドを用いる。main.js が生成される。

tsc main.ts

20230619_TypeScript_用意されている変数の型

タイプの別名定義もできるよ

type Name = string;		//Nameはstring型の別名
type Mail = string;		//Mailはstring型の別名
type Age = number;		//Ageはstring型の別名

20230619_TypeScript_関数の型

TypeScriptの関数は、基本的な部分はJavaScriptと同じです。
functionキーワードを使い、関数名と引数を記述して定義をします。 引数、戻り値にタイプが指定できる。

function calc(n:number):number {
	let total:number = 0;
	for(var i:number = 1;i <= n;i++){ 
		total +=i; 
	} 
	return total; 
} 

let num:number=calc(123); 
document.write(num.toString());

引数の省略もできる

function calc(arg1?:number):number {
	if(arg1){
		return 0;
	}else{
		return arg1++;
	}
} 

document.write(number=calc().toString());	//->0
document.write(number=calc(5).toString());	//->6

引数の省略時の初期値設定もできる

function calc(arg1=10:number):number {
	return arg1++;
} 

document.write(number=calc().toString());	//->11
document.write(number=calc(5).toString());	//->6

可変変数もできる

function 関数 (...変数 : タイプ[]) {
    if ( 変数 ){
        変数の配列を処理する……
    }
}

例
function fx2(...arg: number[]): number {
 // function fx2(...arg:Array): number {  // <--このように書いても同じ
    let r: number = 0
    for (let i = 0; i < arg.length; i++) {
        r = r + arg[i]
    }
    return r
}

console.log(fx2(1, 2, 3))	//-> 6 

ジェネリック型(総称型)も使える

function fx3(...arg: Array): T {
	let res:any;	//any:なんでも型
	switch (typeof arg[0]) {
		case 'number':
			res = 0;
			break;
		case 'string':
			res = ''
			break;
		default:
			return res;
	}
	for (let i = 0; i < arg.length; i++) { 
		res +=arg[i]; 
	} 
	return res; 
} 
console.log(fx3(1, 2, 3))           //-> 6
console.log(fx3("1", "2" , "3" ))   //-> "123"

オーバーロード
引数の種類毎に関数を切って、実装関数はany型で受け取る方式

function fx4(arg:string):string;
function fx4(arg:number):string;
function fx4(arg:any):string {
	switch (typeof (arg)) {
	case 'number':
		return (arg + 100).toString();
		break;
	case 'string':
		return (arg + 100).toString();
		break;
	}
	return "";
};

console.log(fx4(10,))    //-> 110
console.log(fx4("10"))   //-> "10100"

20230619_クラス定義

ES6からClass構文で実装できる

class MyName{
	//プロパティ
	_name
	//コンストラクタ
	constructor(name){
		this._name = name
	}
	setName(name){
		this._name = name
	}
	getName(){
		return this._name
	}
}

let myName = new MyName("TARO")
console.log(myName.getName())   //->"TARO"
myName.setName("JIRO")
console.log(myName.getName())   //->"JIRO"
console.log(myName._name)       //->"JIRO" 普通に実装すると、スコープという概念が無くすべてpublicなので、見えてしまう

private は、TypeScriptでしか使えない

ちなみに、TypeScript版

class MyName {
	//プロパティ
	_name:string
	//コンストラクタ
	constructor(name:string) {
		this._name = name
	}
	setName(name:string) {
		this._name = name
	}
	getName():string {
		return this._name
	}
}

let myName:MyName = new MyName("TARO")
console.log(myName.getName())   //->"TARO"
myName.setName("SABURO")
console.log(myName.getName())   //->"SABURO"

console.log(myName._name)       //->"SABURO"

継承もできる

class Oya {
	_name
	constructor(name) {
		this._name = name
	}
	getName(){
		return this._name
	}
}
class Ko extends Oya{
	_age
	constructor(name,age){
		super(name)
		this._age = age
	}
	getAge(){
		return this._age
	}
}

const ko = new Ko("TARO",12)
console.log(ko.getName())   //->"TARO"
console.log(ko.getAge())    //->12 

TypeScriptなら多態性も実装できる（子側でオーバーライド）

class Oya {
	_age:number
	constructor(age:number) {
		this._age = age
	}
	getAge(): number {
		return this._age
	}
}
class Ko extends Oya {
	constructor(age: number) {
		super(age)
	}
	getAge(): number {
		return this._age * 2
	}
}

const oya:Oya = new Ko(12)	//子のインスタンスを親型で受けている
console.log(oya.getAge())	//子側のメソッドが走って、24を返す

インターフェイスの実装 (TypeScriptで)

interface iAge {
	age:number
}
interface iName {
	name: string
}

class Human implements iAge,iName{
	age: number
	name:string
	constructor(age:number,name:string){
		this.name = name
		this.age = age
	}
}

const humanA:Human = new Human(12,"TARO")
const dataAge:iAge = humanA;
const dataName:iName = humanA;
console.log(dataAge.age)    //-> 12
console.log(dataName.name)  //-> "TARO" 

20230619_== ===の違い

今更ながらの、復習
違いを一言でいうと、===は、型も同じか？
文字の"1"と、数値の1 は ==は真だが、===は偽になる。

オジェクトの場合、内容が同じでも別のインスタンスならば、==でも===でも偽になる。

20230720_Reactとは

Reactとは、WebサイトやWebアプリのUI部分を開発する際に活用するJavaScriptライブラリ

node.jsがインストールされていれば、容易に作れる

npx create-react-app my-app
cd my-app
npm start

ネットのノウハウを見ていくと、上記で生成されたsrc配下のソースを改変して試していくパターンが多い

20230707_React_シンプルなサンプル

create-react-appを行い、
src配下のApp.jsを以下のように書き換える

拡張子jsである。Appという関数が <p>Hello!</p> というタグを返しているが、文字列となっていないのがミソ。
これ、タグを直接書ける、JSXというものらしい。
ReactはUIを担うフレームワークである事からもjsxの構文で書くことが多いらしい
JavaScriptはJSX構文を直接処理できない。create-react-app で環境構築を行うと、Babel という機能が有効になっているようで jsx構文をjs構文に翻訳してくれているらしい。

return ( "<p>Hello!</p>" )と書けば <p>Hello!</p> が表示されるし
return ( <abc/> ) とかけば タグとして <abc></abc> が 出力される（ブラウザ上はブランク）

ただしjsx構文には規則があり、タグは小文字で書かなければならないらしい。

20230707_React_複数のタグを返したいとき

上記はエラーになってしまう。Reactのコンポーネントの返り値は一つのタグで囲まれていなければならない。
divタグで囲っても良いが、余分なタグが挟まってしまうのもよろしくないので空タグで囲むと良いらしい

20230707_React_変数値、関数の利用

React関数の return 文のタグに、変数や関数の戻り値を返えしたい場合は{～}を用いれば良いようだ

タグの ｛ ｝中は、js構文そのままと解釈されるようだ。

20230707_アロー関数

最近のJavaScriptで良く出てくるアロー関数。忘れやすいのでメモしておく

基本形
function fx1(i){return ++i;}
↓
無名関数にしてみた
const fx1 = function(i){return ++i;}
↓
アロー関数にすると function() が ()=> に置き換えできる
const fx1 = (i)=>{return i++;}
↓
引数が一つなら、（ ）を省略できる
const fx1 = i => {return i++;}
↓
関数の中身が、１つのreturn文の時はブロックと「return」を省略できる
const fx1 = (i => i++;)

引数が二つの時の最小形
const fx1 = (x,y)=>(x+y)

アロー関数は単なるfunctionのシンタックスシュガーではなく、thisの違いなどなどがあるらしい。

20230707_bindについて

メソッドのthisを指定できる

メソッドのthisを指定させるときに使用する

20230713 JSONからの項目の取り出し