RMS

RMSフロントエンドの話 第一話 技術概論

更新日:

初めに

お久しぶりです。RMSのフロントエンドをやっているMarcoです。先日最低限の機能だけでRMSをリリースさせていただきましたが、長らくしっかりした技術解説記事を書けていなかったので、せっかくなのでこの機会に執筆してみようと思います。

なお、あくまでこの記事はRMSのフロントエンドで採用されている技術の概論であり、各技術に関する詳細な記事については次回のRMSアップデート以降に行う予定です。

もし興味のある方は各自でGoogleに聞いたり公式ドキュメント読んだり、もっと気になる方はソフトウェア工房に来ていただければ語れると思います。

使っている技術の一覧

処理系

Bundle周り

Loader系

Pluginなど

開発向け

重要な技術について

webpack

webpackはbundlerであり、.vueや.ts、.jsといったスクリプトから、.scssなどのスタイルシートを取りまとめ、productionのための.jsや.cssにしてくれるすごいやつです。上記した技術の中でbundle周りはこのwebpackのbundle時に使われるものです。厳密にいえばbundle時に処理系も巻き込まれますが、一旦ここでは触れないことにします。

TypeScript

TypeScriptはJavaScriptに型などの追加機能を施した、plain JavaScriptにコンパイル可能な言語です。Interfaceを備えたり、ClassにPrivateなどの修飾子を備えているため、JavaScriptと比較して、明示的な実装が可能になっています。

Vue

Vue.jsはView層を中核とした、さまざまな規模で利用可能なコンポーネントベースのライブラリです。大きな特徴として、リアクティブシステムを備えていることが挙げられます。これによって時間割の値が(何らかによって)切り替わっても、その値を監視している部分が勝手に処理されます。大量のaddEventListenerを用意したり、大量のcreateElementを書く必要はありません。

Vue Router

Vue RouterはVueのコアと密接に連携した、シングルページアプリケーションを構築するためのライブラリです。リロードを挟むことなく複数のページを構築するため、例えばサイドバーやツールバーと言った、常に表示される(変更のない)部分は再レンダリングされることがありません。

Vuex

VuexはVueのコアと密接に連携した、値・状態管理のためのライブラリです。Vueはコンポーネントベースであり、親子程度であれば値を渡すことは可能ですが、孫ひ孫といった関係になるとバケツリレーが発生します。例えば学生の情報(学籍番号や学科など)はツールバーやサイドバーでも利用される一方、時間割を表示するためにも必要です。このとき、Vuexに値を保管しておくことで、どこのコンポーネントからでも利用出来るようになります。

Sass / SCSS

SassやSCSSは"強力なCSS"であり、plain CSSにコンパイル可能な言語です。SassとSCSSは同一のプロジェクトですが、二種類の記法があり呼び分けられています。RMSではSCSSを採用していますが、DOMTreeのようにネストした記法や変数定義、モジュール分割、ミックスインといった機能がサポートされていて、CSSを書くよりも便利なコーディングを楽しめます。

開発環境

作業のフロー

  1. vagrant upする
  2. sshfsでホストのほうにvagrant内のディレクトリをマウントする
  3. (サーバー側が必要ならサーバー側RMSアプリケーションを起動)
  4. vagrant sshからnpm run startしてwebpack-dev-serverが起動
  5. 作業開始

簡単な紹介

VagrantVirtualBox

仮想環境を提供してくれるVirtualboxと、仮想環境の構築などを支援してくれるVagrantを組み合わせて作業環境の基礎を築いています。

ubuntu/bionic64bento/ubuntu-18.04bento/debian-9

それぞれVirtualBoxで動かすBox(Linuxディストリビューションの環境)です。以前はBionicのUbuntuを使っていましたが、後述するsshfsと相性がよくなかったりしたのでbento(GitHub)のubuntuにしたり、本番環境に統一するためdebianにしたりしました。

sshfs (参考)

Vagrant内をSSHによってホストにマウントするためのファイルシステムです。これを利用したのは、webpackのホットリロード(ファイルの変更で部分的なリビルドをする機能)を動かすためにLinuxカーネルサブシステムであるinotifyを発火させる必要があったからです(この記事を書いている途中で、他メンバーからWindowsだと発火しないんじゃない?という話が出てきました……)。

裏話

RMS開発初期はTypeScriptの導入をしておらず、JSDocという方法でIDEに補完させていました。その遺産兼コーディング規約の統一を理由として、WebStormが推奨の開発エディタ(IDE)になっています。学生だとWebStormを含むJetBrains製品が無料で使えるので推奨していますが、今後他の環境でやりたいという希望をしてきた方がいれば受け入れます(フォーマット等は要相談ですが)。

Vagrant内の仮想環境がubuntu/bionicだった頃、頻繁にsshfsが死にまして、コード書いてる途中でエディタが息をしなくなる恐怖と戦っていました。既に作ってあるコンポーネントが結構多くて、ゼロからビルドするとそこそこ時間がかかるので、どうしてもホットリロードは必須の状況なんですよね。

終わりに

まだまだ機能も不足しているので、今後は月一度程度のアップデートで機能を増やし、後期の履修期間にはパワーアップしたRMSを届けられるように作業を続けていきます。

一年生も続々とやってきていて、まだ迷ってるけど気になっている一年生や、今からでも頑張りたい二年生はぜひとも気軽にソフトウェア工房に来ていただければと思います。(※中の人は色々な分野のやばいオタクが多いので、勝手に語らせると数時間かかるので気をつけましょう)

実は最近自宅に4kディスプレイを購入したのですが、大学で作業することが多くてあんまり触れてません……。悲しい。でも4kの情報量は最強だなと実感したので、作業環境に是非皆さんも採用してみてください。おすすめです。

-RMS

Copyright© ソフトウェア工房 , 2019 All Rights Reserved Powered by AFFINGER5.