AngularJS 4

残り文字数の表示

<form novalidate name="myForm" ng-submit="addUser()">
			<p>18+:<input type="checkbox" ng-model="user.adult" ng-true-value="adult" ng-false-value="chile"></p>
			<p>phone:<input type="radio" ng-model="user.phone" value="iphone"> iPhone</p>
			<input type="radio" ng-model="user.phone" value="android"> Android</p>
			<p>Memo:
				<textarea ng-model="user.memo" ng-maxlength="140"></textarea>{{140-user.memo.length}}
			<p><input type="submit" value="add"></p>
			<pre>{{user|json}}</pre>
		</form>

これめっちゃいい、使いたい

<form novalidate name="myForm" ng-submit="addUser()">
			<p>Color:
				<select ng-model="user.color" ng-options="'label:'+color for color in &#91;'red','blue','pink'&#93;" ng-init="user.color='red'"></select>
			</p>
			<p><input type="submit" value="add"></p>
			<pre>{{user|json}}</pre>
		</form>

AngularJS 3

<li ng-repeat="user in users" ng-controller="UserItemController">
				{{user.name|uppercase}} {{user.score}}
				<button ng-click="increment()">+1</button>
			</li>
angular.module('myapp', [])
    .controller('MainController', ['$scope', function($scope) {
        $scope.users = [
            {"name":"taguchi", "score":52.22},
            {"name":"tanaka", "score":38.22},
            {"name":"yamada", "score":11.11},
            {"name":"goto", "score":22.22},
            {"name":"kurumi", "score":58.22},
            {"name":"sakamoto", "score":81.11},
        ];
        $scope.today = new Date();
    }])
    .controller('UserItemController', ['$scope', function($scope){
        $scope.increment = function(){
            $scope.user.score++;
        };
    }]);

やっぱGoogleはリアルタイム処理とか高速処理がめちゃくちゃ強いな。会社作った時からそーなんだろうけど、何でだろう。。

<div ng-controller="MainController">
		<form name="myName" ng-submit="addUser()">
			<p>Name:<input type="text" name="name" ng-model="user.name"></p>
			<p><input type="submit" value="add"></p>
			<pre>{{user|json}}</pre>
		</form>
	</div>

フォームのバリデーションはhtml5やサーバーサイド側でもできるけど、DBに入力しない問い合わせフォームのバリデーションはangularでもいいかもね。

<form novalidate name="myForm" ng-submit="addUser()">
			<p>Name:<input type="text" name="name" ng-model="user.name" required ng-minlength="5" ng-maxlength="8">
			<span ng-show="myForm.name.$error.required">Required!</span>
			<span ng-show="myForm.name.$error.minlength">too short!</span>
			<span ng-show="myForm.name.$error.maxlength">too long!</span></p>
			<p><input type="submit" value="add"></p>
			<pre>{{user|json}}</pre>
		</form>

emailは正規表現のルールはデフォルトがあるのか、これは自分で決めたいよね。

<form novalidate name="myForm" ng-submit="addUser()">
			<p>score:<input type="number" name="score" ng-model="user.score">
			</p>
			<p>email:<input type="email" name="email" ng-model="user.email">
			<span ng-show="myForm.email.$error.email">Not valide email</span></p>
			<p><input type="submit" value="add"></p>
<p>web:<input type="url" name="url" ng-model="user.url">
			<span ng-show="myForm.url.$error.url">Not valide url</span></p>
			<pre>{{user|json}}</pre>
		</form>

AngularJS 2

<!DOCTYPE html>
<html lang="en" ng-app="myapp">
<head>
	<meta charset="UTF-8">
	<title>Angular</title>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
	<script src="myscript.js"></script>
</head>
<body>
	<h1>practice angular</h1>
	<div ng-controller="MainController">
		<p>{{users.length}} users</p>
		<ul>
			<li ng-repeat="user in users">
				{{user.name}} {{user.score}}
			</li>
		</ul>
	</div>
</body>
</html>
angular.module('myapp', [])
    .controller('MainController', ['$scope', function($scope) {
        $scope.users = [
            {"name":"taguchi", "score":52.22},
            {"name":"tanaka", "score":38.22},
            {"name":"yamada", "score":11.11}
        ];
    }]);

numberは便利だ
todayは単純にjsのdateを渡すだけです

<li ng-repeat="user in users">
				{{user.name|uppercase}} {{user.score|number:4}}
			</li>
<p>{{600 * 240| number}}</p>
<p>{{today}}</p>
<p>{{today|date: 'yyyy-MM-dd'}}</p>

filter
filterはsqlから取得する場合はwhere-byで指定する箇所だけど、データバインディングで使うところって何だろう? 
あああああああああああああ、filter:queryは検索一覧ですげー使えるじゃん。。。さすがGoogle
あれ、でもこれ、keyとvalueでmysqlからjsファイルに吐き出さないとダメってこと??まー試す価値はありそうね。

<li ng-repeat="user in users|limitTo:5">
<li ng-repeat="user in users|orderBy:'score'">
<li ng-repeat="user in users|orderBy:'-score'|limitTo:3">
<li ng-repeat="user in users|filter:query">

classのeven, oddも便利ですねー

{{$index}}{{user.name|uppercase}} {{user.score|number:4}}
{{$index+1}} {{$first}} {{$last}}{{user.name|uppercase}} {{user.score|number:4}}
<li ng-repeat="user in users" ng-class-even="'even'" ng-class-odd="'odd'">

AngularJS 1

AngularJSとは?
Googleによってossで開発されているJSフレームワーク
MVW(model-view-whatever(?))
データバインディング、依存性注入に使用できる
業務アプリのデータ送受信に向いている
Ajax, WebSocketには不向き
repo:https://github.com/angular/angular.js
web:https://angularjs.org

ってか、angularがGoogleでtypescriptがMSで、React.jsがFacebookかよ、ふざけてるなー
mvwのwhateverってなんだそりゃ、しかし、コンローラーの立ち位置は?
データ送受信なら、メッセージ機能とかは向いているか?

特徴
– HTMLテンプレート …どのframeworkも持っている
– 双方向データバインディング(画面変更なしにデータ変更) …電卓とか?
– DIによるモジュール管理 …パーツの依存性が低い dependency injection だから、名前の通り
– ルーティング機能 …どのframeworkも持っている
– Ajax通信機能 …さすがGoogle、ぶち込んできた

双方向データバインディングがキモのところっぽいですね。
入力フォームだと、メールアドレスで、ドメインと@前をつなぎ合わせたり、住所の表示などでしょうか?
双方向データバインディングもAjaxと同じ機能使ってるのかな。

<!DOCTYPE html>
<html lang="en" ng-app>
<head>
	<meta charset="UTF-8">
	<title>Angular</title>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
</head>
<body>
	<h1>practice angular</h1>
	<input type="text" ng-model="name">
	<p>hello {{name}}</p>
	<p>{{5 * 5}}</p>
</body>
</html>

React.jsでカレンダーを作ろう 5

webpack.config.jsでは、moduleの前に、outputファイルを書くらしい。

context:path.join(__dirname, "src"),
	entry: "./js/client.js",
	output: {
		path: __dirname + "/src/",
		filename: "client.min.js"
	},
	module: {
		rules: [
			{
				test: /\.css$/i,
	        	use: ['style-loader', 'css-loader'],
			},
			{
			test: /\.jsx?$/,
				exclude: /(node_modules|bower_components)/,
				use: [{
					loader: 'babel-loader',
					options: {
						presets: ['@babel/preset-react', '@babel/preset-env']
					}
				}]
		}]
	},

$ npm start

きたーーーーーーーーーーーーーーーーーーーー
stylingはmoduleのCalendar.cssを編集すれば良さそうですね。
OK、とりあえず、Caledarはこれで良し^^

React.jsでカレンダーを作ろう 4

>You may need an appropriate loader to handle this file type

githubのissueを見ると、wojtekmaj が、style-loaderを入れろ、って言ってますね。

https://github.com/wojtekmaj/react-calendar/issues/97

$ npm install –save-dev css-loader
$ npm install –save-dev style-loader

で、入れたので、
$ npm start

> .react-calendar {
| width: 350px;
| max-width: 100%;
@ ../node_modules/react-calendar/dist/entry.js 48:0-25
@ ./js/client.js

あ、webpack.config.jsに追加するのね。

rules: [
			{
				test: /\.css$/i,
	        	use: ['style-loader', 'css-loader'],
			},
			{
			test: /\.jsx?$/,
				exclude: /(node_modules|bower_components)/,
				use: [{
					loader: 'babel-loader',
					options: {
						presets: ['@babel/preset-react', '@babel/preset-env']
					}
				}]
		}]

で、再度npm start

+ 66 hidden modules
ℹ 「wdm」: Compiled successfully.

OK。あれ、何も表示されない。
なぜえええええええええええええええええええええ

React.jsでカレンダーを作ろう 3

Add @babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the ‘plugins’
と出ているので、インストールします

[vagrant@localhost react]$ npm install –save-dev @babel/plugin-proposal-class-properties


.babelrcに以下を追加

{
	"plugins": [
		"@babel/plugin-proposal-class-properties"
	]
}

$ npm start

RROR in ../node_modules/react-calendar/dist/Calendar.css 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> .react-calendar {
| width: 350px;
| max-width: 100%;
@ ../node_modules/react-calendar/dist/entry.js 48:0-25
@ ./js/client.js
ℹ 「wdm」: Failed to compile.

何いいいいいいいいいい
諦めんぞ、俺は。

React.jsでカレンダーを作ろう 2

さて、React.js + webpack + babelの環境ができたので、カレンダーを作っていきます。

# react-calendar のインストール
$ npm install react-calendar

jsはこうかな。

import React, { Component } from "react";
import ReactDOM from "react-dom";
import Calendar from 'react-calendar';

class Layout extends Component {
	state = {
		date: new Date(),
	}

	onChange = date => this.setState({ date })

	render(){
		return (
			<div>
				<Calendar
					onChange={this.onChange}
					value={this.state.date}
				/>
			</div>
		);
	}
}

const app = document.getElementById('app');
ReactDOM.render(<Layout/>, app);

$ npm start

ERROR in ./js/client.js
Module build failed (from ../node_modules/babel-loader/lib/index.js):
SyntaxError: /home/vagrant/react/src/js/client.js: Support for the experimental syntax ‘classProperties’ isn’t currently enabled (6:8):

4 |
5 | class Layout extends React.Component {
> 6 | state = {
| ^
7 | date: new Date(),
8 | }
9 |
Add @babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the ‘plugins’ section of your Babel config to enable transformation

ん? これが必要?

vagrantでwebpack-dev-server

built-in serverがwebpackにある??

[vagrant@localhost react]$ ./node_modules/webpack-dev-server/bin/webpack-dev-server.js –content-base src –mode development
ℹ 「wds」: Project is running at http://0.0.0.0:8080/
ℹ 「wds」: webpack output is served from /
ℹ 「wds」: Content not from webpack is served from /home/vagrant/react/src
ℹ 「wdm」: Hash: f58893047107846a01ed
Version: webpack 4.41.2
Time: 1464ms
Built at: 2019-11-20 18:36:59
Asset Size Chunks Chunk Names
client.min.js 1.43 MiB main [emitted] main
Entrypoint main = client.min.js
[0] multi ../node_modules/webpack-dev-server/client?http://0.0.0.0:8080 ./js/client.js 40 bytes {main} [built]
[../node_modules/ansi-html/index.js] 4.16 KiB {main} [built]
[../node_modules/html-entities/index.js] 231 bytes {main} [built]
[../node_modules/react-dom/index.js] 1.33 KiB {main} [built]
[../node_modules/react/index.js] 190 bytes {main} [built]
[../node_modules/webpack-dev-server/client/index.js?http://0.0.0.0:8080] ../node_modules/webpack-dev-server/client?http://0.0.0.0:8080 4.29 KiB {main} [built]
[../node_modules/webpack-dev-server/client/overlay.js] 3.51 KiB {main} [built]
[../node_modules/webpack-dev-server/client/socket.js] 1.53 KiB {main} [built]
[../node_modules/webpack-dev-server/client/utils/createSocketUrl.js] 2.89 KiB {main} [built]
[../node_modules/webpack-dev-server/client/utils/log.js] 964 bytes {main} [built]
[../node_modules/webpack-dev-server/client/utils/reloadApp.js] 1.59 KiB {main} [built]
[../node_modules/webpack-dev-server/client/utils/sendMessage.js] 402 bytes {main} [built]
[../node_modules/webpack-dev-server/node_modules/strip-ansi/index.js] 161 bytes {main} [built]
[../node_modules/webpack/hot sync ^\.\/log$] ../node_modules/webpack/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built]
[./js/client.js] 2.69 KiB {main} [built]
+ 29 hidden modules
ℹ 「wdm」: Compiled successfully.

あれ、vagrantでポートフォワーディングしているipを叩いても、ダメだ。
192.168.34.10:8080
なぜ?

webpack.config.jsに以下を追加

devServer: {
    contentBase: __dirname + '/public',
    host: "0.0.0.0"
	},

phpのビルトインより楽そうですね^^

npmでReact.jsの環境を作る

react-calendarがnpmなので、npmで環境を作ります。

$ npm init
$ npm install –save-dev webpack webpack-cli webpack-dev-server
$ npm install –save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader

ここまでは、これまでやってきた通り

$ npm install –save-dev react react-dom
npm ERR! code ENOSELF
npm ERR! Refusing to install package with name “react” under a package

?? package.jsonのnameがreactで同じだからインストールできないとのこと
“name”: “react1” に変更して、再度実行

$ npm install –save-dev react react-dom

続いてwebpackの設定

var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path = require('path');

module.exports = {
	context:math.josin(__dirname, "src"),
	entry: "./js/client.js",
	module: {
		rules: [{
			text: /\.jsx?$/,
				exclude: /(node_modules|bower_components)/,
				use: [{
					loader: 'babel-loader',
					options: {
						presents: ['@babel/preset-react', '@babel/preset-env']
					}
				}]
		}]
	},
	output: {
		path: __dirname + "/src/",
		filename: "client.min.js"
	},
	plugins: debug ? [] : [
		new webpack.optimize.OccurrenceOrderPlugin(),
		new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false}),
	]
};

./src/index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>React</title>
	<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.6/cosmo/bootstrap.min.css" type="text/css" rel="stylesheet"/>
</head>
<body>
	<div id="app"></div>
	<script src="client.min.js"></script>
</body>
</html>

ここまでで、Reactの環境構築完了!?

import React from "react"
import ReactDOM from "react-dom"

class Layout extends React.Component {
	render(){
		return (
			<h1>Welcome</h1>
		);
	}
}

const app = document.getElementById('app');
ReactDOM.render(<Layout/>, app);

[vagrant@localhost react]$ webpack –mode development
Hash: 12eaf7dc67869ad64caf
Version: webpack 4.41.2
Time: 1874ms
Built at: 2019-11-20 15:39:17
Asset Size Chunks Chunk Names
client.min.js 1.08 MiB main [emitted] main
Entrypoint main = client.min.js
[./js/client.js] 2.69 KiB {main} [built]
+ 11 hidden modules

何言いいいいいいいいいいいいいい