「Web技術」タグアーカイブ

読む
コードリーディングで理解を深めて実装のイメージを持つ
ある程度理解しない内は作業に入らない。なぜを解決さす

実装する
コード読んでいればここのフェーズは難しくないと思っている

挑戦する
新たな分野に挑戦する。
出会っておくと今度合ったとき取っつきやすくなる

を繰り返す

【React × Flux × ES6】LINE風チャット

fafa
話は表題と違うのですが、
小さい頃よく母親の作る料理がどこか一箇所凝ったものが混ざってて、
普通の味噌汁でいいのにしめじ入ってたり、
普通の魚でいいのに苦手な野菜をあんかけにして乗っけてきたり、
普通の白ごはんでいいのに栗入れてきたり、、
普通のカレーやハンバーグでいいのにと思ってたのですが、そのカレーすらも茄子が入ってたり、、
よく買い物から帰ってきたスーパーの袋に小さい紙切れ入ってて、
鮮魚売り場で取ってきたレシピなんですよ、
「今度これ、作るのか、、勘弁してくれ、、」て。
今では「美味しいじゃん!」と思えるかもしれませんが、
小学生ですから舌もこえてないですよ。

失礼しました。
RactとFlux周りを勉強しているうちにじゃぁ実装しながら学んだ方がいいのではないか、
と思いました。
ここから状態をどう分けるかをやらなくちゃいけないですね。 コードは
こちら

こちら
です。よかったら

【 併せて読みたい 】

【React】Reactの動きを理解したい人の為の最小サンプル

【REACT入門】過去のREACT初心者の自分にREACTのPROPSとSTATEの違いを簡単に説明してあげたい

【REACT × ES6 × FLUX】を手っ取り早く学びたい人の為にサンプル作ったよ【3の倍数と3が付くときだけ猫になるCOUNTER】

他のReact記事

フロントエンド記事

React with ES6

getting start

https://jsbin.com/fuyedekaga/1/edit?html,js,console,output
Reactrepogtory
html
[html]
<!DOCTYPE html>
<html>
<head>
<script src="//fb.me/react-0.14.3.js"></script>
<script src="//fb.me/react-dom-0.14.3.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="fafa"></div>
</body>
</html>
[/html]

javascript
[javascript]
class HelloMessage extends React.Component {
constructor(props){
super(props);
}
render(){
return (<div>Hello {this.props.name}</div>
);
}
}
React.render(<HelloMessage name="kenji" />, document.getElementById("fafa"));
[/javascript]

Cone of volume using the OOP of php

using accesser method,property,

[php]

<?php
class Cone1{
const PI = 3.14;
private $radius;
private $height;

public function setRadius($base){
$this->radius = $base;
}
public function setHeight($height){
$this->height = $height;
}
public function getRadius(){
return $this->radius;
}
public function getHeight(){
return $this->height;
}
///
public function getVolume(){
$area = pow($this->radius,2) * self::PI;
return $area * $this->height / 3;
}
}

?>
[/php]
[html]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>The volume of the cone</title>
</head>
<body>
<h2>use OOP of PrivateAccesser</h2>
<p>
<?php
require_once 'Cone1.php';
$obj = new Cone1();
$obj->setRadius(10);
$obj->setHeight(50);
print "The bottom surface of the radius: {$obj->getRadius()}" . '<br>';
print "The height of the cone: {$obj->getHeight()}" . '<br>';

    print &quot;The volume of the cone: {$obj-&gt;getVolume()}&quot;;
   ?&gt;
&lt;/p&gt;

</body>
</html>
[/html]

[javascript]
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<script src="https://cdn.rawgit.com/lodash/lodash/3.0.1/lodash.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<script>

function unsplat(fun){
return function(){
return fun.call(null, _.toArray(arguments));
};
}
var joinElements = unsplat(function(array){ return array.join('') });
var view = joinElements(1,2,90,"eee","ll");
console.log(view);

function lameCSV(str){
return .reduce(str.split("\n"), function(table, row){
table.push(
.map(row.split(","), function(c){return c.trim()}));
return table;
}, []);
};

var peopleTable = lameCSV("name,age,hair\nMerble,35,red\nBob,64,blonde");
console.log(peopleTable)

console.log(_.rest(peopleTable).sort());

var lyrics = [];
for(var bottles = 5; bottles > 0; bottles--){
console.log(bottles)
lyrics.push(bottles + "本のビールが残っている");
lyrics.push(bottles + "本のビール");
lyrics.push("ひとつ取って、隣に回せ");
if(bottles > 1 ){
lyrics.push((bottles - 1) + "本のビールが残っている");
}else {
lyrics.push("もうビールは残っていない");
}

}
console.log(lyrics);
</script>
</body>
</html>
[/javascript]

[java]
pacage jp.co.example.java15;

public class Main {
public static void main(String[] args){
for (int testNumber = 2; testNumber <= 100; testNumber++){
boolean isPrimeNumber = true;//mathtic
for (int i = 2; i < testNumber; i++) {
if(testNumber % i == 0) {
isPrimeNumber = false;
break;
}
}

  if (isPrimeNumber){ //functic
    System.out.println(testNumber);
  }
}

}
}


point
What is code ,what to do
be sure function


watch out valuable
boolean isPrimeNumber
int i
int testNumber

public class Main {
public static void main(String[] args){
for (int testNumber = 2; testNumber <= 100; testNumber++){
if (isPrimeNumber){
System.out.println(testNumber);
}
}
}
private static boolean isPrimeNumber(int testNumber){
for (int i = 2; i < testNumber; i++){
if(testNumber % i == 0){
return false;
}
}
return true;
}
}

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

public class Main {
public static void main(String[] args){
for (int testNumber = 2; testNumber <= 100; testNumber++){
boolean isPrimeNumber = isPrimeNumber(testNumber);
if (isPrimeNumber){
System.out.println(testNumber);
}
}
}
private static boolean isPrimeNumber(int testNumber){
for (int i = 2; i < testNumber; i++){
if(testNumber % i == 0){
return false;
}
}
return true;
}
}

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
//individaul
public class Main {
public static void main(String[] args){
for (int testNumber = 2; testNumber <= 100; testNumber++){//functic
if (isPrimeNumber(testNumber)){
System.out.println(testNumber);
}
}
}
private static boolean isPrimeNumber(int testNumber){//mathtic
for (int i = 2; i < testNumber; i++){
if(testNumber % i == 0){
return false;
}
}
return true;
}
}

/////////////////////////////
///
///
///
public class Main {
public static void main(String[] args){
//arrange Item
Item pencil = new Item("umi-hb-001","umi HB", "yotsubisienpitsu", "120");
//view Item
System.out.println("item");

//enpitu
System.out.println(&quot;itemCode&quot; + pencil.getCode());
System.out.println(&quot;itemname&quot; + pencil.getName());
System.out.println(&quot;itemmaker&quot; + pencil.getMaker());
System.out.println(&quot;itemPrice&quot; + pencil.getPrice());

}
}

///////////////////////////////
public class Item {
private final String code;
private final String name;
private final String maker;
private final int price;
public Item(String code, String name, String maker, int price){
super();
this.code = code;
this.name = name;
this.maker = maker;
this.price = price;
}
public String getCode(){
return code;
}
public String getName(){
return name;
}
public String getMaker(){
return maker;
}
public String getPrice(){
return price;
}
}
[/java]

TypeScript--noImplicitAny option, the Other

I did not know for a long time,
Any implicit error
It was a reference to the property that has not been defined

//Index Signature

var ok1:{
[index : string]:string;} = {};

var ok2:{
[index:string]:any;
name :string;
age: string;
}
var ok2Same: {
name : string;
age: number;
};
var v1 = ok2Same["noExists"];
//Non-existent parameters become any implicit
//if you use --noImplicitAny option, this is error
var v2 = ok2Same["name"];
var v3 = ok2Same["age"];

//Constructor Signature

var Greeting:{
new(word:string): {hello():string;};
}
class GreetingImpl{
constructor(public word = "word"){}
hello(){
return "Hello" + this.word;
}
}
Greeting = GreetingImpl;
var obj = new Greeting("word");
var str = obj.hello();
console.log(str);

//Generics

//if typeparameter same, independented function
function head(array: T[]):T {
return array[0];
}
function last(array:T[]):T{
return array[array.length-1];
}

var array = [1,2,3];
console.log(head(array));//1
console.log(last(array));//3

ES6(ECMAScript2015) related sites I have bookmarked

proto in ECMAScript 6 > <a href="https://See

reason is widely used. But non-encouragement.
See

Let's now check from now > See

You want to bookmark ES6 related

Specification

> See

free webbook

> See

good

> See

Tools can actually writing ES6

> See

It is checked whether to use a transformer compiler

> See

PostCSS,asm.js,ES6,Angular2。。2015年のフロントエンド界隈ではこちらが次世代の技術みたいですよ

スクリーンショット 2015-08-22 21.41.04

今日大阪でフロントエンドの話がされたみたいですね。 けっこうこの4つが大事みたい。。

スクリーンショット 2015-08-22 22.04.29

はちさんがいうんだから間違えない。

Angular2ES6

KAIZENの方がいうんだから間違えない スクリーンショット 2015-08-22 22.06.01

PostCSS!?コンパイルなしに書くSCSSみたいな記述??合ってる?? ・PostCSSasm.js

ちょっと先取りしようと思っています。

[html]

<style> #wrap{ min-width:410px; text-align: center; height: 300px; background: #e2e2e2; } #wrap:before{ display: inline-block; vertical-align: middle; content: ""; height:100%; margin-right: -0.25em; } #inner{ display: inline-block; vertical-align: middle; width: 200px; padding: 10px 15px; } </style> </head> <body> <div id="wrap"> <div id="inner"> <p>ふぁふぁふぁふぁふぁ</p> </div> </div> </body> [/html]

// var str1 = 'にわにはにわにわとりがいる';
// document.writeln(str1.indexOf('にわ'));//0(先頭から検索)
// document.writeln(str1.lastIndexOf('にわ'));//6(末尾から検索)
// document.writeln(str1.indexOf('にわ',3));//4文字目から右方向に検索
// document.writeln(str1.lastIndexOf('わ',5));//4(6文字目から左方向検索)
// document.writeln(str1.indexOf('ガーデン'));//-1(不一致)

// var str2 = 'Wingsプロジェクト';
// document.writeln(str2.charAt(4));//sを抽出
// document.writeln(str2.slice(5,8);//プロジ(6~8文字目を抽出)
// document.writeln(str2.substring(5,8));//プロジ(6~8文字目を抽出)
// document.writeln(str2.substr(5,3));//6番目から3文字を抽出
// document.writeln(str2.split('s'));//Wing,プロジェクト
// document.writeln(str1.split('わ',3));//に,にはに,に(3つに分割)

// document.writeln('トップ',anchor('top'));//トップ
// document.writeln(str2.link('https://www.wings.mns'));
// document.writeln('10',sub());//10下付き文字
// document.writeln('10',sup());//10上付き文字

// document.writeln(str2.concat('有限会社'));//Wingsプロジェクト有限会社
// document.writeln(str2.length);//11(日本語も一文字と換算)

// //substring,sliceとsubstrの違い。前者は番目を返す。後者は番目から文字数を返す
// // substringとsliceの違い
// var str = 'WINGSプロジェクト';
// document.writeln(str.substring(8.5));//プロジ(6~8文字目を抽出)引数startと引数endをend+1、start-1文字目までを抽出
// document.writeln(str.slice(8.5));//空文字。入れ替えはしない

// var str = 'WINDOWプロジェクト';
// document.writeln(str.substring(5,-2));//WINDO(1~5番目を抽出)substringは-2を0とみなしend、startを交換するから0から5番目までを抽出
// document.writeln(str.slice(5,-2));//(5,9)になる。負の数は後方の文字数とみなす。-2は後方から3文字目、つまり9文字目slice(5,-2)はstr.slice(5,9)と同じ動作をする

// Arrayオブジェクト

// var ary1 = ['Sato','Takae','Osada','Hio','Saitoh'];
// var ary2 = ['Yabuki','Aoki','Moriyama','Yamada'];

// document.writeln(ary1.concat(ary2));
// //Sato,Takae,Osada,Hio,Saitoh,Yabuki,Aoki,Moriyama,Yamada 配列通しで繋げる
// document.writeln(ary1.join('/'));
// //Sato/Takae/Osada/Hio/Saitoh 第一引数で繋げる
// document.writeln(ary1.slice(1));//Takae,Osada,Hio,Saitoh Satoを削除
// document.writeln(ary1.slice(1,2));//Takae
// document.writeln(ary1.splice(1,2,'kakeya','Yamaguchi'));
// //Takae,Osada(置き換え対象の要素を取得)
// document.writeln(ary1);
// //Sato,kakeya,Yamaguchi,Hio,Saitoh(置き換え後の配列)

// document.writeln(ary1.pop());//Saitoh(削除した要素)

// 文字列を大文字にして','区切りで配列に格納して返す
// var target = 'aaa,bbb,ccc,ddd';
// var target2 = target.toUpperCase();
// var arry = target2.split(',');
// // alert(arry.length + arry);

// var str4 = 'aaa,bbb,ccc,ddd';
// var uper = str4.toUpperCase();
// var arry4 = uper.split(',');
// // alert(arry4);

// //A もし文字列の最後の部分が,だった場合それを抜いた文字列を抽出する
// var str = 'aaa,bbb,';
// if(str.substring(str.length -1) == ','){
// var s = str.substring(0,str.length -1);
// // alert(s);
// }
// var str2 = 'ddd,ccc,';
// if(str2.substring(str2.length -1) == ','){
// // alert(str2.substring(0,str2.length -1));
// }
// var str3 = 'ccc,gggm,';
// if(str3.substring(str3.length -1) == ','){
// // alert(str3.substring(0,str3.length -1));
// }

// //indexOfメソッドとsearchメソッドの違い//
// //indexOfメソッドの引数には正規表現は利用できませんが、serch()メソッドでは正規表現を利用した検索が可能
// var r = 'aaa,bbb,ccc';
// //indexOfは正規表現が使えないので'-1'になる
// // alert('indexOf:' + r.indexOf(',.*,'));
// //serchは正規表現が使えるので'3'になる
// // alert('search:' + r.search(',.*,'));

// // 検索文字が何番目にあるか、ないかの判定
// var str5 = '1234567890abcdefghijk';
// var result5 = str5.search('a');
// if(result5 < 0){ // // alert(',はみつかりませんでした'); // }else { // // alert('aは' + result5 + '番目にあります'); // } // //配列を文字列に型判定して変換 // var arry6 = new Array('aa','bb','cc'); // var aryString = arry6.join('/'); // // alert(typeof aryString + ':' + aryString); // // 配列要素の追加/取り出し(pop/push、LIFO(Last In First Out:スタック(後入れ先出し処理))) // var ary1 = new Array('aa','bb','ccc'); // ary1.push('ddd'); //末尾にdddを追加 // document.writeln(ary1 + '
'); //aa,bb,ccc,dddになる
// var pop1 = ary1.pop();//配列の末尾から要素を取得
// document.write(pop1 + '
');
// var pop2 = pop1.pop();
// document.write(pop2 + '
');
// //もう一度push()メソッドで配列の末尾に要素を追加
// //配列の末尾に'ee'を追加
// ary1.push('ee');
// document.write(ary1 + '
');//aa,bb,ccになる

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>0611javascript</title>
<script type="text/javascript">
文字列の数値変換 ///////////////////
var n = '123';
document.write(Number(n));
document.write(parseFloat(n));
document.write(parseInt(n));

文字列を数値に変換した際の型判定////////
document.write(typeof('123' - 0));

文字列で渡されたメソッドををeval関数で解析///////
var str ='window.alert("evel関数")';
eval(str);
関数・三角形の面積(function命令文)

function sankaku(base,height){
return base*height/2;
}
document.write('三角形の面積' + sankaku(5,10));

関数・三角形の面積(コンストラクタ:書き方1)
var trailangle = new Function('base','height','return base * height/2;');
document.write('三角形の面積:' + trailangle(5,2));
document.write('<br />');
関数・三角形の面積(コンストラクタ:書き方2、new演算子を省略してあたかもグローバル関数であるように記述することも可能)
var trailangle = Function('base','height','return base * height/2;' );
document.write('三角形の面積:' + trailangle(5,2));

コンストラクタを使用するメリットは関数本体を文字列として定義できる
var param = 'height,width';
var formula = 'return height * width/2;';
var diamond = new Function(param,formula);

document.write('ひし形の面積:' + diamond(5,2));

//関数 三角形の面積:関数リテラルでの書き方
var triangle = function(base,height){
return base * height/2;
};
document.write('三角形の面積:' + triangle(5,2) );
function命令と関数リテラルは似ているが以下の違いがある
function命令 関数triangleを直接定義している
関数リテラル function(base,height){}と名前のない関数を定義した上で変数traiangleに格納している(宣言した時点で名前を持っていない「匿名関数、、無名関数」と呼ばれる)

 

グローバル変数とローカル変数
scope = 'Global Variable';
function getValue(){
scope = 'Local Variable';
return scope;
}
document.write(getValue());
document.write('<br />');
document.write(scope);

varを使わずに宣言された変数は全てグローバル変数とみなす
ローカル変数を定義するには必ずvar命令を使用する

スコープの解釈が変わる関数リテラルとコンストラクタ関数
var scope = 'Global Variable';
function checkScope(){
var scope = 'Local Variable';
var f_lit = function(){return scope;};
document.write(f_lit());
var f_con = new Function('return scope');
document.write(f_con());
}
checkScope();
javascriptは引数の和をチェックしない
function showMessage(value){
document.write(value);
}
showMessage();
showMessage('山田');
showMessage('山田','鈴木');
引数の妥当性をチェックする
argumentオブジェクトを使って与えられた引数の数と要求するそれの数が異なる場合にはエラーを返す
function showMessage(value){
if(arguments.length != 1){
throw new Error('引数の数が間違っています' + arguments.length);
}
document.write(value);
}
try{
showMessage('山田','鈴木');
}catch (e){//Errorオブジェクトを受け取る変数e
window.alert(e.message);//Errorオブジェクトのmassageプロパティ
}

 

引数の数が違うときに渡されるundefindを利用したデフォルト値を設定する
function traiangle(base,height){
if(base == undefined){base = 1};
if(height == undefined){height= 1};
return base * height /2;
}
document.write(traiangle(5));//省略できる引数は後ろの引数のみ

 

★高階関数
function arrayWalk(data,f){
for(var key in data){
f(key,data[key]);
}
}
var result = 0;
function sumElement(key,value){
result += value;
}
function showElement(key,value){
document.write(key + ':' + value);
// }
var ary = [1,2,3,4,16];
arrayWalk(ary,sumElement);
document.write('合計:' + result);
★を匿名関数で書き換える
function arryWalk(data,f){
for(var key in data){
f(key,data[key]);
}
}
var arry = [1,2,4,8,16];
arryWalk(
arry,
function (key,value){
document.write(key + ':' + value);
}
);

スコープチェーンの振る舞い
var y = 'Global';
function outerFunc(){
var y = 'Local Outer';
function innerFunc(){
var z = 'Local Inner';
document.write(z);
document.write(y);
document.write(x);
}
innerFunc();s
}
outerFunc()

 

クロージャ
function outerFunc(){
function innerFunc(){
alert('hello');
}
innerFunc();
}
outerFunc();

無名関数を宣言と同時に即実行
(function(){alert('fafafa')})();
関数を返す関数
function outer(){
var innner = function(){
alert('hellow');
}
return innner;
}
var f = outer();
f();
function outer(){
var x = 'ken';
return function(){
alert(x);
}
}
var c = outer();
c();

function outer2(){
var x = 1;
return function(){
alert(x);
x = x +1;
}
}
var s = outer2();
s();
s();
s();

</script>

</head>
<body>
<p>fafafa</p>
</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>0611javascript</title>
<script type="text/javascript">
コンストラクタで初期化する
var Member = function(firstName,lastName){
this.firstName = firstName;
this.lastName = lastName;
this.getName = function(){
return this.lastName + '' + this.firstName;
}
};
var men = new Member('kenji','morita');
document.write(men.getName());

動的メソッドを追加する

var Menber2 = function(lastname,firstname){
this.lastName = lastname;
this.firstName = firstname;
};
var men2 = new Menber2('kenji','morita');
men2.getName = function (){
return this.lastName + ':' + this.firstName;
}
alert(men2.getName());

 

プロトタイプオブジェクト
var Membber = function(firstName,lastName){
this.firstName = firstName;
this.lastName = lastName;
};
Membber.prototype.getName = function(){
return this.lastName + ':' + this.firstName;
};

var men = new Membber('fujimaki','takashi');
var men2 = new Membber('morita','kenji');
document.write(men.getName());
document.write('<br>');
document.write(men2.getName());
</script>
</head>
<body>
<p>fafafa</p>
</body>
</html>