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

Angular2 for TypeScriptのお勉強-sample(7)【boundとinterporation】

フロントエンドエンジニア芸人もりたけんじのAngular2とTypeScriptのお勉強
フロントエンドエンジニア芸人もりたけんじのAngular2とTypeScriptのお勉強

ここのページの「Binding syntax: An overview」を読んでいます。

[]と{{}}が何をしているのか理解します。

 

スクリーンショット 2016-06-21 22.04.30

チュートリアルでいうここです。

[]=""はそのDOMが持つプロパティを""でbindしている。

これはわかりやすい例。bindStyleはそのコンポーネント内でpropertyとして読み書きできる{{}}はそのproperty値を動的に出力しています

このことを説明するもうひとつの例
<span>{{lunch}}is good!!</span>

<span><span [innerHTML]="lunch"></span>is good!!</span>
は同じ意味ですね。

@Component({
selector: 'contacts-header',
templateUrl: `./app/app.childComponent.html`
})
export class HeaderComponent {
lunch: string = "lunch";
constrctor (){
}
}

 

なんか薄い感じでごめんなさい。ちょっとずつやっていっています

Angular2 for TypeScriptのお勉強-sample(6)【classの置き換え,override】

フロントエンドエンジニア芸人もりたけんじのAngular2とTypeScriptのお勉強
フロントエンドエンジニア芸人もりたけんじのAngular2とTypeScriptのお勉強

classを修正するのはよくするところなのでそこらへん。

チュートリアルのここ見ながら確認

今回やっていること

・普通にclassとして要素に記述する
・それをリセットして反映させる[class]
・メタデータにstylesとして子directiveのstyle制御
・子directiveをtemplateUrlとしてhtmlファイルで管理する

app.childComponent.html

<nav class="navbar-fixed"><span class="">Contacts</span></nav>

app.component.ts
@Component({
selector: 'contacts-header',
templateUrl: `./app/app.childComponent.html`,
styles: ['.navbar-fixed { position:fixed; }']
})
export class HeaderComponent {
colorBlue: string = "colorBlue";
constrctor (){
}
}

なんてことないですが、ちょっとずつ確認してこーと思います

今回のコード

でわまた〜〜

次のAngular2記事へ

他のAngular2記事

他のjavascript記事

Angular2 for TypeScriptのお勉強-sample(5)【ngClass,*ngIf,directives】

フロントエンドエンジニア芸人もりたけんじのAngular2とTypeScriptのお勉強
フロントエンドエンジニア芸人もりたけんじのAngular2とTypeScriptのお勉強

ngClass,*ngIfはよく使う。ので最初に押さえておきたい。。

 

今回やったこと

・子component(directives)として親で描画

・クリック時にisCheckedを判定してfalseだったら子componentをhide

・isCheckedによってスタイルとテキストを変える

import { Component } from '@angular/core';
import { ChildComponent } from './app.childComponent';
import { Ngif } from 'angular/common';

@Component({
selector: 'my-app',
template: `
<h1 style="height:45px">WIP</h1>
<div [style.color]="isChecked ? '#e3e3e3': 'red'">{{isChecked ?'now is true' : 'now is false'}}</div>
<child-component *ngIf="isChecked"></child-component>
<input type="checkbox" [(ngModel)]="isChecked" />
{{isChecked}}
`,
directives: [ChildComponent]
})
export class AppComponent {
isChecked:boolean;
constructor(){
this.isChecked = !this.isChecked;
}
}

・サブツリーを削除する

今回のコード

でわまた〜〜

次のAngular2記事へ

他のAngular2記事

他のjavascript記事

【gulp】zsh: command not found: gulp!!!「急にgulpが壊れた!」と思ったら読む記事

【gulp】zsh: command not found: gulp!!!「急にgulpが壊れた!」と思ったら読む記事
【gulp】zsh: command not found: gulp!!!「急にgulpが壊れた!」と思ったら読む記事

zsh: command not found: gulp

まず。急には壊れません。
じゃあ原因は何だ!(お前だよ)
っていうのがありまして、
わたしも「ですよね、、」と思いながらも、ずーっとハマってて思い当たる節が色々ありすぎてわからなかった。

gulp
やっても
zsh: command not found: gulp
gulp -v
zsh: command not found: gulp(そりゃそうだ)

思い当たる節

・ログインshellいじった?
・nvmとかbrewとかいじった??
・nodeのバージョンあげたとか??
・npm i -g gulpでインストールはできるのに、gulpで実行できない($PATH通したつもり)
とか思い当たる節ある方。

これやってください。
前提条件
npm i -g gulp とnpm i gulpはやっている。インストールはされている。がそんなコマンドねーと言われる。

1.今のプロジェクトのnpmがどこをみているか確認

npm root
/Users/[userName]/Desktop/Git/react/playground/node_modules

2.今のグローバルのコマンド実行ファイルがどこを向いているか確認
npm root -g
/Users/[userName]/.npm-packages/lib/node_modules

ここのパスが問題だった。。
brewでnpmを実行していると見ているnode_modulesのパスが違う。。

3. npm config set prefix /usr/local

で変更する。下記をもう一回。
4. npm root -g
/usr/local/lib/node_modules
変わった。

そこにgulpをインストール。
5. npm i -g gulp


6. gulp

ありがとう解決してくれた英語記事

Angular2 for TypeScriptのお勉強-sample(4)【双方向バインディング】

フロントエンドエンジニア芸人もりたけんじのAngular2とTypeScriptのお勉強
フロントエンドエンジニア芸人もりたけんじのAngular2とTypeScriptのお勉強

Angularを使い始めてこれが一番驚いた記憶あるのですが、Angular2ではどのように書くのかと思い
チュートリアルのここらへん読みました。というか多分ここのページが全てだと思うので今後ここのやつ一通りやりたいと思います。

input内に入力するとその場でdirtyチェック?走ってリアルタイムに書き出されるのはAngularでもそうでしたが、
ngModelを[(ngModel)]="name"として定義するのですね。

また(click)="save($event)"としてクリック時$eventを渡すのですね($を書き忘れてなんでだってなりました)

今回のコード

でわまた〜〜

次のAngular2記事へ

他のAngular2記事

他のjavascript記事

Angular2 for TypeScriptのお勉強-sample(3)【clickしたら挨拶が変わるtoggleClick】

今日2回目の更新で、いっきにこのまま月曜まで一人ハッカソンやろうかな。今年最初の猛暑日みたいです。

フロントエンドエンジニア芸人もりたけんじのAngular2とTypeScriptのお勉強
フロントエンドエンジニア芸人もりたけんじのAngular2とTypeScriptのお勉強

こういうのみたりこういうのみたりしてました。

なるほどなと思ったのは、

今回下のようなコードかいたのです。
これはclickしたらコンバンワかこんにちわを判定して変えるものです。

@Component({
selector: 'my-app',
template: `<h1>{{greeting}}</h1><div>
<button (click)="getGreetingEvening()">click</button></div>    `
})
export class AppComponent {
greeting: string;
constructor(){
this.getGreeting();
}
getGreeting(){
this.greeting = "ohayou";
}
getGreetingEvening() {
if(this.greeting == 'ohayou'){
this.greeting = "konbanwa";
} else {
this.greeting = "ohayou";
}
}
}

onClick属性でやっていたら動かなかったのですがみてのとおり(click)としなくてはいけないのですね。
あと2回目ででてきたアプリケーションロジックには何も書きませんでしたが、今回templateにアクションごとに描画させたくて
greetingを変えることをやってみました。
ReactでいうrenderのJSXですねtemplateは

今回のコード

でわーまたー

次のAngular2記事へ

他のAngualr2記事

他のjavascript記事

Angular2 for TypeScriptのお勉強(2)

前回からやや日が経ちましたが、
わたしのAngular2への想いは毎日のお昼ご飯ぐらい変わりません!(結構変わる)

フロントエンドエンジニア芸人もりたけんじのAngular2とTypeScriptのお勉強
フロントエンドエンジニア芸人もりたけんじのAngular2とTypeScriptのお勉強

これにいこうとおもっていて。ちょっと予習もかねてお勉強

今回はよく記述することになるあそこが何しているかチュートリアルの「Step 2: Our first Angular component」から読んでいく

よく書くこれ。
@Component({})
export class AppComponent {}

これが何しているのか。なんですぐ下にclassを記述するのか。。
以下チュートリアル読んだメモ書き。
-------------------------------

デコレーターファンクション

@Component({
//メタデータ
selector : ‘my-app’,
template: ‘<h1>ふぁふぁふぁ</h1>'
})
export class AppComponent {} ←componentクラスにデコレーターファンクションを適応させている

メタデータはAngularにcomponentのつくり方と使い方を教えている

{
selector : ‘my-app’ ←このcomponentの要素は’myapp’と命名されている
//htmlがこのセレクターを読み込んだ時、AngularはAppComponentのインスタンスを描画させる
template : ‘

’ //componentのHTMLの拡張されたtemplateでAngularにこのcomponentの描画を教えている
}

//export class AppComponent{}←アプリケーションロジック(このcomponentの振る舞い)を書けるが今回は描画だけ。

自分へのメモをそのままブログにしてすみません。

今回のコード
ふぁふぁふぁにしただけ。

でわまた〜〜

次のAngular2記事へ

他のAngular2記事

他のjavascript記事

scalaお勉強しにヒカリエへ行ってきた

image

久しぶりだからちょっとテンションあがりました

image

scalaの方は第一人者の方が講師で来てて、
これをタダで、しかもハンズオンですよ。。
丁寧な説明で集中してできましたー。

なにがよかったって、
これに向けてある程度基礎を勉強するきっかけや、
intellijに移行するきっかけ作ってくれたことや、activator ui 触れたことですかね、
activator使わないらしいけど。。

Angular2とscalaをやってこーと思いました
おしまい

Angular2 for TypeScriptのお勉強(1)【Angular2愛】

フロントエンドエンジニア芸人もりたけんじのAngular2とTypeScriptのお勉強
フロントエンドエンジニア芸人もりたけんじのAngular2とTypeScriptのお勉強

初めまして。こんにちわ。
表題のとおり今日からやっていきたいと思います。
個人的にAngular2とTypeScriptやりたいのです。
Angular1.5とTypeScript実務でいじっていた経緯があって、
個人的にはこっちの方向に賭けているんです。
暫くReactをいじれる環境で学べて、大変嬉しいのですが、
やはりAngular2やりたくて、
ちょっとお勉強しないとなと思い、
このように「連載」でやることで、追い込もうとしています。

チュートリアルなぞりながら

ここのリポジトリでやっていこうと思います。

3ヶ月後に基本的なことをすらすらできることを目標にしています。

でわ〜

次のAngular2記事へ

他のAngular2記事

「特定の値以外の値」を返す

googleで表題の様なキーワードで探したら見当たらずなのでページ作りました。
下の用にfilterとsliceでなんとかします。
非破壊メソッドを使ってnumを壊さないようにしています。

あと全然関係ないけどQiitaにリツイートされたので嬉しかったので張っておきます。

「特定の値以外の値」を返すコード

[code lang="javascript"]

var num = [0,1,2];
//任意の値を返す関数
function select(num,i){
return num.slice(i)
};

//任意の値以外を返す関数
function unselect(num, i){
var selected = num.filter(function(num, inde){
return inde !== i
});
return selected
}
select(num, 2);
//[2]

num
//[0, 1, 2] 壊れていない

unselect(num, 1)
//[0, 2]

num
//[0, 1, 2] 壊れていない
[/code]

【ES6】適当に試したり。正規表現とか

全コード

[code lang="javascript"]

function getKey(k) {
return `${k}`;
}

const obj = {
id: 5,
name: 'San Francisco',
[getKey('enabled')]: true,
};

console.log(obj)
///////////////////////////

function f(x, ...y) {//ここで受け取らない分が配列の要素としてyになる
// y is an Array
console.log(y)//["hello","true"]
return x * y.length;
}
const r1 = f(3, "hello", true) == 6
console.log(r1);//true

//////////////////////////////

function f(x, y, z, t, p) {//インデックス順に受け取る
console.log(z);
return x + y + z;
}
// Pass each elem of array as argument
//const arry = [1,2,3,5,6];
//f(...arry) == 6
//or
f(...[1,2,4]);

///////////////////////////////

let fibonacci = {
[Symbol.iterator]() {
let pre = 0, cur = 1;
return {
next() {
console.log([pre, cur] = [cur, pre + cur]);
return { done: false, value: cur }
}
}
}
}

//////////////////////

let [a, b, c] = []
console.log(a,b,c);
typeof b

function getSomething(){
return {
first: 1,
second: 2,
third: 3
}
}

var { first, second, third } = getSomething();
console.log(first)

console.log("repeat".repeat(2));

console.log(["morita","kenji","fafafa"].findIndex(x => x == "fafafa"))

console.log(["A","B","C"].map(x => Array.of(x)));

console.log(['a', 'b', 'c'].fill('kenji', 1, 2));

const i = [3, 0, 6, -1].find(x=> x < 0);
console.log(i)

function* idMaker(){
var index = 0;
while(true)
yield index++;
}

const gen = idMaker();
console.log(gen)
////////////////////////////

const str = "わたしの名前は「もりた」です。あだなは「もりけん」です";

const re = /「.*?」/ig;

const myRe=/ken*/g;
const str2 = "fafakenfafkenji";
let array;
while ((array = myRe.exec(str2)) !== null) {
let msg = array[0] + " を見つけました。";
msg += "次のマッチは " + myRe.lastIndex + " からです。";
console.log(msg);
}

const str3 = "<img src='fafa.com'>"
const str4 = "<p>"
const reg2 = /<(\S+)(\s+.+)?>/;
const reg3 = /<(?:\S+)(?:\s+.+)?>/;
const re2 = str3.match(reg2);
const re3 = str3.match(reg3);
const re4 = str4.match(reg2);
console.log(re2);console.log(re2[0]);
console.log(re3);console.log(re3[0]);
console.log(re4);console.log(re4[0]);

const str222 = "わたしの名前は「もりた」です。あだなは「もりけん」です";

const re222 = /「(.+?)」/ig;

let result;
while ((result = re222.exec(str222)) !== null){
console.log(result[0],"ここ")
}

const nen = "西暦1980年の3581歳です";
const reg1 = /\d+(?=年)/;
console.log(nen.match(reg1))

const string3 = "washable reasonable accessible assemble answerable";
const reg5 = /\b\w+(?=able\b)/g;
console.log(string3.match(reg5));

const nen1 = "ケンジは昭和55年生まれの35歳であり、ケンジの母は昭和22年生まれの64歳である"
const reg6 = /\d+(?![年\d])/g;
console.log(nen1.match(reg6));

const str5 = "あの客はよく柿食う客だ";
const res5 =str5.match(/あの(.+)はよく柿食う\1だ/);
console.log(res5);

const tag = "<div><h1>kenjimorita.jp</h1></div>";

console.log(/<(\w+)><(\w+)>kenjimorita.jp<\/\2><\/\1>/.test(tag))

// const str6 = "西暦2010年は平成22年です。西暦1980年は昭和55年です。";
// console.log(str6.match(/(?<=昭和|平成)\d+/))

const str7 = "My name is Taro Suzuki and I am a researcher at ABC.";

console.log(str7.match(/\ba\w*\b/g));

var falseValue = new Boolean(false);
console.log(falseValue)//false

var fafa = null;
console.log(typeof fafa)//Object
console.log(fafa == undefined)//等値演算子ではtrueになってしまう
console.log(fafa === null);//true //同値演算子を使う
[/code]