どのような環境か？

普段Web開発をするのに使っているのが、以下のような感じです。

IDE:
- IntelliJ IDEA
Server side:
- Play Framework x Scala
Client side:
- TypeScript with Vue.js & SCSS

では実際にそれぞれの特徴について簡単にご紹介します。

IntelliJ IDEA

最近身の回りでも一大ブームメントを起こしつつあるIDEです。
JetBrainというIDEばかりを作り続けている会社が作った至極の一品です。
Scalaを嗜む身としては必需品です。
IntelliJ IDEA以外にもRiderとかCLionとか使ってます。超便利。

この記事を書いている時に利用しているのは 2017.2.6 というバージョンです。

Play Framework

Java/ScalaにおけるWeb Frameworkの決定版、といえる頼もしいやつです。
フレームワークで利用する言語をJavaかScalaで選べるので、どちらかが得意な方であればすぐに利用できます。
ちなみに私はScala版を利用しています。

この記事を書いている時に利用しているのは 2.6.7 というバージョンです。

Scala

Odersky教授によって生み出されたプログラミング言語です。
サーバーサイドの言語として利用しています。
Javaなんて要らなかったんや！という気持ちにさせてくれます。

この記事を書いている時に利用しているのは 2.11.11 というバージョンです。

TypeScript

Microsoftが開発したJavaScriptに対して型付けを行えるAltJSの一つです。
TypsScriptで記述したプログラムをtscというコンパイラで生JSに変換して利用します。
私はこの変換はWebpackを使ってやってます。
もう型の無い言語は書けない体なので、生JSは恐ろしくて触れません。。。

SCSS

SCSS(サス)は、従来のCSSのイマイチなところをいろいろと改善してくれているものです。
基本的な構文としてはCSSのものをそのまま利用できるのですが、mixinができたりネストが
できたり、変数が使えたりととっても便利に利用できるのでベターCSSとして利用しています。

Vue.js

Vue.jsは従来の(jQueryにありがちな)フロントエンド開発のつらみを取り去ってくれる
フロントエンド用フレームワークです。
もうDOM操作を自分で各必要はありません。すべて宣言的に記述することができ、
なおかつあらゆる変数がリアクティブに実装されていますので、jQuery時代とくらべてModel-View間の実装をかなり省略することができます。
DOMちまちま組み立てるの本当に辛いですよね。

このフレームワークの中で、TypeScriptとSCSSを合わせて利用しています。

実際のサンプル

それぞれどんな感じでどう使ってるのよ？というところですが、
実際のプロジェクトから抜粋してサンプルを作ってみたので興味のある人は御覧ください。

cloneしたら sbt run だけで起動すると思います。

まとめ

便利なものをどんどん使えるようになると楽しく仕事ができますね！

それではまた別の日に！