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

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

CodeGrid 6周年記念パーティーに参加してきました!

エンジニアの、めるです!
初めてのUUUMエンジニアブログです、よろしくお願いします!😊

表題の通り、5/11(金)に青山で 「CodeGrid 6周年記念パーティー」 が行われ、弊社のフロントエンドに携わるエンジニア3名で参加してきました。

atnd.org

CodeGridというのは、株式会社ピクセルグリッドさまが運営する、フロントエンドの技術マガジンです。
詳しくは以下をご覧ください!

www.codegrid.net

続きを読む

今年も開発合宿に行ってきました

f:id:sakaryu02_u:20180511174900j:plain

こんにちはシステムユニットのさかいです。

5/7(月)~5/8(火)にUUUM攻殻機動隊のエンジニア達で開発合宿に行ってきました。

場所は都内から車で2時間弱、湯河原にある「おんやど恵」という旅館で、 一昨年の開発合宿でもお世話になった温泉旅館です。 ここの旅館は、前回行った際のブログにも書いてますが、

・都内から2時間程の近さ
・高速wi-fi環境
・24時間使える会議室
・天然温泉

といった魅力があり、私たちもリピーターとしてまたお世話になりました。

旅館紹介

今回お世話になった旅館「おんやど恵」ですが、実は開発合宿用のプランを用意していることで有名で、私も初参加でしたがとても集中して開発することができました! 簡単に紹介します。

続きを読む

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

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の中が冗長になってしまうので関数化するなどの対応をしたほうが良いと思いました。
頑張って調べたけれどもっと効率の良い方法などありましたらご教授お願いいたします!