UUUM攻殻機動隊(エンジニアブログ)

UUUMのエンジニアによる技術ブログです

社内勉強会でサービスクラスがなぜ存在するのかについて紹介しました

nazoです。

最近はUUUMもエンジニアを含む開発チームもメンバーが増えてきました。メンバーが増えてきた時に、どうしても技術力にムラがある(単純に高い低いという話ではなく、得意な点や考え方が個人により異なるということ)という問題が生じます。

個別の細かい技術についてはその場で説明すれば良いのですが、「設計」と言うと単純に説明するのは難しく、そもそも人によって考え方にも違いがあります。とはいえここは抑えておいてほしいというところはあるので、社内で勉強会を開催して説明した内容を社内向け文書も兼ねて公開したいと思います。

今回は「サービスクラス」の作り方について紹介したいと思います。サービスクラスという概念はバックエンドに限らず、フロントエンドやその他様々なアプリケーションで応用できる概念かと思います。資料には例外についての記述もありますが、ここでは取り上げません。

以下は資料を補足するような内容になります。本件は「DDDの一歩手前」くらいの内容と捉えています。またサービスクラスの使用を強制するものでもありません。

続きを読む

Rails開発環境をDocker化したときのtips

こんにちは、Railsエンジニア見習い補佐のナカハシです。

新しくRailsアプリ開発環境を立ち上げるに辺り、Ruby層まで含めたDocker化をしてみたときのあれこれを残しておきます。

f:id:k_nakahashi:20180403141337p:plain

今回の構成

新しく作るRailsアプリは、他のUUUMのRailsアプリのよくある構成と同様、Rails + MySQL + Redis(主にセッション用)の構成にしました。

続きを読む

ansibleでECSのタスク定義を更新し、安全に機密情報を管理する

nazoです。

ansibleにはクラウド操作モジュールがいくつか用意されており、特定のインスタンスの操作とは別に、クラウドインフラの構成管理も行うことができます。

今回はそれを利用して、ECSのタスク定義とサービスの更新をansible経由で行いたいと思います。ansibleは2.5以上のバージョンが必須になります。執筆時点ではベータなので、 pip install ansible==2.5.0b2 でインストールしてください。

続きを読む

DCI Tokyo 1 に会場提供しました!

エンジニアのナカハシです。

1/10に、Lean Architecture / DCIの勉強会「DCI Tokyo 1」が行われ、弊社にて会場を提供しました。

会場は、普段はクリエイター(YouTuber)向けに開放しているセミナールームのRUUUMです!

当日は、『マルチパラダイムデザイン』や『The DCI Architecture: A New Vision of Object-Oriented Programming』の著者、James Coplienさんによるウルトラ貴重なセッションと、懇談会を行いました。

続きを読む

Vue単一ファイルコンポーネントで共通のSCSSファイルを読み込む

どうもエンジニアのやまぐちです。

年末はビルドツールを触る機会が多かったため寝ても覚めてもWebpackな感じでした。 そんな中で単一ファイルコンポーネントでSCSS共通の変数やmixinを使う場合に少し悩んだので、 同じように苦労している方がいれば参考にしていただけたら幸いです。

https://github.com/webpack-contrib/sass-loader

ディレクトリ構成

ディレクトリ構成は以下で進めていきます。

/example
 ├ webpack.config.js
 ├ dist
 │ ├ app.js
 │ └ index.html
 └ src
  └ assets
   ├ script
   │ ├ app.js
   │ └ App.vue
   └ style
     ├ global.scss
     ├ _mixins.scss
     └ _variables.scss

/src/assets/style/global.scssでは、更に変数とMixinのファイルをimportします。

# global.scss

@charset "utf-8";

@import "_variables";
@import "_mixins";

単純に@import

styleの中で@importすれば読み込むことが可能です。

# App.vue

<template>...</template>
<script>...</script>

<style lang='scss' scoped>
@import "../style/global.scss";

h1 {
  @include font-size($font-md);
}
</style>

しかし、この方法だと各ファイルのstyleに@importを記述する必要があり、保守性も悪いため実用的ではありません。

vue-loaderで設定

vueファイル内でscssを使うためにvue-loaderのオプションにsass-loaderを設定していると思います。
このsass-loaderのオプションを更に設定することで共通のscssファイルを読み込むことができます。

# webpack.config.js

module.exports = {
  entry: './resorces/assets/script/app.js',
  output: {
    path: './dist',
    filename: '[name].js',
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            css: {
              loader: 'css-loader',
            },
            scss: {
              loader: 'sass-loader',
              options: {
                data: '@import "global.scss";',
                includePaths: path.resolve(__dirname, './src/assets/sass/'),
              }
            },
          },
        },
      },
      ...
    ],
    ...
  },
  ...
}

sass-loaderオプションのdataincludePathsを指定することにより共通のSCSSファイルを読み込むことができます。

  • dataにはstringが設定でき@importを記述することでビルドに読み込まれるvueファイル内に自動的に追加されます。
  • includePathsにはimportしたいファイルが格納されているパスを指定します。

上記の設定をすることで全ての.vueファイルのscssの記述で@importが必要なくなります。

もちろんこちらの設定はSCSSファイルをビルドする際にも使用できます。
(SCSSファイルのビルド時には起点となるファイルでimportすれば良いのであまり必要なさそうですが。。)

# App.vue

<template>...</template>
<script>...</script>

<style lang='scss' scoped>
h1 {
  @include font-size($font-md);
}
</style>

まとめ

Webpack側で上記の設定しておくことで単一ファイルコンポーネント側に余計な記述をしなくて済みました。 ただしwebpack.config.jsへ単純に記述してしまうとmoduleの中が冗長になってしまうので関数化するなどの対応をしたほうが良いと思いました。
頑張って調べたけれどもっと効率の良い方法などありましたらご教授お願いいたします!

必要最低限に理解する、ジェネリクスと共変・反変

こんにちは、アプリエンジニア見習い補佐代理のナカハシです。

最近Kotlinを勉強し始めて、読みやすくて書きやすい言語だなと思ったのですが、そこで出てきたジェネリクスの「変異」という機能で「うん?」となったので、改めてジェネリクス周りの初歩知識を整理することにしました。(そもそも型あり言語をちゃんと書くのも久しぶりだし...)

Kotlinを使って記事を書きますが、他の言語でも概念的にはだいたい同じですし超シンプルな記述でまとめていますので、Kotlin食わず嫌いの型も是非ご一読下さい。

そもそもジェネリクスがないといつ困るのか

続きを読む

Jestをvue-test-utilと組み合わせてスナップショットテストやってみた

フロンエンドエンジニアごーです。

vue-test-utilsのドキュメントを読んでいて、Jestというテストフレームワークが紹介されていたので、どんな機能があるのか試してみました。

Jestとは

Facebook社製の快適なJavascriptのテストを実現するためのフレームワーク。

Reactアプリケーションを含む全ての JavaScriptコードのテストに利用可能で、複雑な設定ナシで高速に動作する。

  • githubのstar: 13,840 (2017/12/04の時点で)
  • 2014年から開発が行われている

facebook/jest

続きを読む