bakalog

備忘録的なもの

16/01/16_WDF研修「半歩先のSEOで効率よく結果を出す」にLT登壇+参加させて頂きました。

ライトニングトークについて

HTML / CSS / JavaScriptが関係しそうな文書構造についてのLTをさせて頂いたのですが、
実務でコードを書かれてる方が5名ほどしかいないという、中々Awayな状況にてお話させて頂きました。
とりあえずクローラーの動きだけでも伝われば満足です…!

www.slideshare.net

内容

各種検索クエリについての説明

  • インフォメーションナルクエリ (調べ物を検索する用途) … 全体の85%〜
    気になった事を調べる用途。検索上位に出なくよく、必要に駆られて調べる内容が多い。
  • トランザクションクエリ (商品を購入する為の用途) … 全体の10%程度
    主に「この商品を買おう」と決めて「商品名」などを入れて検索する。買う前提で検索してるので、
    見込み客に対して露出する機会を増やすために、リスティング・バナー広告で狙う。
    そもそも、ユーザ自身がAmazon楽天でしか検索していない場合はGoogleに対する必要があるかどうか。
  • ナビゲーショナルクエリ(既に知っている所にアクセスする用途) ... 全体の5%程度
    知っているサイトに対して行こうとしてアクセスする場合「DMM.com」「DMM FX」など

用語について ( 住さんの用語 )

  • コンテンツ
    教養または娯楽に属する著作物。お役たち情報、読み物。
  • セリング
    売り込みの為の情報。LP、商品ページ、購入ガイドなど(楽天など)
  • データ
    創作物(著作物ではない)。単なる情報。会社情報など
  • インデックス
    目次・カテゴリなど

購買行動の段階

カスタマージャーニーとかの奴をわかりやすい言葉にすると、

  • そのうち客 (必要も興味もない)
  • おなやみ客 (解決策はなんだろう)
  • いますぐ客 (どこで何かを買おう)
  • いちげん客 (また買うべきかな?)
  • おとくい客 (友達にも進めよう!)

毛髪が薄い方で例えると、

  • そのうち客 → 自身の毛髪の薄さに気づいてない客
  • おなやみ客 → 自身の毛髪のヤバさに気づいた客
  • いますぐ客 → 育毛剤を買おう。と決めた客
  • いちげん客 → 二ヶ月使ってみたけど、効果があるから買おう。という客
  • おとくい客 → 効果があるから、他にも進めよう。という客

いますぐ客から、

  • 「育毛剤の種類が微妙だったな…」となった場合は、おなやみ客に戻る。
  • 「そもそも育毛剤じゃなくてズラや!」となった場合は、そのうち客に戻って別の方法を調べる。

対象となるユーザーの状態によって、検索する内容が変動する。

ユーザーの段階毎で考えられる対応

  • そのうち客 (必要も興味もない) → Facebook広告
  • おなやみ客 (解決策はなんだろう) → SEO
  • いますぐ客 (どこで何かを買おう) → PPC・モール
  • いちげん客 (また買うべきかな?) → CRM
  • おとくい客 (友達にも進めよう!) → ソーシャル

訪問者は自分自身の事柄に関してしか、興味はない。

なぜ昨今、SEOSEO!と言われるようになったか

今までは、いますぐ客に対してのSEO対応だけで良かったが、
業界によっては同業他社によって情報が溢れかえりすぎた場合、
更なるのびしろを求めて「おなやみ客」の層までを視野にいれるようになった。

逆に競合他社がいない独自の商品を提供している場合は、 SEOに対する優先度は高くない。

SEOに向いている商材とは

  • 購入を決めるまで時間が掛かるもの
    • 不動産や進学先など
  • 買い手に知識を要求するもの
    • 趣味のものや、専門性の高いもの

そういったものにHITしない情報
( 水道が今!壊れているなどの場合は、リスティング等の方が良い )

感想

改めてこんな事を思いました。

  • ユーザの状態によって、必要になる検索ワードが変わる。
  • そもそもSEOが必要のない業界・商材もあるので、SEO対応が必要かどうか考える
  • SEOが必要であれば使い、SEOが向いてない所には費用対効果が悪いので別の方法を考える。
  • やはり検索するユーザーのニーズを満たすコンテンツ作りと機会損失を防ぐ為の制作物の作り方が大事。

SourceTree で Subversion を使った話

前置き

最近、GulpとVagrantをちょっとずつ利用するようになってきて、
めっきりMampやらCodekitを使う機会がなくなってきたGitおじさん(未完成)です。

Git片手にダンジョンで戦ってたら、
Subversion呪い洗礼を受けたので聖水ふりかけて来ました。

無料のSVNクライアントはサポートが止まってたりUIがイマイチだったので、
調べてみたら、SourceTreeで"git-svn"という中央リポジトリにはSVNを利用しながら、
Gitのローカルブランチを利用できるメソッドがあったので利用してみた。

せっかくなんで備忘録。

環境

  • MAC OSX - 10.10
  • homebrew
  • SourceTree

HomebrewとGitのバージョンを最新にする

Homebrewを利用して内蔵のGitのバージョンをアップします。

# Gitのバージョンを確認
git --version


# homebrewを最新版にして内部のformulaも最新版にする
brew update

もしもgitがインストールされていない場合は、

brew install git

でインストール。

Xcodeコマンドラインツールを確認

Xcodeを起動。
⌘+,での環境設定を開き、
[Locations]のCommand Line Toolsが設定されているか確認する。

f:id:kgr0210:20151209015050p:plain

インストールされていれば大丈夫です。

入っていない場合は以下入力。

xcode-select --install

Gitの設定を編集する

SourceTreeから、⌘+,で環境設定を開き、
Gitのタブから「システムのGitを使用する」ボタンを選択して、 内蔵のGitからシステムにGitに変更する。

f:id:kgr0210:20151209020357p:plain

これで準備は完了です。

Subversionリポジトリをクローンする

SourceTreeからGitのリポジトリと同じようにクローンします。

f:id:kgr0210:20151209021203p:plain

クローンが完了すると以下のような形になり、 無事、git-svnでSourceTree上でSVNリポジトリにプッシュ(コミット)する事ができるようになります。

まだガッツリ触っていないので詳細まではわかりませんが、 SourceTree上でのリモートリポジトリへのプッシュSubversionへのコミット プルSubversionからUpdateするらしいです。

以上!


なんとなくの認識としては、 リモートリポジトリにmasterだけあって、それがSubversionリポジトリ。 ローカルリポジトリはGitのルールで好きにブランチ切ったりして使って良い…。 という感じでいいんだろうか。

参考記事

osdn.jp karabun.hatenablog.com qiita.com hikaruapp.jpn.com

WDF Vol.19 「集客とSEO 2015」に参加してきました。

WDF Vol.19 「集客とSEO 2015」に参加してきました。

9月12日(土)に開催されたWDF Vol.19「集客とSEO 2015」に
Googleの金谷 武明さん、株式会社FaberCompanyの山田 明裕さん、
CAの木村 賢さん と豪華な面々が揃ったSEO中心の勉強会があったので、
これは気になるぜ…と思ってた所に、

賛助会員だから、行きたかったら会社から行けるよー。』

と会社からありがたいお言葉を頂いたので、WDF!フンモッフ!JoinJoin!してきました。
これだけ豪華な面々が揃いながらも、まだ枠が余ってるとか石川は狂ってry

と、言うことで「帰ってブログを書くまでが勉強会です」を頑張って実践しようと思います。

以下、雑なまとめ


Google が考える検索エンジンからの集客

スピーカー : Google株式会社 金谷 武明さん


Googleが見ているのは、検索をするエンドユーザーである。
ユーザが求めているキーワードに対して有益な情報を提供したいと考えている。
なので、エンドユーザが体験するコンテンツ自体が快適なものになっているかどうか。
を考えないといけない。

一番大切なものは「コンテンツ」そのものである。

自分の持っている「コンテンツ」のポイントが「100P」だとすると、  
Googleにその「100P」を正確に漏れなく伝えられているかどうかを「検証」すること。
  1. 検証する

    • SearchConsoleでエラーが出ていないか ( 正しくGoogleに伝えられているか )
    • 構造がおかしくないか。 ( 適切にマークアップ出来ており、文書構造がおかしくないか )
  2. 改善点がないかを確認して、更にアクセスを増やす。

    • コンテンツの構造を良くする
    • そもそものコンテンツの幅を増やして、ユーザアプローチを増やすか。

    製作者はコンテンツの良さを100%、Googleに伝えること(クロールとインデックス)ができているか?
    伝える事ができていない場合は、ツールガイドラインを利用したりして改善する。
    また、モバイルで検索するユーザ数も増加傾向にある為、
    それらのユーザに快適な情報・コンテンツを提供できているかどうかも考える事。


セッション中に紹介されたリソース

売上があがる「コンテンツSEO」徹底解説

スピーカー : 株式会社Faber Company 山田 明裕さん


Googleの金谷さんが言われてた「コンテンツ」がちゃんとしたものとなっているのは大前提で、
検索ユーザが何を求めているのかを考える話。

検索するユーザには、 情報収集と、比較検討するフェーズがある。

1. 情報収集

検索キーワード 「モノの名称 やりたい事 場所」

例 : 「時計 電池交換 金沢」
対象物に対して行う事象・自分の住んでいる所の近い所などのキーワードを入れてやりたい事がどこでできるかを調べる。  
ユーザは情報収集が7割

2. 比較検討

検索キーワード 「店舗名称 評判」

具体性のあるキーワードにかわってくる。
具体的な店舗名などがわかり、第三者のレビューなどを見て比較する

見込み客に対しての接点を持つ事がコンテンツSEOの醍醐味である。

では、どうやって情報収集をしている見込みユーザに対してのアプローチを増やすのか。
→ ヲタク用語が出てくるコンテンツ内容が、ニッチなユーザ( 情報を求めているユーザ )に刺さる。

その商材に対して、興味(知識)を持っているユーザは検索キーワード自体も、
より専門的なキーワードになる為、コンテンツ内容も専門的な要素を持たせる事が重要。

実際にヲタク要素を持たせたコンテンツとそうじゃないものを比較した所、
少なくとも、5倍以上の「アクセス / 流出キーワード」の差があった。
順位云々の前に、検索ユーザの意図・欲求に答えられているかどうかを考える事。


やる事

  • コンテンツ案はキーワードを軸に練る。
  • キーワードは、サジェストリ検索やGoogleキーワードプランナーを利用して検索ユーザの需要を予測。
  • キーワードを収集してマインドマップでカテゴライズする。
  • 捻出したキーワードをコンテンツのタイトル・見出しなどの適切な場所に利用する。
  • オウンドメディアの弱点はすぐに売上につながらないので、リターゲティングで売上につなげる

コンテンツSEOの技術的アプローチ

スピーカー : 株式会社サイバーエージェント 木村 賢さん


「HTMLの書き方を変えたら変わるとか、このタグを入れたら!みたいなものはもうない!!」
「そもそも、潜在顧客に刺さるコンテンツを制作するべきである。」

限られたリソースの中で、どうSEO対応を効率的に行うか。という話。

100点は難しいので、だれでも80点を出せるSEO対応を目指す
ある程度の型を作る事で、リソースがない中でオペレーション化できる。

検索者のニーズを満たすコンテンツを用意する事。

共起語とは

キーワードAがあった場合に、それに関連して出てくる単語。
「寿司」であれば「うまい」「おすすめ」「まずい」「イカ」「軍艦」「にぎり」等。

ユーザのニーズを考える

例えば「金沢 寿司」で検索する場合、ユーザーは何を求めているのか?を考える。

  • 普通は「おいしい寿司」の情報が知りたいはず。

    • ではそのユーザがどういう情報が欲しいのか。
    • なるべく多くの検索者の裏側に隠れた意図を汲み取る事を再重視する。
  • 仮定を立てて予想したり、前述のサジェスト検索などを利用する。

      ・店舗名が多いから、店舗の情報が欲しい人が多そうだ。
      ・おすすめ・名店があるから、美味しい店を探している人が多そうだ。
      ・寿司屋の「ランチ」情報を求めている人が多そうだ。
       という、仮定をたてる。
    

キーワードを構成する要素がある場合、構成要素を意識する事。

  • 金沢の寿司屋のリスト
  • 金沢のおすすめ店 ( ニーズ & 構成要素 )
  • 金沢の寿司ランチの情報 ( ニーズ & 構成要素 )

上記をひとつのコンテンツとしてまとめた場合、多くなりすぎる為、
CAでは「個々のコンテンツの力を集結させる」サービスでまとめている。

ここらへんも重要


雑な感想

まとめ。

・現状のコンテンツが100% Googleに伝わっているか。

伝わっている場合は、

コンテンツ自体をユーザに刺さる様にしてコンバージョンをあげる。
・ユーザが求めている情報があるか ( コンテンツ )
・潜在顧客のユーザが発見できるキーワードやタイトル等があるか ( キーワード )
・コンテンツのユーザ体験が悪く無いか ( UX )
更にユーザ層を広める為に、コンテンツを豊富にする。
・コンテンツを追加する
・ノイズとなる情報を削除
  • 上記の事をチーム全体に理解・共有する事。
  • SEO担当者だけで出来る範囲は限られている。
  • チームに理解がない場合、SEO担当者がハゲ散らかる。

自分もマークアップだけを担当していたりすると、
視野が狭くなってしまい「SEO対応はコードのここをどうすれば良い」等、
小手先の手法でどうにか出来ていると思ってしまいがちでしたが、
こういった考えをチーム全体で共有してエンドユーザに与えるコンテンツ体験そのものを見なおして、
製作者全体で協力して作り上げて行かなければならないと、改めて思わされました。
今回のWDF…えらい勉強になったでェ!!

株式会社DMM.comラボに転職しました!

2015年8月末をもって、株式会社mdmを退職致しました。
転職と同時に半同棲生活がスタートする形になったので、
移住先探しで、危うく宿なしになるか!?
と、バタバタしておりましたが、なんとかこの先生きのこる事が出来ました。

前職では

デザインからマークアップ、1からのサイト構築・打ち合わせ・納品など、
ちょこちょことフロントエンド周りの設計・実装など 幅広い経験をさせて頂きました。

色々とアレしたいコレしたいという無茶苦茶を聞いて頂いたり、
人生相談に乗って頂いたりと、とても感謝しています。
どれだけ貢献出来たかわかりませんが、これからの繁栄を願っております!

退職について

みんな仲良くやっており社内環境もよく、
特にここが嫌だ!的な所はありませんでした。

色々な経験をさせて頂きましたが、 更にフロントエンド周りを強化したい気持ちがあったので、
挑戦する場としてDMMさんの門を叩かせて頂きました!

これから

DMM.comラボさんでフロントエンドエンジニアとして、
緊張で汗まみれになりながら、
何かしらエロエロしたものを笑顔で制作する人になります。

ほぼ初めての転職となりますが、
これからも脳みそと腰のバネを鍛えながら成長していきたいと思いますので、
生暖かい目で見守って頂ければと…!

お酒のお恵みをおねがいします! http://www.amazon.co.jp/registry/wishlist/2SMPWGP53P5UO/ref=cm_sw_r_tw_ws_El.LvbDY7DKVH

Express.jsでHelloWorldしてみたが、Middlewareについてはよくわからなかった。

前に続いて写経しながら実行した内容をメモ。

express.jsをグローバルインストールする

以下のコマンドでグローバルインストールする事により、
該当ディレクトリで express と記述するだけでプロジェクトを準備されるようになる。

sudo npm i -g express-generator
cd [expressプロジェクトを展開したいディレクトリ]

パッケージをインストールして実行する

cd ./ && npm install

ディレクトリ構成

  • app.js
    アプリ全体の設定と初期化コード

  • bin
    コマンドツール ( www の設定など?)

  • node_modules
    npmでインストールしたPackageはここに保管される。

  • public
    公開フォルダ ( フロント系のファイルはここに内蔵されている )

  • routes
    ルータ ( 接続経路を制御する MVCにおける Controller )

  • views
    テンプレートファイル

app.jsの中身

// 各パッケージのインポート
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

// npmのパッケージ以外のモジュールは相対パースでrequireする
var routes = require('./routes/index');
var users  = require('./routes/users');

// expressインスタンス
var app = express();

// テンプレートエンジンのセットアップ
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

// 各middleware
// middlewareはexpress.jsの中では非常に重要なパターンらしい
// uncomment after placing your favicon in /public
//app.use(favicon(__dirname + '/public/favicon.ico'));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

// routerもmiddleware
// app.useでmiddlewareを追加する事もできる。
app.use('/', routes);
app.use('/users', users);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
    var err = new Error('Not Found');
    err.status = 404;
    next(err);
});

// error handlers

// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
    app.use(function(err, req, res, next) {
        res.status(err.status || 500);
        res.render('error', {
            message: err.message,
            error: err
        });
    });
}

// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
    res.status(err.status || 500);
    res.render('error', {
        message: err.message,
        error: {}
    });
});

// appを出力する
module.exports = app;

middlewareとは

参考:ExpressのMiddlewareを自作してみる

  • request, response, next を受け取るfunction
  • どんなコードでもいい
  • requestとresponseを変更してよい
  • リクエストを終了してもいい
  • nextを呼びリクエストを続行してもいい
  • リクエストを終了しない場合はnextを必ず呼ぶこと
  • オプションでmiddlewareの対象となるパスを指定できる
  • アプリケーションレベル、ルーターレベル、エラーハンドリング、ビルドイン、サードパティの5種類がある

middlewareについては、この補足を見てもイマイチ理解できてない。

hello worldする

参考:express.jsでHello World

routes内のindex.jsを開いて、 module.exports = router;の直前に以下コードを追加。

// http://localhost:3000/hello というリクエストを受取
router.get('/hello', function(req, res) {
  // req => request
  // res => response
  res.render('hello', { title: 'Hello Express', content: 'Hello World!' });
});

viewsにhello.jadeファイルを作成して、以下の記述を書込む。

extends layout

block content
  p= content

Control + C でexpressを起動停止・再度起動して、
http://localhost:3000/hello にアクセスすると上記内容が確認できる。

みんな大好きnpmさんのコマンドについて

ほぼ参考元マネて写経しただけですが、
忘れがちなのでメモっときます。

  • npm init
  • npm install hoge
  • npm run

npm init ( npmさん「ここに作業小屋を建てよう」 )

npm init

任意ディレクトリで実行する事で、該当ディレクトリをnpmの管理下に置き、package.jsonを生成する
実行する事で、以下のpackage.jsonが生成される

npmさんが小屋建てるために必要な書類をまとめました。みたいなもんです。(多分)

{  
  "name": "learnNpm",  
  "version": "0.0.0",  
  "description": "",  
  "main": "index.js",  
  "scripts": {  
    "test": "echo \"Error: no test specified\" && exit 1"  
  },  
  "author": "",  
  "license": "ISC"  
}  

npm install hoge ( npmさん「工具箱から道具とってくる。」 )

npm install hoge  

npmレポジトリからライブラリをダウンロードするコマンド
ライブラリ自体は npmさんの実家 https://www.npmjs.com/からインストールされる。

npm install hoge --save

のように"--save"を記述する事で、取得したライブラリをpackage.jsonに追加する事ができる。
これ一回きりじゃなくてとても大事だからメモっといて!って出来る。

  "dependencies": {  
    "jQuery": "~1.7.4"  
  }

dependencies (依存性) に追加する事によって、それ以降は npm installだけで、
追加したライブラリをインストールする事ができる。
このレシピに使ったものはこういう名前で、こんなversionやでー。って指定できる。

コマンドは省略できる

install は i
--save は s に省略する事が可能。

npm install hoge --save
↓
npm i hoge -s

ナウいnpmさんは略語でもイケる口。

browserify(ぶらうじふぁい) のインストール

ひとまず何も考えずに、以下のコマンドでインストールする。

npm i -g browserify

ちなみに -g はグローバルインストール。
PC自体にインストールする事で、Terminalで利用できるツールを追加する。

node_modulesにインストールされたライブラリをjsから参照する事ができる奴。
今までだと、html側にjsを読み込むコードを書く必要があったが、
ブラ氏ふぁいを利用すると、JavaScript上で直接ライブラリを参照する事ができる。
ついでにライブラリ同士の依存も自動で解決してくれる。ぶら氏 感謝。

<!--いままで ( html内 )-->  
<script type="text/javascript" src="jquery.min.js"></script>

<!--ブラ氏の働き ( js内 )-->
var $ = require("jquery");

npm run

npm scriptsと言うタスク実行機能を呼び出すコマンド。 package.json内に書かれた「"script"」を実行してくれる。

{
  "scripts": {
    "build": "browserify src/main.js > build/bundle.js"
  }
}
// 実行例として、以下を実行すると
npm run build
// ↓ 以下のコマンドが実行される
browserify src/main.js > build/bundle.js

npm run だけだと他に利用可能なタスク一覧を表示してくれる。
利用可能なタスクを用意して置くと、タスクを順番に実行するだけで環境を用意する事などが出来て便利。
( ※タスクの量が多くなってきた場合は、別途Gulpなどを導入する事が考えたほうがよい。 )

参考 : フロントエンド開発の3ステップ(npmことはじめ)

Learn JS in kanazawa - Kakenai.js ver.1.0に参加してきました。

ブログを書くまでが勉強会!

ようやく勉強会が終わりそうです。(違
少しバタバタしていたのでアップが遅れましたが、
6/6にLearn JS in kanazawa 「Kakenai.js ver1.0」に参加(運営?)してきたので、
レポートとはとても言えないメモみたいなものを。

learnjskanazawa.connpass.com


発表者及びスライド

"今" 使えるJavaScriptのトレンド
水野 隼登さん( @pocotan001 ) - 株式会社サイバーエージェント Webディベロッパ

www.slideshare.net


kakanai GUIツール Blocs

開幕早々、JavaScriptを使わずにGUIでJavsScriptを使った表現を選択して、
サイトを作成できるMacApp : Blocsを紹介。 ケースによっては選択肢に入れるのもアリ。 blocsapp.com


開発環境について

黒い画面とはいい加減、友達にならないとこの先生きのこれない。

内容としては昨今の傾向としてフロントエンドの制作において、
ほぼnode.js+npmを使ったパッケージ管理がほぼ必須。
最近だとjQuery公式サイトの方でもプラグインの配布は行っておらずReadOnlyとなっていて、
サイトへ登録するのではなくnpmに移行することを推奨しているとの事。
bowerというパッケージ管理ツールもあるが、
npm( node package manager)を利用する事を推奨している。

speakerdeck.com plugins.jquery.com


module管理する憎いやつ Browserify (ブラウジファイ)
  • ブラウザでNode.js用のモジュールを使用可能にする
  • ブラウザでrequire()を使ったモジュール管理を行える
    らしい。もう少し範囲が広い仲間にwebpackがいる。

yutapon.hatenablog.com


スクランナー [Grunt] [Gulp]

Gruntは豚の鳴き声、Gulpはジュースを飲む音らしい
Gruntはメンテナーが行方不明の為、これから使う場合はGulpを推奨。
gulp-starterというテンプレートを使うと便利 らしい
github.com

一応「npm run ( w / package.json )」でタスクランナー的な使い方ができる。


altJS
  • CoffeeScript
  • Babel ( ES6 → ES5なAltJS )
  • TypeScript (後述)

構文チェッカー

ESLint


MVなんたらのお話

MV使わないと不幸になるよって例。
backbone.jsの機能が多すぎる為、
複数のUIから同じデータを変更する際に、 ModelとViewとに分けて考えると良い
そしてModelとViewとライブラリ「Osteoporosis.js(骨粗鬆症.js)」の紹介。

www.slideshare.net

Polymer

polymer 1.0 要素をコンポーネントとして分離して組み合わせて作るWebConponents
膨大になりがちなjsやcss等をカプセル化する事ができるのはかなりメリットな気がする。
以下の要素で構成。

  • Custom Elements
  • HTML Imports
  • Template
  • Shadow DOM

カスタムエレメントカタログもあるらしい。
customelements.io

所感

全体的に、jQueryに依存したものがどんどん減ってきている現状がある。 その上でいつそれを捨てるかという判断も必要になってきそう。


「俺とAngular2」
Angular2とは何か。採用されたTypeScriptとは何か。
TypeScriptとはMSのOSS!それをWindowsの環境で開発してみよう!
加藤 真透さん ( @PharaohKJ) - PhalanXware代表

俺とAngular2 : スライド qiita.com

Angular2とTypeScriptについて

Angular1.x と Angular 2.xの違い

設計思想が違うみたいで、Angular2では双方向データバインディングが廃止されている模様。
よって、Angular2.xはまだおすすめできない。

Angular1.xはAngular.js Hubから触る事ができる。

TypeScript
  • 静的型付けとオブジェクト指向の導入が特徴
  • Interface / Class が利用可能
  • TypeScriptはJavaScriptのスーパーセット。ES6の機能を取り込んで、型システムを取り入れた言語

TypeScriptはType Script Playから触る事ができる。


所感

先に触りそうな所で、Angular1.x。
TypeScriptはaltJSという立ち位置だけど、
ひとまずは、CoffeeScriptを触ってみて都度必要に応じて
TypeScriptを突っつくのもアリかなという感じでした。


全体まとめ

名前だけ聞いたことがある…ってものがいくつか話の中で出てきたので、

  • 具体的にどういう用途で使われるものなのか。
  • どういった経緯でそれが使われているのか。

という所が知れる良い機会だった。

御二方にお聞きした内容を参考にしながら、
触れる所から触っていこうと思った次第でした。

実際に手を動かして覚えるもくもく会形式の
「kakitai.js」というセミナーが7月に予定されているのですが、
加藤さんによる「Angular.js」のハンズオンセミナーがあるとの事で、
そちらにも参加していきたいと思います:-D

f:id:kgr0210:20150616033245j:plain