イケてる開発環境が俺にもっと輝けと囁いている - これまでの補足・今後の展望 - AWS上で構築するRESTfulアプリ勉強会～Web開発ワークショップ～【第12回】まとめ

さて、全12回にわたって開催してきたAWS上で構築するRESTfulアプリ勉強会～Web開発ワークショップ～ - connpassですが、今回(2015/12/22)を以って最終回です。

• ワークショップでやらなかったこと
• 鈴木商店で取り組んでいること
• 来年以降のイベント予定

なんかの話をしました。

ワークショップでやらなかったこと

やったことは何でしょうか？

前回までのタイトルを振り返ってみましょう。

1. 開発環境の構築
2. Backbone.jsを使用したアプリの実装
3. Marionette.jsによるBackbone.jsの機能拡張
4. RequireJSを使用したJavaScriptのモジュール化
5. CakePHPで実装するログイン機能
6. CakePHPでデータ操作〜担当者アサイン機能の実装
7. サーバー・クライアントの両面からかけるバリデーション
8. CSS・Bootstrapによるデザイン
9. ダウンロード・アップロード機能の実装
10. リファクタリング（サーバー編）
11. リファクタリング（クライアント編）
12. これまでの補足・今後の展望

AWS-EC2を使った開発環境をクラウド上に作成し、Backbone.js, Marionette.jsでフロントエンドの開発、さらにRequire.jsを使用してモジュール化、サーバサイドで必ず必要になるログイン、あるいはユーザに紐つけた典型的な処理、バリデーション、それから、Bootstrapでデザインにも触れました。ダウンロードやアップロードでWebの基本であるHTTPの復習をし、リファクタリングやテストについても学んできました。
これらをやる中で、GitやGitHub、基本的なLinuxコマンドも学びました。
思えばいろいろやりましたねえ。
Web開発における初歩的なことはみんなやってしまった気がします。
じゃ、やってないのは何でしょうか？

イケてる開発者は、上記についてこんな印象を持ったのではないでしょうか？

• Backbone / Marionette

もう流行らないよね... ReactとかAngularは?

• Require

Node.js(CommonJS)スタイルで書きたいよね... あと、デプロイのことちゃんと考えてる?

• Bootstrap

Bootstrapはいいとして、素のcss書くのかい?

• CakePHP

うーん...

• リファクタリング・テスト

リファクタリング、テスト自動化は当然として、ハナからちゃんとした設計でバグの出にくいコード書かないとね

• その他

EC2だけ? AWS色々あるよね TypeScriptとかAltJSやES2015は? 開発フローはどうするの? ビルドとかCIは? 情報共有とか、タスク管理も大事だよ
ScalaとかGoとか、MicroServicesとか、DDDとか、セキュリティとか、なんとかかんとか....

はいはい...

やりますよ！やってますよ。少しずつ。
大事なのは「トレンドを追いかけること」「トレンドに振り回されないこと」だと思うので、少しずつね。

イケてる開発環境が俺にもっと輝けと囁いている

こいつらが囁いているんだ！
(各所のイケてる開発者からいろいろ突っ込まれそうな悪寒がしますが...どんどん突っ込んで下さい！)

インフラ系

Docker

言わずと知れたコンテナ技術。本番運用にはまだ早い印象だが、開発環境はコレで行くしか無いでしょう！
今はローカルはVagrant、ステージング環境はEC2でがんばってますが、Vagrantは2つ、3つ上げると重いし。
本番でも将来は使いたいよね。Blue-Green Deployment!

AWSのいろいろ

とにかくいろいろです！最近特に新しいサービスのリリースラッシュが加速している気がします。
AWS re:Invent 2015 ラスベガスで発表された新サービスと機能 | アマゾン ウェブ サービス（AWS 日本語）

こういう細かいところとかもちゃんとやってくれていいですね。

フロントエンド開発系

この辺はウチのエースに協力してもらいまとめました。→thanks Ken!

AltJS

Transpile（コンパイルみたいなもの）することでJavaScriptになる言語。主に

TypeScript

Microsoftが開発しているAltJS。その名の通りJavaScriptに型（Type）情報を付加した言語となっている。型情報のおかげでリファクタが容易となるため、大規模プロジェクトなど長期にメンテが必要なプロジェクトに強い。また、AngularJS2でも標準でサポートされているAltJS。

Babel

最新のJavaScriptをいち早く使えるAltJS。ES2015をほぼ（あるいは全部？ちょっと調査しきれていない）使える。ES2015はES5よりもすっきりとした構文でJavaScriptを書けるので（個人的に）イケてるコードが書ける。特にTemplate StringsとDestructuringに慣れるとES5の記法に戻るのがつらくなることも。。。

CSS Preprocessor

AltJSのCSS版（と言ったら怒られるかもしれませんが）。コンパイルするとCSSになる言語です。主に以下のとおり。

• Sass
  http://sass-lang.com/

• Less
  http://lesscss.org/

• Stylus
  http://stylus-lang.com/

Webpackによるアセット（AltJS, Sass, etc...）の管理

上にもあるようにAltJSやCSS Preprocessorを使いはじめると、トランスパイルしないといけなかったり、出来上がったJSをリリース時にはモジュールを一つのファイルにまとめたり（concat）、圧縮したり（minify）、色々なことをしないといけません。Webpack以前（Browserfiyもありますが）はこれらのタスクをGulpやGruntなどのタスク自動化ツールを使って実施していました。
Webpackがこれらと大きく異なっていて、個人的にイケている点はCode Splitting機能です。大規模プロジェクトのJSをリリース時に一つのファイルにconcatすると結構サイズが大きくなりますし、なにより不必要なコードまで初期ロード時に読み込むことになってしまいます。 必要なモジュールを必要なときにだけ読み込む ことができるようになるのがCode Splitting機能です。
Webpackは「ビルドに特化しているツール」という印象があるので、今までのGulpやGruntと組み合わせて、「ビルド関係はWebpackにまかせる」という使い方ができそうです。

Gulpによるタスク自動化

日々、特にフロントエンドの開発を行っていて繰り返し繰り返し行っている作業がたくさんあるはずです。「これって自動化できないの？」ってことでタスクを自動化してくれるツール、Gulpの登場です。様々なタスクをJavaScriptで書いて、それを簡単に実行することができます。以下、タスクの例。

• ファイル（JSやCSSやHTMLなど）保存時に自動でブラウザを再読み込み
• webpackのビルド設定をタスクとして定義（あとから簡単に呼び出せるように）
• JavaScript保存時に単体テストの自動実行
• ↑テスト失敗したときにOSの通知機能を使って「テスト失敗してるよ！」って通知

などなど、際限なくタスクの自動化ができるんです！（タスクを書くのは自分ですけどね）

サーバサイド開発系

フロントエンドに比べて「盛り上がってる」感に欠ける最近のサーバサイド系ですが、見た目重視のWebサービスやBtoCのアプリケーションはともかく、BtoBにおいてはサーバサイドは「命」です。
画面が崩れると顧客に怒られますが、 データが壊れると顧客に殺されるかもしれません...。

なお、上記「インフラ系」も広義ではサーバサイドかもしれませんが、分けてますよ。

Microservices

記事は既に1年以上前のものですが、いろいろなところでRailsで作ったものを一部Microservice化した、という記事を見聞きします。
クックパッドの事例は有名ですね。
新規案件に使うのがいいのかどうか判断に迷うところですが、大きく育つ可能性のあるアプリケーションや既に大きくなって「そろそろ何とかしないとヤバイぞ」と言う臭いを放ち始めたプロジェクトにはいいかもしれないですね。

Rails5.0

世の中、SPAが流行ってます。SPAで開発する際にRailsに於いては、「別にRailsでなくてもいいんでないか？」と言う意見がありました。
つい先日リリースされた5.0(beta)では「API mode」が追加されました。
これでSPAにおいてもRailsの存在感が増していくかもしれませんね。要チェックです。
あと、Action CableというWebSocketを簡単に使える機能も追加されています。要チェックですよ！

PHP7.0

個人的にはそんなに好きではない(笑)PHPですが、ウチではサーバーサイドのメイン言語です。
7.0が公開されています。
上記URLのインタビューでPHPの生みの親，ラスマス・ラードフ氏がPHPの思想を完璧に表現していたのでぜひ読んでみてください。

ラスマス氏の名言→「PHPがひどい言語だというならWordPressを他の言語で書き直しますか？ がんばってください，5年後に会いましょう（笑）」
この人、好きだな(笑)

セキュリティ

アプリ開発も増えてきたので、Web、アプリで同じ認証基盤を使いたくなってきます。OAuthとかJWTとか。

• OAuth2.0 - 1.0とは別モノですよ！
  http://oauth.net/2/.io

• JWT - Json Web Token
  https://jwt.io/

その他

「その他」でまとめてしまうのはちょっと強引ですが、いくつか。

CIツール

Continuous Integration(継続的インテグレーション)です。
各種ビルド、テスト、リリースを自動化します。
「Continuous(継続的)」であることが重要ですね。デイリービルドしましょう。
いくつか紹介。

• Jenkins
  https://jenkins-ci.org/
  定番ですね。

• CircleCI
  https://circleci.com/
  人気です。

• Travis CI
  https://travis-ci.org/
  こちらも人気。


• GitLab CI
  https://about.gitlab.com/gitlab-ci/
  ウチではGitLabを使ってるので、これもアリだろう。だんだん良くなってきてる模様。

マテリアルデザイン

Android5.0から採用されているデザインコンセプトですね。

設計

ドメイン駆動設計(Domain Driven Design: DDD)。といえばこの本。
最近はこちらも人気です。

ガチでやると結構大変です。学習コストもそれなりに高い。しかしこれは全開発者が読むべき2冊だと思います。
個人的には、「ガチのDDD」するほどでもない「単純なデータベースのCRUD+α」なプロジェクトはTransactionScriptで、かなり複雑な場合はDDD、でいいと思うのですがその中間ぐらいはどうしようか、というのが難しく感じます。

開発フロー

下記ツールを使ってpull requestベースの開発。

• GitHUB Enterprise
  https://enterprise.github.com/home
  あのGitHUBをクローズドに使えるサービス。金がある人はこちら。

• GitLab
  https://about.gitlab.com/
  「カネがない人のためのGitHUB Enterprise」ですね。バージョンアップを重ね、本家と遜色ない機能を備えています。
  前述のGitLabCIとの組み合わせも面白そうですよ。

タスク管理

最近はカンバン系が人気です。

• Trello
  https://trello.com
  一番人気じゃないでしょうか。ウチでも一部でちょっと使ってます。

• waffle.io
  https://waffle.io/
  他にも色々ありますが、GitHUBのIssueをカンバン風UIにしてくれるサービスです。

情報共有

最近はドキュメントはMarkdownで書きますよね。Markdown記法は今や必須スキルですね。
お気に入りのMarkdownEditorは持っておきましょう。
そんなMarkdownで気軽に書けるドキュメント共有サービス。

• Qiita:Team
  https://teams.qiita.com/

• esa.io
  https://esa.io/

Microsoft

ここで社名!しかもMicrosoft!?
Web界隈はほとんどMacユーザですよね。Appleイケてます。
でも、最近のMicrosoftはむしろそれ以上にイケてるかもしれませんよ！
Microsoftは要ウォッチです！

• オープンソース! https://github.com/Microsoft/dotnet
• Visual Studio Code https://www.visualstudio.com/ja-jp/products/code-vs.aspx
• こんなのもある http://rinna.jp/rinna/

鈴木商店で取り組んでいること

AngularJS

現在メインはBackbone/Marionetteですが、AngularJSへの移行に着手しています。
BackboneはWebの基礎を学ぶためには、そのフレームワークの「薄さ」が魅力ですが、大きいアプリケーションを開発するにはその薄さが結構しんどくなってきます。なってきてます。そろそろ移行期ですね。
クライアントサイドは流れが早過ぎるので、振り回されないようにしないと...

TypeScript

Angularと合わせて使い出しています。型つきバンザイ！

Docker

今はvagrantで頑張ってますが、Dockerがいいなあ(個人的な思い)

その他各種標準化

「標準化」です。ウチでいま一番力を入れています。
ベストプラクティスを見つけてみんなでそれを使おう！という動きですね。
絶えずアップデートしていきますよ。ネタが揃ったら公開することも考えています。

• コーディング規約
• こういう処理はこう書く！というサンプル集
• 各種ボイラープレート的なもの
• 見積り技法
• 提案書はこう書こう！
• その他、「全員バラバラなもの」→「標準化」

トップダウンで始まった標準化活動ですが、最近はボトムアップでいろいろ提案がでてきていい感じに回り始めています。

今回のワークショップ

プチハッカソンをやりました！
後日内容載せるかも。

来年以降のイベント予定

来年はまだ何も決まってません(笑)

ですが、不定期になるとは思いますが、その時にホットなトピック(世の中的に/社内的に)を勉強会という形でアウトプットすることでしょう(たぶん)。
今後共よろしくお願いします

おわりに

AWS上で構築するRESTfulアプリ勉強会～Web開発ワークショップ～ - connpassは今回を以って終了です。
参加いただいた皆様、会場を提供していただいた企業様、いろいろ動いてくれたスタッフの皆様、本当にありがとうございました。

これにて終了！またね！

Hen gap lai!