Rust複合型とコレクション

### 配列

fn main() {
	let data = [12, 34, 56, 78, 90];
	let mut ans = 0;
	for item in data {
		ans += item;
	}
	println!("データの合計は、{}です。", ans);
}

配列の型は[型;個数]となる。

### タプル

fn main() {
	let taro = ("Taro", 39, true);
	let hanako = ("Hanako", 28, false);
	println!("{:?}", taro);
	println!("{:?}", hanako);
	println!("name:{}, {}", taro.0, hanako.0);
	println!("age:{}, {}", taro.1, hanako.1);
	println!("male?:{}, {}", taro.2, hanako.2);
}

### ベクター型
同じ型の値を多数保管
空のVecを作成: Vec::new()
初期値を持つvecを作成: vec![値1, 値2, …]
値を取り出す: [番号], .get(番号), .get(番号).unwrap()
値を追加: .push(値)

fn main(){
	let mut data = Vec::new();
	data.push(123);
	data.push(456);
	data.push(789);
	println!("0:{}, 1:{}, 2:{}", data[0], data[1], data.get(2).unwrap());
}

### Vecの値を繰り返し処理する
ベクターはコレクションである

fn main(){
	let data = vec![123, 456, 789];
	let mut result = 0;
	for item in data {
		result += item;
	}
	println!("データの合計は、{}です。", result);
}

途中に値を挿入したい場合はinsertを使う
.insert(番号、値)

fn main(){
	let mut data = vec![123, 456, 789];
	data.remove(1);
	data.insert(2, 100);
	println!("{:?}", data);
}

### 名前で値を管理するHashMap
std::collectionsというモジュールで管理されている
use std::collections::HashMMap;

HashMapの作成:HashMap::new();
値を追加: .insert(名前, 値);
値を削除: .remove(名前);

use std::collections::HashMap;

fn main(){
	let mut map = HashMap::new();
	map.insert(String::from("first"), 123);
	map.insert(String::from("second"), 456);
	map.insert(String::from("third"), 789);
	map.remove("second");
	println!("{:?}", map);
}

HashMapは順不同、テキストリテラルではなくStringでテキストを指定
.get(名前).unwrap();

use std::collections::HashMap;

fn main(){
	let mut map = HashMap::new();
	map.insert(String::from("first"), 123);
	map.insert(String::from("second"), map["first"] * 2);
	map.insert(String::from("third"), map.get("first").unwrap() + map.get("second").unwrap());

	println!("{:?}", map);
}

HashMapの繰り返し処理
L for(ky, val) in map

use std::collections::HashMap;

fn main(){
	let mut map = HashMap::new();
	map.insert(String::from("first"), 123);
	map.insert(String::from("second"), 456);
	map.insert(String::from("third"), 789);
	let mut result = 0;
	for (ky, val) in map {
		println!("{}: {}.", ky, val);
		result += val;
	}

	println!("total: {}.", result);
}

### String型のテキスト

fn main() {
	let s1 = String::new();
	let s2 = String::from("Hello");
	let s3 = "World";
	let s4 = s1 + &s2 + &s3;
	println!("{}", s4);
}
fn main() {
	let mut s1 = String::new();
	s1.push_str("Hello");
	s1.push_str("World!");
	println!("{}", s1);
}
fn main() {
	let mut s1 = String::from("Hello,World!");
	s1.insert_str(6, " Rust ");
	s1.insert(7, '*');
	s1.insert(12, '*');
	s1.remove(5);
	println!("{}", s1);
}

### 文字の部分取得
レンジを使って文字列の中から一部分だけ取り出せる

fn main() {
	let s1 = String::from("Hello,Rust World!");
	let s2 = &s1[0..5];
	let s3 = &s1[6..10];
	let s4 = &s1[11..16];
	let s5 = String::new() + s4 + s3 + s2;
	println!("{}", s5);
}

Rust制御フロー

if文

fn main(){
	let num = 1234;
	if num % 2 == 0 {
		println!("{}は偶数です。", num);
	} else {
		println!("{}は奇数です。", num);
	}
}

比較演算式は、==, !=, <, <= など else ifによる条件式 [code] fn main(){ let num = 123; if num % 5 == 0 { println!("{}は5で割れます。", num); } else if num % 4 == 0 { println!("{}は4で割れます。", num); } else if num % 3 == 0 { println!("{}は3で割れます。", num); } else if num % 2 == 0 { println!("{}は2で割れます。", num); } else { println!("{}はうまく割れませんでした。", num); } } [/code] [code] fn main(){ let num:u8 = 7; match num { 1 => println!("{}月は、正月です。", num), 2 => println!("{}月は、節分です。", num), 3 => println!("{}月は、ひな祭りです。", num), 4 => println!("{}月は、入学式です。", num), 5 => println!("{}月は、ゴールデンウィークです。", num), 6 => println!("{}月は、梅雨です。", num), 7 => println!("{}月は、夏休みです。", num), 8 => println!("{}月は、お盆休みです。", num), 9 => println!("{}月は、新学期です。", num), 10 => println!("{}月は、ハロウィンです。", num), 11 => println!("{}月は、ブラックフライデーです。", num), 12 => println!("{}月は、クリスマスです。", num), _ => println!("{}月という月はありません。", num) } } [/code] 複数の値を入力できるよう記述も可能 ### loop式 [code] fn main() { let max = 100; let mut ans = 0; let mut count = 1; loop { if count > max { break; } ans += count; count+= 1; } println!("1から{}までの合計は、{}です。", max, ans); } [/code] "+="は代入演算式 ### while式 [code] fn main() { let max = 100; let mut ans = 0; let mut count = 1; while count <= max { ans += count; count+= 1; } println!("1から{}までの合計は、{}です。", max, ans); } [/code] ### for [code] fn main() { let max = 100; let mut ans = 0; for item in 1..=max { ans += item; } println!("1から{}までの合計は、{}です。", max, ans); } [/code] [code] fn main() { let data = [12, 34, 56, 78, 90]; let mut ans = 0; for item in data { ans += item; } println!("データの合計は、{}です。", ans); } [/code]

Rust基礎

### Rustのバージョン確認
$ rustc –version
rustc 1.57.0 (f1edd0429 2021-11-29)

### Rustのアップデート
$ rustup update

### プロジェクトの作成
$ cargo new sammple_rust_app

### Rustの型
主に整数、実数、論理、文字などが用意されている

### 整数型
i8, u8, i16, u16, i32, u32, i64 u64, isize, usize
※符号付き、なしが用意されている。サイズはメモリサイズで、小さい方がメモリを消費しない
※可変はプログラムのプラットフォームの値
特別な理由がなければi32を使用する
浮動小数の型はf32, f64がある。f32は特別な理由がない限り使わない

### 文字
char型: 1文字の型、シングルクォート記号をつける
str型: 一般的なテキスト型、ダブルクォート記号をつける
bool型: true or false
スカラ型(1つの値)とベクター型(動的に値を増減できる)

### 値の演算
– 型の変換はas、テキストの演算は+

### 変数の型指定
let 変数: 型 = 値;

fn main(){
	let x = 100;
	let y:i64 = 200;
	let z = x + y;
	println!("{}+{}={}", x, y, z);
}

“!”はマクロを指す
mutによる可変設定

fn main(){
	let x = 100;
	let y:i64 = 200;
	let mut z = x + y;
	println!("{}+{}={}", x, y, z);
	z = x - y;
	println!("{}-{}={}", x, y, z);
}

変数のシャドーイングという機能を使うと、新たに変数を定義することができる
常に変わらない変数はconstを使って宣言する。rustは定数は大文字で記述する

fn main(){
	const X:i32 = 100;
	const Y:i32 = 200;
	const Z:i32 = X + Y;
	println!("{}+{}={}", X, Y, Z);
}

Reactの環境構築 & AntDesign

$ node –version
v16.13.2
$ npx create-react-app react_app
$ yarn start
http://192.168.56.10:3000/
=> 問題なければstopする

ant designもインストール
$ npm install antd
$ npm audit fix –force

srcディレクトリ内で作業
App.js

function App(){
  return (
      <div className='App'>
        <header className='App-header'>
        </header>
      </div>
    )
}
import {
	BellFilled,
	CaretDownOutlined,
	FormOutlined,
	UserOutlined,
} from '@ant-design/icons/lib/icons';
import { Avatar, Col, Input, Row, Typography } from 'antd';

function App(){
  return (
      <div className='App'>
        <header className='App-header'>
        	<div>
        		<Title>Hpscript</Title>
        		<div>
        			<CaretDownOutlined />
        			<Input placeholder='キーワードを入力' />
        		</div>
        		<div>
        			<div>
        				<FormOutlined />
        				<Text>
        					投稿する
        				</Text>
        			</div>
        			<div>
        				<BellFilled />
        			</div>
        			<Avatar size='large' icon={<UserOutlined />} />
        		</div>
        	</div>
        </header>
      </div>
    );
}

export default App;

src/App.js
Line 14:12: ‘Title’ is not defined react/jsx-no-undef
Line 22:14: ‘Text’ is not defined react/jsx-no-undef

import { Breadcrumb } from 'antd';
import React from 'react';

const App: React.FC = () => (
	<Breadcrumb>
	    <Breadcrumb.Item>Topページ</Breadcrumb.Item>
	    <Breadcrumb.Item>
	      <a href="">ページタイトルA</a>
	    </Breadcrumb.Item>
	    <Breadcrumb.Item>
	      <a href="">ページタイトルB</a>
	    </Breadcrumb.Item>
	    <Breadcrumb.Item>ページタイトルC</Breadcrumb.Item>
	</Breadcrumb>
);

export default App;

Datepicker

import React from 'react';
import { DatePicker } from 'antd';

const App = () => {
	return <DatePicker />;
}

export default App;

First Example

import React from 'react';
import { Button, Space, DatePicker, version } from 'antd';

const App = () => (
	<div style={{padding: '0 24px '}}>
	<h1>antd version: {version}</h1>
	<Space>
		<DatePicker />
		<Button type="primary">Primary Button</Button>
	</Space>
	</div>
)

export default App;

getting start

import React, { useState } from 'react';
import { createRoot } from 'react-dom/client';
import { DatePicker, message } from 'antd';
import './index.css';

const App = () => {
  const [date, setDate] = useState(null);
  const [messageApi, contextHolder] = message.useMessage();
  const handleChange = (value) => {
    messageApi.info(`Selected Date: ${value ? value.format('YYYY-MM-DD') : 'None'}`);
    setDate(value);
  };
  return (
    <div style={{ width: 400, margin: '100px auto' }}>
      <DatePicker onChange={handleChange} />
      <div style={{ marginTop: 16 }}>
        Selected Date: {date ? date.format('YYYY-MM-DD') : 'None'}
      </div>
      {contextHolder}
    </div>
  );
};

createRoot(document.getElementById('root')).render(<App />);
export default App;
import React, { useState } from 'react';
import { createRoot } from 'react-dom/client';
import { DatePicker, message, Alert } from 'antd';
import './index.css';

const App = () => {
  const [date, setDate] = useState(null);
  const [messageApi, contextHolder] = message.useMessage();
  const handleChange = (value) => {
    messageApi.info(`Selected Date: ${value ? value.format('YYYY-MM-DD') : 'None'}`);
    setDate(value);
  };
  return (
    <div style={{ width: 400, margin: '100px auto' }}>
      <DatePicker onChange={value => this.handleChange(value)} />
      <div style={{ marginTop: 20 }}>
      	<Alert message="Selected Date" description={date ? date.format('YYYY-MM-DD') : 'None'} />
      </div>
      {contextHolder}
    </div>
  );
};

createRoot(document.getElementById('root')).render(<App />);
export default App;
import { ConfigProvider } from 'antd';
import React from 'react';


const App: React.FC = () => (
	<ConfigProvider theme={{ token: { colorPrimary: '#00b96b'} }}>
		<MyApp />
	</ConfigProvider>
);

export default App;

Chat-GTP APIをライブラリを使って試そう

OpenAIのコミュニティにライブラリ一覧がある
https://platform.openai.com/docs/libraries/community-libraries

今回はorhanerday/open-aiを試します
https://github.com/orhanerday/open-ai

まず、composerでパッケージをインストールします
$ curl -sS https://getcomposer.org/installer | php
$ php composer.phar require orhanerday/open-ai

JavaScriptでjsonを表示する

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
	<ul id="list">
<!-- ここに出力します -->
	</ul>
	<script>
		$(function(){
			json = "./list.json";
			target = $("#list");
			$.getJSON(json, function(data, status){
				for(var n in data){
					var text = '<li>';
					if (data[n].url){
						line = '<a href="'+data[n].url+'" target="_blank"><span>'+data[n].name+'</span></a>';
					} else {
						line = '<i><span>'+data[n].name+'</span></i>';
					}
					text = text+line+'</li>';
					$(target).append(text);
				}
			})
		})
	</script>
</body>
</html>

これは分かり易いですね。

チャット返答のJavaScript側の処理を考える

チャットの返答前に処理一覧を表示させたいので、Promiseで以下のように書ければ良い

	console.log("処理開始");

	new Promise((resolve, reject)=> {
		console.log("送信者のメッセージをDBへインサート処理");
		list();
		setTimeout(function(){
			resolve();
		}, 2000);
	}).then(function(value){
		console.log("API回答メッセージをDBへインサート処理");
		list();
	}).catch((data) => console.log(data)
	).finally(() => console.log("処理終了"));

	async function list(){
		console.log("DBからリストを表示");
	}

あとは(1)JavaScriptからPHP側にデータをどのように送るか、(2)DBからデータを取得するかを考える

JavaScript Promiseとは

Promiseは処理が問題なく完了すればresolve、反対に問題があればrejectを呼び出してメッセージを表示
コールバックとは、ある関数へ別の関数を渡すこと

sampleFunction1(function(data1){
	sampleFunction2(function(data2){
		// 処理
	})
})
	var sample = new Promise(function(resolve, reject){
		setTimeout(function(){
			resolve();
		}, 1000);
	});

	sample.then(function(value){
		console.log("Promise成功!");
	});

	console.log("先に出力");

Promiseの処理を連結させるものをchainという

JavaScriptの非同期処理

setTimeoutを用いた非同期処理

		console.log(1);
		setTimeout(()=> console.log(2), 5000);
		console.log(3);

1->3->2の順番で処理される

		const sleep = (second) => {
			const startTime = new Date();
			while (new Date() - startTime < second);
			console.log("done sleep");
		}

		const button = document.querySelector("button");

		button.addEventListener("click", () => console.log("clicked"));

		sleep(5000)

処理される順番 : setTimeout実行中に次のタスクが実行される

		const first = () => {
			setTimeout(() => console.log("task1 done"), 2000);
			console.log("function frist done");
		}

		const second = () => console.log("function second done");

		first();
		second();

### Promiseとは?
Promiseとは非同期処理をより簡単かつ可動性が上がるように書けるようにしたJavaScriptのオブジェクト
Promiseは3つの状態がある
– pending: 非同期処理の実行中の状態を表す
– fulfilled: 非同期処理が正常終了した状態を表す
– rejected: 非同期処理が異常終了した状態を表す

new Promise(

).then(

).catch(

).finally(
);

引数としてコールバック関数をとる

new Promise((resolve, reject) => {

}).then(

).catch(

).finally(

);

### resolve
Promiseの状態がfulfilled(正常終了)になったらresolveが実行される
resolveが実行された場合は、thenメソッドが実行される
thenメソッドが実行された場合catchメソッドはm無視され、最後にfinallyメソッドが実行される

new Promise((resolve, reject) => {
	resolve("hoge");
}).then((data)=>console.log(data)

).catch(

).finally(()=>console.log("finally")

);

### reject
Promiseの状態がrejectedになったらrejectが実行される
rejectはPromise内のコールバック実行中に何らかのエラーが発生しそれをPromiseに通知するために使用する関数
rejectが実行される場合はcatchメソッドのコールバック関数が実行される

new Promise((resolve, reject) => reject("fuga")
.then(
).catch((data)=> console.log(data))
.finally(()=>console.log("finally")
);

Promiseオブジェクト内の同期・非同期処理の関係

new Promise((resolve, reject) => {
 // 同期処理
}).then(
 // resolveの実行を待って非同期処理
).catch(
 // rejectの実行を待って非同期処理
).finally(
 // resolveかrejectの実行を待って非同期処理
);
	new Promise((resolve, reject) => {
	 console.log("Promise");
	  resolve();
	}).then(() => console.log("then"));

	console.log("global end");

Promiseオブジェクトを使った並列処理
– Promise.all => 並列処理している全てが完了したら後続処理に続く

	const sleep = (val) => {
		return new Promise((resolve) => {
			setTimeout(() => {
				console.log(val++);
				resolve(val);
			}, 1000);
		});
	};

	Promise.all([sleep(0), sleep(1), sleep(2)]).then(() => console.log("end"));

AsyncとAwait
AsyncとAwaitはPromiseを更に直感的に書けるようにしたもの

– Async
Asyncを使って宣言された関数はPromiseオブジェクトを返却する
関数宣言の先頭にAsyncがついていたらPromiseオブジェクトがreturnされる。thenメソッドにつなげられる。

– Await
AwaitはPromiseを返却する関数の非同期処理が終わるのを待つ記述
Awaitで受けられるものはPromiseのインスタンス

	const sleep = (val) => {
		return new Promise((resolve) => {
			setTimeout(() => {
				resolve(val);
			}, 1000);
		});
	};

	async function init() {
		console.log(await sleep(0));
	}

	init();

fetchという関数
fetchを使うことでサーバからデータを取得できる

	fetch("")
		.then((response) => {
			return response.json();
		})
		.then((json) => {
			console.log(json);
		});

処理に時間がかかるデータベースへの挿入とリロード処理を同時実行したい

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<?php
		$rel = $_GET['reload'];
		echo $rel;
		if($rel == 1) {
			echo ($_SERVER['PHP_SELF'].'?reloaded' .'<br/>');
			sleep(1);
			echo '<script type="text/JavaScript"> location.href = "/test.php"</script>';
			
		} else {
			echo ($_SERVER['PHP_SELF'].'?reloaded2' .'<br/>');

		}
		
	?>
	<a href="test.php?reload=1">リロード</a>
</body>
</html>

リロードしたら処理が更新されてしまうから、非同期で取得、送信したい。