オルトプラスエンジニアの日常をお伝えします!

ぼくの最近の開発環境

この記事は Altplus Advent Calendar 2017 の4日目のエントリです。 ※Qiitaに書いた記事を転載しています。

 

こんにちは、オルトプラスラボの嶋田(id:cimadai)です。

 

今日は私の最近Web開発に使っているお気に入りの開発環境について紹介したいと思います。

どのような環境か?

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

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

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

IntelliJ IDEA

www.jetbrains.com

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

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

Play Framework

Play Framework - Build Modern & Scalable Web Apps with Java and Scala

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

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

Scala

The Scala Programming Language

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

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

TypeScript

www.typescriptlang.org

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

SCSS

sass-lang.com

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

Vue.js

jp.vuejs.org

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

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

実際のサンプル

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

github.com

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

まとめ

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

それではまた別の日に!