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

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

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

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

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

atnd.org

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

www.codegrid.net

普段フロントエンドの第一人者とお話する機会はなかなかありませんが、 「CodeGrid 6周年記念パーティー」 は、執筆者の方々をはじめとした第一人者の方々とお話できる大変貴重なイベントでした。
場所は、表参道駅より徒歩2分の、普段は結婚式の2次会などで利用されるオシャレな会場。

f:id:c5meg1012:20180517134153j:plain:w400

開始直後にLT大会が始まり、 「CodeGrid創世記」「知っておくと便利なネイティブメソッド」 などお話を聞くことができました。 CodeGridの名前の由来や、最初に使用していたツールなど聞けて面白かったです。
「もう一度あの時に戻っても、同じような技術スタックで作ると思う」と仰っていて、6年後から見ても後悔のないサービスづくりができるって、すごいことだなと思いました!

f:id:c5meg1012:20180517134352j:plain:w400

このイベントでは、6周年を記念したCodeGridオリジナルTシャツが販売され、過去に販売されたTシャツも買うことができました。
弊社のエンジニア、やまぐちより「僕のサイズの2XLは売っていませんでしたので、次回はあると嬉しいです。」とのことですので、次回よろしければぜひ、よろしくお願いいたします🙏🏻笑

f:id:c5meg1012:20180517134417j:plain:w400

懇親会では、CodeGrid執筆者の方々とも直接お話ができ、最近のフロントエンドの動向についてなどお話することができました。
@nakajmgさん、@tacamyさん、@tomofさん、@leader22さん、@yomotsuさん、ありがとうございました!
具体的には、

  • 6年間運用しつづけているCodeGridのメンテナンスについて
  • JavaScriptではどんなテストを書いているか
  • JavaScriptでの状態管理はどうやっているか
  • JavaScriptで型指定などしているか
  • WebGLの活用法、将来的な見解

などなど、フロントエンドの仕事を行うにあたって、普段疑問に思っていることや、実装方針など多くの意見を交えることが出来ました。
近頃は、フロントエンドの仕事を行っていると、React, Vueなどのフレームワークを使うこと前提で開発を行うことが多いですが、実際にどんな実装スタイルでフレームワークを使っているのか意見を聞かせていただきました。
ピクセルグリッドさまはフロントエンド領域にフォーカスして業務を継続していらっしゃるので、経験や専門知識が豊富で話題が尽きなかったです。

f:id:c5meg1012:20180517134446j:plain:w400

参加メンバーより感想

やまぐち

執筆者の方々とJSフレームワークやWebパフォーマンスについての意見交換をしたり、普段聞けないようなことをお話できました。個人的にはWebGLを学び始めていたので、最近の動向を聞くことができて良かったです。

める

実はこういう懇親会がちょっと苦手で、いつも何を話したらいいのか分からなくなってしまって、せっかくすごい方と一緒にいるのにもったいない...!と後から後悔するタイプだったので、今回は一緒に参加したメンバーからいろいろ質問してくれて、しかもどれも本当にいい質問で、とても有意義な時間になりました。参考にします!

ごー

このイベントは3度目でしたが、出席者のほとんどの方がCodeGridを購読しているフロントエンドエンジニアだと思うと親近感が湧きました。
知り合いがいないと、会場の参加者に話しかけることは、なかなか敷居が高いかと思いますが、CodeGridを購読しているので、記事を読んだことや記事についての意見などを中の人に話しかけると、フロントエンドという共通の話題でめちゃめちゃ楽しめるイベントだと思います。
ぼくは、わりとミーハーなところがあるので、知っている有名なエンジニアの方をつかまえては、たくさんお話を聞けて満悦しております。
フロントエンド分野の業界へコミットしている方々が多めに参加されているイベントなので、今後も興味がある方が周りにいたらぜひ誘って参加したいと思います。

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

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