9月14日(日)

だいぶご無沙汰してます。

最近は日本語書く代わりにプログラミング言語を書く量が増えてます。たまにはいいもんですね。

と言っても、なかなか思うように動いてくれず、ググったり、教えてもらったりしながら牛歩の毎日です。

●Tech Garden Schoolのゼミ制度

プログラミング学習の主戦場であるTech Garden Schoolでは最近「ゼミ」というのが始まりました。

僕は「最新技術とエンジニアの現場」「JavaScriptゼミ」という2つを受講してるのですが、
どっちもアツいです。

3時間授業のはずが、7時間トイレ休憩無しノンストップwwwという驚異的な盛り上がりを見せることも。

●JavaScriptと向かい合う

今回の記事は『Node.jsとBackbone.jsのどちらを学ぶべきか』というタイトルです。

nodevsbb

javaScriptゼミの第4回目の授業でどちらを学ぶべきか考えたい、という趣旨の下で書いています。

これまで、
・javaScript(以下JS)という言語そのもの
・JSを扱いやすくするためのjQueryというライブラリの基本的な扱い方
・JSの根底にある概念(オブジェクト指向、Ajax通信)
を学んできたのですが、今後個別の処理単位にとどまらず、より大規模なWebサービスを構築するにあたっては種々のフレームワークを扱えるようになる必要があります。

今学んでいる言語は幾つかあるものの、特にJS芸人として食って行けるようになりたい(というと語弊がありますが)僕としてはJSの中でも何を中心に扱えるようになるべきか、っていうのはやや慎重に考えたいのです。

とか言って、今回の2つのフレームワークは得意な領域が異なるので、軸にしたいもの(RailsとかJSとか言語なのか、フロントエンドとかサーバサイドとか分担なのか)次第ではどっちも必要って話になるかもしれません。

が、手当たり次第学ぶにしても今目の前にあるのは何なのかをある程度理解した上でやりたいのでまとめることにしました。

ちなみに、JS芸人として食っていきたいってのは以下の理由です。

・万能感
 フロントからサーバ、ハイブリッドアプリまでJSを軸に色々できる
・学ぶ環境
 周りの人、教材
・サーバサイドの熾烈な感じ
 RailsとかPHP系とかよりフロントエンド周りのがまだ手薄かつ売り手市場では?という思い込み
https://www.wantedly.com/projects/7267
>●JavaScript の基礎知識 (ただしアプリケーションエンジニアと同等のレベルまでは要求しない)

●Node.jsとBackbone.jsのどちらを学ぶべきか

意外とNode.jsの情報に手薄感があって純粋に比較するの難しそう。

なので、致命的な情報が欠落していたらソーシャルに教えてくださいね!!

●backbone.js

スクリーンショット 2014-09-14 17.35.38
●概要
 クライアントサイドのJSのMVCフレームワーク。WebアプリにModel、View、Collection、Eventの構造・仕組みを提供します。

Rails等、サーバサイドのMVCとは別物のようです。

・Model   :データの管理や加工
・Collection:複数のModelを扱う配列みたいなもの
・View    :イベント処理、DOM操作、Model、Viewの操作
・Router   :APの状態管理

●出自
 JSで分担してアプリを書くとどこにイベントがあるのかわかり辛く、分担しにくい!!それを解決する仕組みを作ろう!!!

●メリット
・シングルページアプリケーションが作りやすい
 Routerが便利
・様々な種類のデータが扱いやすい
 Model、Collectionが便利
・イベント処理、DOM関連のコードがカオスになりにくい
 Viewが便利
・類似フレームワークと比較して軽量
 6.3KB。モバイル環境でも使える
・役割毎に分割可能
・疎結合なコードが書け、メンテナンス性が高い

●デメリット
・JSコーディングが遅くなる
 ModelとView設計が必要で鍛錬しないとサクサク書けない
・ルール違反して書けてしまう
 決まり事が少なく自由度が高いため、うまく書かないとスパゲッティコードが途端にできあがる
・Viewのコードが長く複雑になる
 Viewが担当するページ要素が広過ぎる
  Viewにデータ処理に関するコードを書いている
  →データ処理に関するコードはM/Cへ
  View同士を連携させるコードをたくさん書いてしまう
  →Mのイベントを介して連携

●必要なスキル
・JS、jQ or Zwpto.js(jQ互換の軽量ライブラリ)
・Underscore.js(あるといい)

●使用例
hulu
Foursquare
ShareWis

●参考資料
・いまさら聞けない!?Backbone.js 超入門 (オススメ!)

・BACKBONE.JSによるWebアプリケーション開発について

・5分でわかる?Backbone.js ことはじめ

これまでの「MVC」とBackbone.jsの関係について少し理解した。

●Node.js

スクリーンショット 2014-09-14 17.35.50
●概要
サーバサイドのJS製フレームワーク。「リアルタイムWeb」を実現すべく下記仕様を実装。

・ノンブロッキングI/O
 サーバ側で動作するJSで、大量データ処理をするためにノンブロッキングI/Oというモデルを採用。
 GoogleV8エンジンにより、ブロックのないイベントループを実現。
・Socket.ioを扱える
 リアルタイムな通信を実現するためのライブラリ。DBアクセスとWebページ表示を別々に行ってくれる。
・イベントループ
 リクエストやコールバックの発生はイベントとして扱い(登録する)、そのイベントに関する処理が終わったら次のイベント処理する。
 シングルスレッド。

●出自
 C10K問題への対処。大規模なI/Oが発生する処理への需要が高まっている。
 しかし、Apacheなどは1HTTPリクエストに1プロセス消費する上に、マルチスレッドだとメモリの消費が激しい。

●メリット
 概要と同じ笑

●デメリット
・一度に1つの処理しかできないため、複数の処理を捌けない
・Model周りが貧弱、マイグレーションがない
・最初にGruntfile.jsを生成するが、バージョンアップに追従するのが面倒
・オブジェクト指向でないのでチーム開発に向かない
  →Type Script MSが提供するNode用のオブジェクト指向言語がある

●使用例
・ソシャゲ、チャットサービス
・RESTfulなAPI
・Twitterのキュー
・テレビ・ゲームの統計データ
starseeker
LinkedIn(モバイル)
ピグライフ

●資料
Node.js とは一体何か?
いまアツいJavaScript!ゼロから始めるNode.js入門〜5分で環境構築編〜
基礎から学ぶNode.js
Node.jsをサーバサイドのUIレイヤに限定するのか?(大事なお話)
あのサービスも「NODE.JS」!?知らないを「卒業」しよう!NODE.JS勉強会まとめ

あと、モジュールいっぱいあるらしい。

●比較してみる

●本
教材へのアクセスという意味での学習コストは重要。Amazonで検索。
・Backbone.js:31件
・Node.js  :93件

それぞれ別の情報混じるものの、Backbone.jsのがノイズ多い印象。

純粋に教材だけ見るとNode.jsのが勉強しやすそう。

●求人
forkwellだけちょろっと覗いてみました。
・Backbone.js:11件
・Node.js  :7件

これからですかね!Railsって載せるよりPHPって載せた方が人集まるような考えで、「フロントエンドエンジニア」とか「javaScript」とかで採ってそう。

●Googleトレンド
・Backbone.jsとNode.js
スクリーンショット 2014-09-14 17.22.14

みんなが気になるNode.jsって感じですかね?

ちなみに、
・Angular.js、Knockout.js、Backbone.js
スクリーンショット 2014-09-14 17.22.44

Backbone.jsの圧倒的優位性がAngular.jsに脅かされてますね。

Angular.jsが主流になるのでしょうか?

気になるかどうかと実際使う、使いたい、検証してみたいは別かもですが参考まで。

●結論

こんなんじゃ比較なんねーよと叫びたい。

決定的にこのプロダクトがいい!!こんなの作るためにこの技術必要!!というのもない。

というわけで、Node.js学びたいと思いました。

理由としては、

・世間的に必要とされてる技術
・使ってる技術や拡張性
・Rialsと比較できる部分が多い

というあたりです。

いずれフロントエンド周りのフレームワークもちゃんとやるということで。

6月20日(金)

『本格的なビジネスサイトを作りながら学ぶ WordPressの教科書』でおなじみ、
プライムストラテジー社さんのセミナーに行ってきました。

DSC_0281

本格ビジネスサイトを作りながら学ぶ WordPressの教科書

Webサイトの制作を効率化し、より多くの人たちをWebサイトに呼び込むためのテクニックを厳選、セミナー形式でお伝えします。美しく、ユーザビリティが高いWebサイトを作るためのTIPSをぜひお持ち帰りください。なおセミナーの終盤では、『WordPressの教科書』シリーズの読者のみなさんもしくはこれから『WordPressの教科書』シリーズをお読みになるみなさんが次に読むべき、おすすめの10冊の選書をレビューし、ご紹介します!

とのことです。

くどくどレポート書くのもいいですが、ざっくりとした流れと紹介されていた本を紹介しようと思います。

「WordPressをきっかけにしてプログラミングを1.5(≠1)から勉強する」という落としどころだったので興味を持ちました。

●「ワードプレス」と「テーマ」と「プラグイン」の関係

「ワードプレス」って何?という人のために一応触れておくと

「今あなたが読んでいるこのブログはワードプレスでできています」

という感じです。

ブログやサイトを比較的に手軽に構築できるオープンソースのソフトで、サーバを借りてその中にソフトを突っ込み、カスタマイズして使います。

無料ブログとどう違う?はこちらをどうぞ!

プログラミング1ヶ月の自分がブログをWordPressに移行したときに考えたWordPressの仕組み

デザインをかえるための仕組みが「テーマ」。公式のもので2596種類(2014年6月19日時点)あって、投稿記事はそのままで見た目を色々に変えることができます。

機能を手軽に追加する仕組みが「プラグイン」。公式のもので31737種類(2014年6月19日時点)。

ブログに「機能」っていらなくね?って思うかもですが、記事を更新したらすぐにGoogle検索で拾ってもらえるようにする仕組みや、書いた記事を自動的にバックアップするための仕組み等色々。

カスタマイズできるということは、無料でやる場合は完全に
ブログ提供会社に投げていたものをある程度自分で考えて運用する必要があるのです。

ワードプレスを学ぶにあたっては、

①ワードプレスでできることの全体像をつかむこと
②既存のテーマを活用すること
③既存のプラグインを活用すること
④オリジナルのテーマを作成すること
⑤オリジナルのプラグインを作成すること

というようなステップアップが必要とのことでした。

①〜③ができれば、普通に記事を書いたり投稿したりしてブログ生活を楽しむことができます。

しかし、それにはこんな限界が…

・既存のプラグインは過剰だなぁ(または不足だなぁ…)
・似たようなサイト見たことあるなぁ…

特に2つ目は、人気のテーマに少し偏りがあって(導入のためのネット記事が豊富で真似する人が増える)、しかもミーハーを斜め上から見下す面倒な人がいるから厄介です。

オリジナルを売りに使い始めたのに、オリジナルになりきらないのもいかがなもんか。

だから結局はプログラミングを勉強して、「テーマ」や「プラグイン」を自作するのが先のステップとしてあるんですよ、というお話だったのでした。

●ワードプレスのカスタマイズに必要なプログラミング言語とは?

ワードプレスはPHPでできたソフトウェアではありますが、PHPができればOK!というものではありません。

何か言語1つ学んだところでウェブサービス作れるはずないし、僕、HTML書けます(ドヤ)とか論外です。

具体的に何が必要かと言うと、

「テーマ」

・HTML/CSS
 ホームページの画面(PCが文字のどこがタイトルでどこが記事かとか認識できて、人間が色とか文字のフォントとか違いを感じられる)
・JavaScript
 マウスを重ねると色がかわるとか画面の動き
・PHP
 検索とか記事を読み込むとかより大きな枠組みの動き
・画像ファイル
 文字通り画像 

「プラグイン」

「テーマ」のPHPがより難しくなったもの

というイメージだそうです。

言語の担当する範囲が違うので、全部必要かどうかは作る物にもよります。

●オススメの本12選

DSC_0283

2冊いつ増えた!?wwwという感じですが、紹介されていた本が、う〜ん確かにワードプレスいじれるようになるかも!

と思えるくらいまとまりのある感じだったので紹介します。

①本格ビジネスサイトを作りながら学ぶ WordPressの教科書

プライム・ストラテジー株式会社 SBクリエイティブ株式会社 2013-10-01
売り上げランキング : 12635

by ヨメレバ

ワードプレスと言えば!みたいな位置づけの本。実務レベルのビジネスサイトを作るチュートリアルに従って実際作って行くイメージです。

僕は最初この本買ってやってみようとしましたら、挫折するのでやめましょう笑

やるとしても、部分部分を拾う辞書代わり。

簡単な本でイメージを掴み、実際既存のプラグインやテーマを追加・交換しながら使い、ちょっとプログラミングもかじってみました!

くらいの段階で読んでみると、ああ、商用サイトってここまで作り込むのか〜セキュリティはまだちょっと置いておいて、くらいになれると思います。

②本格ビジネスサイトを作りながら学ぶ WordPressの教科書2 スマートフォン対応サイト編

プライム・ストラテジー株式会社 SBクリエイティブ株式会社 2013-12-04
売り上げランキング : 22724

by ヨメレバ

①の続編。スマホやタブレットで表示する際にも、最適化して表示してくれるにはどうすればいいか?

というのを軸に、また架空の企業サイトを実際に作りながら勉強できるというものです。

③プロが選ぶ WordPress優良プラグイン事典

相原 知栄子,一戸 健宏,大串 肇,大島 義裕,大曲 仁,北村 崇,小島 勝茂,後藤 賢司,染谷 昌利,高野 直子,高橋 文樹,鳥山 優子,西川 伸一,服部 久純,星野 邦敏,松田 千尋,吉澤 富美 エムディエヌコーポレーション(MdN) 2013-03-25
売り上げランキング : 34857

by ヨメレバ

ワードプレスを実際に業務で利用しているプロ達が選ぶプラグインとその解説。

Kindle版がだいぶ安くなりました!

④WordPressユーザーのためのPHP入門 はじめから、ていねいに。

水野史土 エムディエヌコーポレーション(MdN) 2014-04-22
売り上げランキング : 3035

by ヨメレバ

PHPの入門書数多くあれども、「WordPressユーザのための」と銘打ったものはこれ以外ないです。

PHPを正面から勉強するものいいかもですが、「この関数何に使うの?」「ワードプレスに使える関数ってどれ?」って絶対なります。

そういう意味では、ワードプレスから逆算して教えてくれるこの本ってかなり効率いいのではと思います。

⑤体系的に学ぶ 安全なWebアプリケーションの作り方 脆弱性が生まれる原理と対策の実践

徳丸 浩 SBクリエイティブ株式会社 2013-07-26
売り上げランキング : 6855

by ヨメレバ

これは難しいです僕が今読むと、んぎえ〜って感じです笑

プラグインが自作できるようになり、全世界に公開や!ってなったとき、セキュリティ的に大丈夫なものを作るべく参考にする本。

実装できるようになる頃には、高度情報処理試験のセキュリティスペシャリストなんて瞬殺でしょう。

⑥スラスラわかるHTML&CSSのきほん

狩野 祐東 SBクリエイティブ株式会社 2014-03-03
売り上げランキング : 6583

by ヨメレバ

HTML&CSSのパッケージ本はCSS部分が重くなりがちなんだそうですが、HTMLに深く言及された本だそうです。

あっそう笑

⑦作りながら学ぶ HTML/CSSデザインの教科書

高橋 朋代,森 智佳子 SBクリエイティブ株式会社 2014-03-03
売り上げランキング : 15647

by ヨメレバ

①、②のワードプレスの教科書のHTML/CSS版です。

チュートリアルに従って1からウェブサイトを作っていきます。

最初文章だけだったものが徐々に画像やデザインで装飾されて行き、HTMLとCSSの違いもよくわかってなかった自分にとっては目から鱗でした。

大晦日〜元旦はこれをひたすら写経してました笑

⑧HTML+CSSデザイン|基本原則、これだけ。【HTML5&CSS3対応版】

大藤 幹,久保 知己,境 祐司,佐藤 裕 エムディエヌコーポレーション(MdN) 2013-08-30
売り上げランキング : 14819

by ヨメレバ

比較的コード少なめ、概念説明しっかりな本だそうです。

何やそれ笑

ただ、1つ言えるのは、コードが何となく書けるようになると、

「で、これどういう意味やっけ?」

と思う瞬間は必ずくるので、概念中心スタイルの本もたまにはいいと思います。

⑨これからの「標準」を身につける HTML+CSSデザインレシピ

エ・ビスコム・テック・ラボ マイナビ 2014-03-20
売り上げランキング : 27689

by ヨメレバ

立ち読みレベルですが、この本いいなぁと思いました。

それっぽい今風のデザインを作るにはどうしたらいいか、カテゴリ別にサンプルを勉強できるイメージです。

こういうタイプに位置づけられる本はトレンドを見て買い直していきたいですね。

CSSのフレームワーク(それっぽいのを手軽に作れる半既製品、パーツ集)であるTwitterBootstrapが載ってるだけでなくて、それをオリジナルにカスタマイズするにはどこをどうすればいいのかについてもそれなりにページを割いていてナイスでした。

⑩作りながら学ぶjQueryデザインの教科書

狩野 祐東 SBクリエイティブ 2014-05-22
売り上げランキング : 113816

by ヨメレバ

JQueryはJavaScriptで作る動きのあるページをより簡単な記述で書けるようにしたライブラリ(これもフレームワークなようなもの)です。

この本、サンプルサイトもきれいで見やすいです。

http://www.solidpanda.com/book-jquery/index.html

⑪jQuery最高の教科書

株式会社シフトブレイン SBクリエイティブ 2013-11-27
売り上げランキング : 46915

by ヨメレバ

メチャ厚いわろたwww

けど、初学者にとっては理想のコンセプトだと思います。

現場の第一線で日々業務を行っている経験豊富なプロフェッショナルの開発者が執筆を担当していますが、その一方で、執筆期間中はjQueryの知識が全くないデザイナーや、プログラミング未経験者を執筆チームに加えることで、これからjQueryを学ぶ人が「どこにつまづき」、「何に疑問を抱くのか」を常に検証し、そしてブラッシュアップしていきました。

サービス作りにも似たようなことが言えますが、知りたい人が知りたいことは何か。

その感覚、生の声の傍で書かれた本って強いのでしょう。

⑫Web制作の現場で使う jQueryデザイン入門

西畑 一馬 KADOKAWA / アスキー・メディアワークス 2013-05-30
売り上げランキング : 4310

by ヨメレバ

僕は最近JavaScript、JQueryの勉強を始めた口ですが、JQueryやるなら取りあえず最初にこれやっとけ!的な空気が漂っています笑

実際見てみると、JQueryって何ができるようになるの?がサンプルコードと画像でイメージしやすく勉強できそうな感じなのでとてもいいと思います。

●まとめ

ブログをとっかかりにプログラミング!って面白い切り口だなと思いました。

けど、ブログも1つのWebサービスなわけで、「作りたいものをちゃんと作るためのプログラミング」という王道には乗っかってます。

え、ブログ?って思った人。

ブログってその辺のよくわかんないブログ、生まれては消えていくアプリなんかよりよっぽどたくさんの人に深く深く愛されますからね。

コンテンツ次第やないか!というのはほんとその通りですが、個人利用から商用利用まで、あらゆる単位の人をつなぐプラットフォームです。

形こそ多少変われど今後も続いていくでしょう。

その仕組を理解し、自分でも作れるようになるってきっとすごい意義深いことですよ。

ワードプレスもプログラミングもやりたいけど、設定とか煩わしそうで一歩目が踏み出せない…

なんて方はこういうのいかがでしょう?

TGS 2014-06-21 9.46.16

http://techgardenschool.com

ワードプレスなら数時間で立ち上げ、プログラミングもPHP(のフレームワーク)を中心にウェブデザイン(HTML/CSS+α)も破格で勉強できます。

かく言う僕はただの生徒なので、何か気になることがあればコメントいただければ!