RAKUS Developers Blog | ラクス エンジニアブログ

株式会社ラクスのITエンジニアによる技術ブログです。

イベント詳細についてはこちらをクリック

大阪開発ビアバッシュレポート ~3月「トラブル事例特集」~

こんにちは。新卒1年目エンジニアのbadaikiです。

はじめに

今回は、先日大阪オフィスで開催された3月ビアバッシュをご紹介いたします。
前回のビアバッシュの記事はこちらです。↓

tech-blog.rakus.co.jp

テーマ枠発表

今回のテーマは、「トラブル事例特集」。今年度に発生したトラブルを発表していただきました。
「今年度のトラブルは今年度のうちに」ということで、何が原因でどのように対処したのか、各チームに当時の心情も込めてお話していただきました。
共有したいところなのですが、ほとんどの内容が社外秘の内容のため以下は発表全体の総括になっております。

全部で5つのサービスで起きたトラブルを発表していただきました。
なかには「リリース日と震災が重なったことで出社できた社員が2名という状況下で発生したバグ対応」というものもあり、そういうこともあり得るのだと知りました。

トラブルを起こさないことが一番ではありますが、トラブルが起きてしまったときに如何に冷静かつ迅速に対応できるかが重要になると感じました。すぐには難しいですが、いずれは私もトラブルの対応ができる技術を身につけていきたいです。

これまで配属されてからほとんどのビアバッシュに参加してきましたが、いつものビアバッシュと比べて緊迫感があったような気がしました。

自由枠発表

テーマ枠のほかに自由枠発表もありました。
テーマ枠とは異なり、今自分が気になっていること、伝えたいことを題材に2名の発表者が登壇してくださいました。今回は2名とも新卒1年目の若手が発表していただき、最近つまったことや今年度を振り返った内容となっていました。

サービスの環境構築

チームに新しく参入するメンバーの環境構築や開発の準備を行った際に、苦戦した点を発表していただきました。
あと3か月ほどすれば新卒の後輩が私のチームにも配属されるため、私も他人事ではないなと考えながら聞いておりました。 手順書に記載されている通りに行うのではなく、なぜこのスクリプトを叩く必要があるのか、なぜこの作業が必要なのか、を考えながら作業をしていくべきだと感じました。

1年間で得た新たなCSSの知識

新卒1年目のメンバーが配属してからの期間で得たCSSの知識について発表していただきました。
この方は学生のときからCSSに興味があり使っていたそうなのですが、業務レベルにはまだ達していなかったことを痛感したそうです。

f:id:badaiki:20190318192633p:plain

私も学生のときに得た知識だけでは足りないと思う節がこの一年間だけで多くありました。今の知識だけで十分だと慢心せずに積極的に技術を吸収することの重要さを再認識いたしました。

f:id:badaiki:20190318192410p:plain

最後には彼の今後の成長意欲を感じました。

おわりに

普段はあまり聞くことができない各サービスのトラブルについて聞くことができました。直で聞くことにより、当時の緊迫感なども伝わり普段のビアバッシュとは一風変わったビアバッシュだったのではと感じました。
私自身はまだ大きなトラブルに見舞われたことはありませんが、発生時には慎重に対応していきます。

ラクスでは同じような問題を二度起こさないよう、開発全体で起きた問題やその対処法を共有しております。 過去の知見を活かし、障害を乗り越え、ラクスのサービスは進化していきます。

SchooでJavaScriptについて学習してみた

はじめに

はじめまして、新卒1年目のエンジニアのmrym_618です。

今回は、SchooでJavaScriptについて学習してみましたので、その感想を書いていきます。

目次

Schooとは

Schoo(スクー)とは、大人たちがずっと学び続ける生放送コミュニティであり、参加型の生放送授業と、4,600授業以上の動画教材で 「仕事に活きる」知識・スキル・考え方を学べるサービスです。

schoo.jp

  • 特徴
    • プログラミングやWebデザインなどのIT分野以外にも英語やビジネススキル、企画・マーケティングなど幅広い分野の授業がある
    • 生放送ならではの講師や生徒同士でのリアルタイムなコミュニケーションをとることができる
    • PCだけでなく、スマートフォン、アプリからも利用することができる

実際に学習してみた

今回は、業務でも使うことが多いJavaScriptについて改めて学習したいと思い、JavaScript入門を受講してみました。 また、ドットインストールでもJavaScriptについての学習を行い、Schooとの比較をしてみました。

schoo.jp

Schooとドットインストールの比較

  • Schoo

    • 講義ベースなので、基礎からわかりやすく学習できる
    • 講師の方が実際のエンジニアの方なので、現場ではどのように使われるかを話してくれる
  • ドットインストール

    • 一つ一つの項目を短時間で学習することができる
    • 知りたい項目をピンポイントに学習できる

新しいことなど基礎からしっかり学習したい場合は、Schooで学習した方が分かりやすいと感じました。逆に、ある程度知識があり、短時間でピンポイントに学習したい場合は、ドットインストールで学習する方がいいと感じました。なので、どのように学習したいかによって使い分けることが大切だと思いました。

まとめ

今回は、SchooでJavaScriptについて学習しました。Schooは、新しいことを基礎からしっかり学習するには分かりやすいと感じましたので、今後も様々な分野を学習するときに活用していきたいと思います。

【PostgreSQL】大量データの投入にgenerate_series()関数の使用をおススメする3つの理由

はじめに

こんにちは、新卒で入社して3年目のnorth_mkyです。
最近業務でSQLチューニングをする機会があったので、実行計画を読み解く記事を書こう!...と思いたったのですが、記事を書くにあたってサービスのデータベースを使うわけにはもちろんいかないので適度なサンプルデータベースを作成し、 大量のデータを投入する という準備作業を行う必要がでてきました。

今まで大量のデータを入れるという作業はあまりしたことがなかったため、備忘も込めて当初予定していた記事を書く前に大量データの投入について述べたいと思います。

PostgreSQLに大量データを投入する方法は大きくは2つ

色々探していると、大きくは下記2つが投入方法として出てきました。

  1. CSVファイルをインポートする方法
  2. generate_series()関数を使用する方法

1. はpostgresqlが用意しているCOPYコマンドを使用する方法です。公式のお墨付きです。

14.4. データベースへのデータ投入
データベースにデータを初期投入するために、大量のテーブル挿入操作を行う必要がままあります。 本節では、この作業を効率良く行うためのちょっとした提言を示します。
(中略)
単一コマンドですべての行をロードするために一連のINSERTコマンドではなく、COPYを使用してください。 COPYコマンドは行を大量にロードすることに最適化されています。

https://www.postgresql.jp/document/10/html/populate.html

ですが、公式の言葉を押し切って今回私は2. generate_series()関数を使用する方法をおすすめします。

generate_series()関数を使用する方法をおすすめする3つの理由

1. 大量データ投入処理までの準備はなし

両者の作業手順は以下になります。
投入方法1では大量データを生成する→生成したデータをインポートする、というデータ投入前にデータを用意する準備作業が発生しますが、投入方法2ではデータ生成→データインポートの両方の処理をSQL1文で行ってくれるため、投入するまでにかかる準備はありません。generate_series()関数は標準で入っているので拡張モジュールの読み込み等も不要です。

  1. CSVファイルをインポートする方法
    1. CSVファイルを生成するスクリプトを作る
    2. 作成したスクリプトを実行する
    3. COPYコマンドに適切な引数を与えて実行する
  2. generate_series()関数を使用する方法
    1. 大量データを生成するSQLを作る(generate_series()関数を使用)
    2. SQLを実行する

2. 学習コストがほとんどない

投入方法1のCSVファイル生成スクリプトは自分の好きなやり方で組めばいいのでそこまで時間はかかりませんが、鬼門はCOPYコマンドだと思います。COPYコマンドはおそらく大量データの投入か、既存テーブルの別テーブルへの複製に使うと思いますが、いざ使おうとすると色々お作法に馴染みがなく手間取ってしまいます。

COPY table_name [ ( column_name [, ...] ) ]
FROM { 'filename' | PROGRAM 'command' | STDIN }
[ [ WITH ] ( option [, ...] ) ]

ここでoptionは以下のいずれかです。
FORMAT format_name
OIDS [ boolean ]
FREEZE [ boolean ]
DELIMITER 'delimiter_character'
NULL 'null_string'
HEADER [ boolean ]
QUOTE 'quote_character'
ESCAPE 'escape_character'
FORCE_QUOTE { ( column_name [, ...] ) | * }
FORCE_NOT_NULL ( column_name [, ...] )
FORCE_NULL ( column_name [, ...] )
ENCODING 'encoding_name'

https://www.postgresql.jp/document/10/html/sql-copy.html

ファイルパスの指定1つにしてもwindowslinuxで異なるのはもちろんのこと、投入するカラム値に空白が入っている場合の扱いを指定したりなど、馴染みのない人間にとってはトライアンドエラーで時間がかかります(私は5-10分かかりました)。

一方投入方法2はいつもどおりSQLを作成するだけなので学習コストはほぼなしです。

3. 実行時間がCOPYコマンドと変わらない

これは実測して驚いたのですが、両者とも投入時間はほぼ変わらないという結果になりました。

公式のお墨付きのCOPYコマンドと同等の処理性能で、準備に時間がかからないというので私はこのgenerate_series()関数を使用する方法をおすすめします。

generate_series()関数を使用した大量データ投入方法とは

「顧客テーブルに1000万行のデータを入れる。名前は"ラクス太郎n"にする(n=1...10,000,000)」

上記を満たす大量データ生成SQLは以下になります。
1000万行が入った1GB超のファイルを用意する必要はありません。SQL1文で作成できます。

INSERT INTO customer (id,name) 
 SELECT 
     i, format('ラクス太郎%s', i)
 FROM
     generate_series(1,10000000) as i
;

SELECT部分だけを打つと下記が返ってきます。

    ?column?    |        ?column?      
----------------+------------------------
              1 |       ラクス太郎1
              2 |       ラクス太郎2
              ...
       10000000 |    ラクス太郎10000000

連番を生成し、集合として返すgenerate_series()関数を応用すると、このようにその場でテーブルを作るようなことができ、大量データを投入することができます。他にも上述のformat()関数のようにrandom()関数などと組み合わせるといい感じの大量データを手軽に作成することができます。

検証 : COPYコマンド VS generate_series()関数

あるテーブルに1000万行を投入する処理の経過時間を計測しました。

環境

サンプルデータベース

PostgreSQLTutorial.com のサンプルデータベースを使用しました。
チューニングの記事を書く目的だったため、ある程度外部キー制約があったりカラム数があったりするデータベースはないかな、と探していたらすぐにこのデータベースが見つかりました。

結果

両者ともほぼ同じ結果になりました。

  1. COPYコマンド
dvdrental=# COPY customer (store_id,first_name,last_name,email,address_id,activebool,create_date,last_update,active) FROM '/Users/north_mky/customer.csv' ( delimiter ',', format csv, header true );
COPY 10000000
Time: 556051.126 ms (09:16.051)
  1. generate_series()関数
dvdrental=# INSERT INTO customer (store_id,first_name,last_name,email,address_id,activebool,create_date,last_update,active)  
dvdrental-# SELECT 
dvdrental-#     2,
dvdrental-#     'Austin',
dvdrental-#     format('Cintron%s', i),
dvdrental-#     format('austin.cintron%s@sakilacustomer.org', i),
dvdrental-#     605,
dvdrental-#     't',
dvdrental-#     '2006-02-14',
dvdrental-#     '2013-05-26 14:49:45.738',
dvdrental-#     1
dvdrental-# FROM
dvdrental-#     generate_series(1,10000000) as i
dvdrental-# ;
INSERT 0 10000000
Time: 558479.994 ms (09:18.480)

おわりに

generate_series()関数は大量データの投入に対して、楽に導入できて楽に使える関数です。
テスト時に大量データが必要になった際の手助けになれば幸いです。

RAKUS Meetup Tokyo #2 フロントエンドNight : イベントレポート

f:id:moomoo-ya:20190308181401p:plain
RAKUS Meetup のロゴ

@moomooya こと 勉強会最速オジサン を目指している鈴木です。 先日弊社にて RAKUS Meetup Tokyo #2 フロントエンドNight と称したイベントを開催しましたので、そちらのイベントレポートを投稿します。

いつもはイベント閉幕後3秒以内にレポートを公開しているのですが、今回は1,688,400秒ほど経過してしまいましたorz

  • 当日の様子
  • 発表の紹介
    • Vue.js の新規プロダクトで楽して UI を提供しようと思ったらそこまで楽じゃなかった話
      • 話の経緯と発端
      • 選択の成否
      • 鈴木の感想
    • 既存 Web アプリケーションへの React.js 適用
      • 話の経緯と発端
      • React 導入にあたってやったこと
      • 既存実装との共存と、その後の課題
      • 鈴木の感想
    • Vue.js を初めてプロダクトに導入して直面した課題と得られた幸せ
      • プロダクトに Vue.js を導入してぶつかった課題
      • Vue.js を採用して幸せだったこと
  • 懇親会
  • 次回開催について

当日の様子

f:id:moomoo-ya:20190308183042p:plain
RAKUS Meetup Tokyo #2 会場の様子

今回は30人の募集枠を予定していたのですが、予想外の好評につき会場をグループ企業であるラクスパートナーズのオフィスに変更しての開催となりました。

当日は雨も降る悪天候の中ご参加いただきありがとうございました。

続きを読む

puppeteerを用いてラクスのエンジニアブログに自動でアクセスしてみた

はじめに

こんにちは。エンジニア1年目のy_kwmtです。先日、業務でpuppeteerを用いてE2Eテストのテストコードを実装しました。E2Eテストとは、End to Endテストの略で、開始から終了までアプリが期待通り動くか確認するテストです。今回はpuppeteerの学習をするためにpuppeteerを用いて自動でラクスのエンジニアブログサイトにアクセスしたことについて書きたいと思います。

目次

puppeteerとは

puppeteerは、Node.jsでHeadless Chromeを自動で操作できるようにするライブラリです。puppeteerを用いることでクリック、テキスト入力、画面遷移などが自動で行えます。 公式サイトはこちらです。

github.com

導入方法

今回はこちらの記事を参考にインストールを行いました。

tech-blog.rakus.co.jp

まずはNode.jsとnpmをインストールしてください。 Node.jsはこちらからダウンロードを行い、インストーラを実行し、画面の指示に従ってインストールしてください。npmのインストールは以下を実行してください。puppeteer は操作結果を Promise で返すので、async/await が使えるv7.6.0 以降のバージョンを用意したほうがよいです。

npm init

Node.jsとnpmのインストールが完了したら、puppeteerのインストールを実行します。

npm i puppeteer

コーディング、実行

puppeteerのインストールが完了したら、コードを書いていきます。コードはこちらのページを参考にさせていただきました。

webbibouroku.com

以下のファイルを実行してラクスのエンジニアブログにアクセスします。今回は実行できているか確認するためにブラウザを表示するだけでなく、スクリーンショットも撮影しました。そのコードがこちらです。

ファイル名:sample.js

const puppeteer = require('puppeteer');

(async () => {
  //ブラウザを定義(headless:false ブラウザを表示する, true 表示しない)
  const browser = await puppeteer.launch({ headless: false });
  //タブを定義
  const page = await browser.newPage();
  //ブラウザのサイズを定義
  await page.setViewport({width: 1240, height:1080});

  //待機
  async function sleep(delay) {
    return new Promise(resolve => setTimeout(resolve, delay));
  }

  // Googleにアクセス
  await page.goto('https://www.google.co.jp/');
  // 検索窓に「ラクス エンジニアブログ」と入力
  await page.type('.gLFyf', 'ラクス エンジニアブログ');
  //スクリーンショット撮影
  await page.screenshot({path: 'google.png'});
  // 検索ボタンクリック
  //待機時間を設けないと止まってしまうことがあるので記述
  await sleep(5000);
  await page.focus('input[name="btnK"]');
  await page.click('input[name="btnK"]');
  //待機時間を設けないと止まってしまうことがあるので記述
  await sleep(5000);
  //スクリーンショット撮影
  await page.screenshot({path: 'search_result.png'});
  // 検索結果の先頭リンクをクリック
  await page.click('.rc > .r > a');
  //スクリーンショット撮影
  await page.screenshot({path: 'blog.png'});
  //ブラウザを閉じる
  await browser.close();
})();

コードを書いたら、コマンドでファイルを実行します。

node sample.js

実行中に撮影したスクリーンショットがこちらです。

f:id:y_kwmt:20190311181320p:plaingoogle.png

f:id:y_kwmt:20190311181255p:plainsearch_result.png

f:id:y_kwmt:20190311181225p:plainblog.png

最後に

今回はサイトにアクセスするという簡単な動作でしたが、puppeteerを0から始めてファイルを実行することができました。今後、また業務でpuppeteerを使うとなった時のために、これからも勉強を続けて複雑な動作を自動化できるよう頑張ります。

チーム全員で取り組んだ勉強会発表プロジェクト(アジャイル Nightふりかえり)

id:radiocat です。2/26に大阪オフィスで実施したMeetupでは楽楽精算開発2課のメンバー全員で半年かけて準備をして発表しました。今回はMeetupの内容と合わせて、全員で役割を持って取り組んだ勉強会発表プロジェクトの内容をご紹介します。

rakus.connpass.com

プロジェクトの経緯

私たち楽楽精算開発2課は成長サービスを支える開発組織として、常に新しい領域の開発に取り組んできました。一方で、開発部門としてMeetupというイベントを継続的に開催していくことになり、私たちのチームがどう関わっていくべきかを考えた時に、チームでイベントのコンテンツを作り上げるという新しいチャレンジを行ってその知見を残すことが私たちのチームらしい取り組みではないかと考えました。そして2月のMeetup発表者としてチームで名乗りを上げてプロジェクトをスタートさせました。

2018年10月にプロジェクトスタート

前回のMeetup の開催翌月にキックオフを行いました。 まず、どういうイベントにしたいかを全員で話し合って、発表テーマの候補を出しました。その中からいくつかのテーマに絞り込んでそれぞれのメンバーがいったん持ち帰り、次回までに発表テーマを検討することにしました。

11月

前月にそれぞれが持ち帰って検討した発表テーマと発表のイメージを共有して、イベントの全体像をすり合わせしました。 この時にそれぞれのメンバーが担当する発表内容の大枠が決定しました。若手メンバーは3人1組で発表資料を作って代表者が発表することになりました。

12月

前月に決まった発表テーマと内容の大枠をスライドに落とし込んでアウトラインレベルで中間発表を実施しました。そしてお互いの発表を聞いてフィードバックし合いました。このとき、主力エンジニア、中途社員エンジニア、若手エンジニア、スクラムマスターというそれぞれの視点で発表するという流れがだいたい確定しました。

1月

ドラフト版レベルのスライドで発表練習して、全員でレビューしました。ここまではスクラムマスターが最初に発表する流れにしていましたが、「いきなりスクラムマスターが場を引っ張って発表するのはなんか違うよね」となって、スクラムマスターは最後に発表する流れに変更しました。

2月

本番さながらの練習会を実施し、資料と発表内容の精度を上げていきました。チームで整合性を合わせる部分があるため前日までスライドのチェックや修正を行って当日を迎えました。

f:id:radiocat:20190306104925p:plain



発表したスライド

当日のスライドと合わせて発表に関わったメンバーのコメントをご紹介します。

続きを読む

大阪・梅田エンジニアもくもく勉強会を開催しました/します。

楽楽精算開発2課 岡本です。
今年から月1回のペースで開催している「もくもく勉強会」ですが、3月もまた実施しますので、告知も兼ねて2月実施回の模様をお伝えしようと思います。

ちなみに、1月の模様はこちらの記事で紹介されています。 tech-blog.rakus.co.jp

2月実施の模様

前回(1月実施回)の振り返りで主に以下のような意見が出たので、2月はこれらの改善を実施しました。

  • 参加者同士が離れて座りがち
  • 食べ物があったほうがいい
  • BGMの音が大きい

■参加者同士が離れて座りがち

前回は、机を離して設置していたため、それぞれの机に別れて参加者が座ってしまい、もくもく中にコミュニケーションが取りづらい状況でした。
前回の様子。空席が多くてどことなく寂しい感じ
f:id:okana-yg:20190306174109j:plain

そこで、今回は参加者同士が近くに座れるように、机の配置を見直しました。
今回の様子。写真の時点では全員揃っていないので空席ありますが、最終的には各机に一人づつで全ての席が埋まりました。
f:id:okana-yg:20190306174033j:plain

■食べ物があったほうがいい

食べ物があったほうがコミュニケーションを取りやすいのではという意見が出たので、今回はお菓子を用意してみました。
ちょうど実施日が2月14日だったのでチョコレートをメインに用意。
f:id:okana-yg:20190306174136j:plain

ただ、あまり消費量は芳しくなかったようです。
まだまだ残っています。
f:id:okana-yg:20190306174551j:plain
次回以降も、お菓子は用意しようと思うので、お越しの際はガンガン消費していってください。

■BGMの音が大きい

もくもく勉強会の会場では普段からRaspberryPiからラジオが流されるようになっています。
こんな感じ、ちなみにこのRaspberryPiでエントランスのディスプレイに流れている映像も制御しています。
f:id:okana-yg:20190306175115j:plain

前回はここから流れてくる音が大きすぎるという意見が出ていたので、今回は予め音を絞ってBGMを流していました。
ただ、RaspberryPiの処理の関係で時々BGMが途切れ途切れになってしまっていたようなので、次回は別の方法でBGMを流そうと検討中です。

次回告知

次回は3月14日に開催予定です。既にconnpassに公開中ですので。興味を持たれた方は是非お越しください。
rakus.connpass.com

Copyright © RAKUS Co., Ltd. All rights reserved.