「web備忘録」カテゴリーアーカイブ

普段はwebのほうの仕事も多いのでそちらのお勉強の際のちょっとしたメモ書きです。

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記事

【JavaScript】getClientRectsとgetBundingClientRectの使い方、違い

「getClientRectsとgetBundingClientRectの使い方、違い」で検索したら日本語記事がなかったので下の参考をざっくり翻訳して書こうと思いました。

getClientRects

戻り値 : ClientRectList

var rect = document.getElementById("myElement").getClientRects();

このような要素を取得した場合、
ClientRectListの中身

{
0: ClientRect,←この中身は下で説明
length: 1,
item: item()
}

getBundingClientRect

戻り値 : ClientRect
中身

{
bottom:
height:
left:
top:
width:
}

を持ちます。

ClientRectて??
前出のgetBundingClientRectで返されるListのインデックス0のオブジェクト。

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDOMClientRect
・属性にbottom, height, left, right, top, width等を持つオブジェクト
ここの属性にアクセスしてveiwportをrelativeとした要素領域情報(rectangle boxの幅や高さ)を取得できる
・ここでの位置情報はスクロールされると変わる

・値は読み込み専用
※呼び方が変わる、ClientRectだったり、DOMRectだったり、TextRectangleだったり
・ブラウザ互換性は chrome 1.0 Firefox:3.0 IE 4 Opera 4 Safari 4

何が嬉しいか。
var fafa = document.getElementById('fafa')
fafa.offsetLeft
fafa.offsetTop;
fafa.offsetWidth;
fafa.offsetHeight
などのオブジェクトと併せて使うことで威力を発揮する

実際使ってみる
jsfiddleにこちらhttps://getfirebug.com/firebug-lite-debug.jsをExternalResourcesとして追加するとデバッグできる。consoleとかみながらできる

https://jsfiddle.net/kenjimorita/mm9uosog/

他のJavaScript記事

参考
https://stackoverflow.com/questions/18780139/how-to-get-bounding-box-for-div-element-in-jquery
https://developer.mozilla.org/en-US/docs/Web/API/Element/getClientRects
https://msdn.microsoft.com/en-us/library/ms536435(VS.85).aspx
https://msdn.microsoft.com/en-us/library/ms536433(v=vs.85).aspx

【JavaScript】JavaScript問題集

以前書いたJavaScript問題集githubのこっちに見やすいようにリプレイスした。
こっちならスマホでも整っていて見やすいし、自分自身これを傍らに置きながら勉強できる。。

簡単なこれらの勉強をもっとスムーズにするためにWebアプリでも作って、問題をシャッフルして答えたら次、みたいなの作ろうと思っている。
どうやったらJS技術が今よりちょっとでも上がるかとか、ストレスなく勉強できるかを考えている

IntelliJに変えて3日目にしてAtomに対して思うこと

Atomの良いところは格好いいところ、ビジュアルがいいところ、
ですが、重いのがつらかったですね。
すぐクラッシュするし固まる。
あと仰々しい。
「これ今やってまーーーす」感。。
なによりコードを追うことがかなり難しいと個人的に感じました。
shift+cmd+Fで横断検索だと思うのですが、
それで検索すると沢山バーーーーーって出てきます。それがファイルのパスだけ。
それをいちいち絞り込むには多分正規表現
で開けるとそれじゃないファイルだったりする。

IntelliJは開かないでもプレビューで見れます。プレビューの上で編集ができます。つまり、開かないでも編集できるしコードが読める。楽。

IntelliJは検索機能がサクサク行くので思考の妨げがされないので余計な情報を与えないし、
コードを追いやすい。
これをいままでなぜ使ってこなかったかってよさを知らなかったからですけど、、
無料お試しが過ぎたら払います。
ある程度太いフォルダをツリーにしなくてはいけなくなった場合やコードを追うことに時間を費やしている場合は
AtomよりIntelliJにした方が僕はよかったです。

エディタはなんでもいいってよく聞きますけど、エディタにこだわりを持ちたいもりたなのでした〜

【Scala】 trate -study1

・trateはinterfaceのようなものだがフィールドと実装を定義できる。
・trateもクラス同様にスーパークラスを継承するが、下の用にしていない場合AnyRefがスーパークラスになる。

trate Life {
  def eat() { println("kushakusha")}
}

これは上と同じ

 trate Life extends AnyRef {
   def eat () { println("kushakusha")}
 }

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

image

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

image

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

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

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

【IntelliJ IDEA】 設定する「Theme」「IdeaVim」

atomクラッシュに耐えられなくてIntellJにする。
・Scalaお勉強の為Installした
・強力なファイル検索でさくさくシンボル追いたい
・vimでやりたいけど今はIdeaVim

【エディタを見やすくする】
1. command + ,
2. Appearance
3. ThemeをDarculaへ

【IdeaVim】
1. command + , でPreference
2. Plugins
3. 右ペイン下のBrowse repogitories
4. 検索でIdeaVim
5. install
6. restert

 

スクリーンショット 2016-06-04 14.50.25 スクリーンショット 2016-06-04 18.31.47

取りあえずvimさえつかえればいい。

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]