社内で読書会 #0 を開催した話

今回はサクッとメモ書き程度の内容です。

社内の人と読書会をしました。
読書会とは、決められた期日までに自分が読むと決めた本を読んで、その感想を周りの人にLTする会です。
LTをして他の人とアウトプットを共有することで、聞いている方も効率よく情報をインプットすることができます。

開催するにあたって気をつけた点


  • お試し期間を設けて開催をする
    • いきなり沢山の人を呼んで失敗するのが嫌だった。
      • 身近なメンバーで実施して雰囲気を掴みました
  • 本を最後まで読んでいなくてもいい
    • 本を最後まで読んでいないとダメとなるのが嫌だった
      • ハードルを高く感じる人もいるのでやめてみました
  • ネガティブ・フィードバックはしない
    • ディスる風土を作りたくなかった
      -「こんな事も知らないのか」というのは絶対になしとしました
  • 自分が知っているノウハウも共有していく
    • 活気が生まれないのが嫌だった
      • 自分が知っていることをどんどんはなしてもらうようにしました

自分が読んだ本



DB周りの知識が薄いなと思っていたのと、インデックスについて多く語られている本を読みたかったので選びました。目からウロコなTipsが多いのでオススメです。また読んだ内容をまとめて発表したいと思います。

参考になった話


吉祥寺.pm14で聞いてお話の中で大変参考になるものがありました。

読んだ本についてesaでまとめて、毎日LTしあうなんてすごいな…
esaにまとめることはブログで代用できそうだし、個人的に真似していきたい。チームにも浸透すると良いな。

CodecademyのLearn ReactJS:PartIを受講してみた

@kakakakakkuさんに教えてもらったCodecademyLearn ReactJS:PartIを受講してみた。業務でjavascriptを使っているけれども、jQueryが主なので非常にいい経験だった。わからなくても用意されている答えを教えてくれるので、自分のコードと答えのコードを見比べてどこが間違ったか理解できるようになっている。何かしら別の言語を触っていれば更に理解するのが早いと思う。

Learn ReactJS: Part IとLearn ReactJS: Part II

コースは大きく分けて2つある。今回はLearn ReactJS: Part Iについて取り組んだことについて書く。
Learn ReactJS: Part Iは3つのパートに分けられる。

  1. JSX
    1. Intro to JSX
    2. Advanced JSX
    3. 【Pro】JSX
  2. React Components
    1. Your First React Component
    2. Components and Advanced JSX
    3. 【Pro】Authorization Form
    4. 【Pro】React Components
  3. Components Interacting
    1. Components Render Other Components
    2. this.props
    3. this.state
    4. 【Pro】Random Color Picker
    5. 【Pro】Components Interacting

【Pro】とついているものは、有料会員限定コンテンツだった。Learn ReactJS: Part Iは有料会員でなくとも、Reactを理解するためには十分な内容だった。全ての内容が英語なので敷居が高いように感じられ、自分も実際躊躇してしまった。しかし比較的簡単な英語で書かれているし、ブラウザのアドオンなどで訳してから内容を進めてもいいと思う。自分はアドオンで訳しながら学んだ。Reactについては初めて学ぶので復習をする際には、英語で挑戦しようと思っている。

Intro to JSX


  • ReactはJavaScriptのライブラリ
  • Facebookのエンジニアが開発した
  • 画面上にJSX式を表示することをレンダリングという
  • ReactDOMはJavaScriptのライブラリ
    • ReactDOM.renderメソッドでJSXをレンダリングする
       - renderメソッドには変数を渡すことが出来る
  • const h1 = <h1>Hello world</h1>;
    • この書き方はJSXと呼ばれる、HTMLのように見えるJavaScriptの構文

Advanced JSX


  • JSXではclassではなく、classNameを使う
  • JSXでは単一タグの末尾に必ずスラッシュをいれる
    • <img />
    • <br />
      • ×<br>
  • JSXタグの中にいても、JavaScriptのコードとして動かす場合は中括弧を使う{}
const name = 'Gerdo';
const greeting = <p>Hello, {name}!</p>;

const sideLength = "200px";

const panda = (
  <img 
    src="images/panda.jpg" 
    alt="panda" 
    height={sideLength} 
    width={sideLength} />
);

function myFunc() {
  alert('Make myFunc the pFunc... omg that was horrible i am so sorry');
}

<img onClick={myFunc} />


  • if文はJSX式に挿入できない
  • React.createElementの書き方もできる
const h1 = <h1>Hello world</h1>;
const h1 = React.createElement(
  "h1",
  null,
  "Hello, world"
);

Your First React Component


  • import React from 'react';import ReactDOM from 'react-dom';でインポートする
  • Componentには、renderメソッドがある
  • class名はUpperCamelCaseで書く
  • ReactDOM.renderにComponentのrenderメソッドを渡すことで呼び出すことが出来る
import React from 'react';
import ReactDOM from 'react-dom';

class MyComponentClass extends React.Component {
  render() {
    return <h1>Hello world</h1>;
  }
}

// component goes here:
ReactDOM.render(
    <MyComponentClass />, 
    document.getElementById('app')
);
);

Components and Advanced JSX


  • 複数行にわたるJSX式はカッコ()で囲む必要がある
  • componentの中でthisを使うことが出来る
    • インスタンスを参照している
  • componentの中でイベントリスナーを使うことが出来る

Components Render Other Components


  • conponentを相互作用させることによって、より強力となる
  • import { ClassName } from './filename';で別のコンポネントの取り込むことが出来る
    • をrenderで使う
  • 取り込まれるファイルのクラスや変数などは宣言の前にexportを付ける

this.props


  • propsでconponentからconponentへ情報を渡すことが出来る?
  • 難しい!理解不足!誰か分かりやすいサイト教えてくれないかな…

this.state


  • 自分自身のComponentの状態を管理する?
  • 難しい!理解不足!誰か分かりやすいサイト教えてくれないかな…その2

まとめ

  • CodecademyのLearn ReactJS:PartIを受講してみた
  • 最初は例文も多いが、途中から自分で書く部分も多くなり手を動かしながら学べた
  • 実行してすぐに答え合わせが出来るのもいいし、答えが用意されているのもありがたかった
  • this.propsとthis.stateが訳しながらということもあり、自分の中で理解が出来なかった。わかるように調べて理解し記事を書こうと思う
  • Learn ReactJS:PartIIもあるので続けてやってみる

社内もくもく会でRedashハンズオンをやった話

はじめに

yoshitaku_jpです。

社内でもくもく会を開催してみました。何を取り扱うか1つ決めておこう!となったときに、

  1. BI製品を扱っている会社なのでBI製品が良い
  2. ちゃんと資料が作成されているものがいい

と言う話が上がり、@ariarijpさんと@kakakakakkuさんが作成・講師をしてくださったRedashハンズオンを思い出しました。そして、今回はこれを社内メンバ数人でもくもく作業してみることにしました!自分はRedashハンズオン参加したこともあり、今回の社内もくもく会では講師・サポーターの立ち回りで動きました。

資料に関しては最高のものなので、再度メンバーを増やして開催する際や、別の方がやる際に参考になればとメンバが詰まったところを記載しておきます。

実際の作業で詰まったところ

Windows端末にdockerをインストールすることに手こずる

RedashハンズオンはDockerを使って作業を進めていきます。今回集まってくれた方の中には、Dockerがインストールされていない人もいたので、windows端末にDockerをインストールする作業からはじめました。「Dockerってどんなもの?」という質問も出ましたので、技術書典で購入した「マンガでわかるDocker」を読んでもらったりしてイメージを掴んでもらいました。(「他の仮想環境と技術的にどう違うのか」という質問も出たので、これはいつかまとめてちゃんと説明できるようにしておきます………)

Redashハンズオンの部分ではないのですが、一番詰まった点はwindows端末にDockerをインストールする点でした。Virtualizationが有効になっていなかったりで、BIOSをいじったりしました。キャプチャがないので追記します。
[Docker] Docker For Windowsをセットアップしてみた (Docker初心者向け)

docker-compose upがうまくいかない

docker-compose upした後に、Redashがうまく立ち上がらないことがありました。。(自分はWindows環境ではないのでエラーログのキャプチャがないのですが、後で共有してもらい貼っておきます。)原因はホスト側の端末でポート80を既に使っているために起こったもののようです。普段から開発している端末でハンズオンをおこなったので、まっさらなWindows端末でやっても同じことが起きるのでしょうか…調査が必要かも?またハンズオンを開催する際に同じことが起きるか見ておきます。今回は2/2人の確率で起きてしまったので、Windowsの方は注意が必要だと思います。

解決方法としては、docker-composeファイルのnginxのportsの”80:80″を”8081:80″にして、再度docker-compose upを叩きます。

# This is an example configuration for Docker Compose. Make sure to atleast update
# the cookie secret & postgres database password.
#
# Some other recommendations:
# 1. To persist Postgres data, assign it a volume host location.
# 2. Split the worker service to adhoc workers and scheduled queries workers.
version: '2'
services:
  server:
    image: redash/redash:4.0.1.b4038
    command: server
    depends_on:
      - postgres
      - redis
    ports:
      - "5000:5000"
    environment:
      PYTHONUNBUFFERED: 0
      REDASH_LOG_LEVEL: "INFO"
      REDASH_REDIS_URL: "redis://redis:6379/0"
      REDASH_DATABASE_URL: "postgresql://postgres@postgres/postgres"
      REDASH_COOKIE_SECRET: veryverysecret
      REDASH_WEB_WORKERS: 4
  worker:
    image: redash/redash:4.0.1.b4038
    command: scheduler
    environment:
      PYTHONUNBUFFERED: 0
      REDASH_LOG_LEVEL: "INFO"
      REDASH_REDIS_URL: "redis://redis:6379/0"
      REDASH_DATABASE_URL: "postgresql://postgres@postgres/postgres"
      QUEUES: "queries,scheduled_queries,celery"
      WORKERS_COUNT: 2
      REDASH_HOST: "http://localhost"
  redis:
    image: redis:3.0-alpine
  postgres:
    image: postgres:9.5.6-alpine
    # volumes:
    #   - /opt/postgres-data:/var/lib/postgresql/data
  nginx:
    image: redash/nginx:latest
    ports:
      #- "80:80"                            ←ここを変えます
      - "8081:80"                          #←これに変えます
    depends_on:
      - server
    links:
      - server:redash
  mysql:
    image: kakakakakku/mysql-57-world-database
    environment:
      MYSQL_ALLOW_EMPTY_PASSWORD: "yes"
      TZ: Japan

うまく起動することができたら資料に記載にあるhttp://localhostではなく、http://localhost:8081をブラウザでアクセスすると、Redashのログイン画面に行くことができました。

データソース設定が反映されない

RedashからMysqlのデータソースに接続できるように、設定をおこないます。しかし、画像のように右下にSuccessを緑で何回も表示されても、データソースにMysqlが表示されない事象がありました。

画像はhttps://github.com/kakakakakku/redash-hands-on/blob/master/images/data_source.pngより

原因はIEで動かしていたことでした。Chromeで再度Redashにアクセスしたところ大量に保存されたMysqlデータソースが発見されました(笑)。業務アプリケーションをIEで動かすことが多く、今回もRedashをIEで動かしていたようです。
Redashの公式サイトを確認したところ「We recommend using Chrome or Firefox.」という記載があったので、同様の事象があったときはどのブラウザを使っているか確認する必要、もしくは推奨どおりに「Chrome or Firefox」を使うことを最初にアナウンスしておくのがいいかと思います。

参考:https://redash.io/help/faq/general/

Browsers Redash Works Best
On We recommend using Chrome or Firefox.
If you encounter any issues that are browser specific, please let us know.

まとめ

今回は社内もくもく会でRedashのハンズオンをおこないました。
個人的に良かった点は3つほどあります。
1. 講師・サポーターの動きが学べた
2. 自分の知識整理になった
3. 社内でのコミュニケーションが生まれた

もくもく会なので、もくもく別の作業する人もいましたし、提案したRedashのハンズオンに参加していただけたりもして良かったです。
自分としては、社内なので圧倒的ホーム感の中でしたが、講師・サポーターの動きが学べて良かったです!!もっと他の人の学びやサポートに貢献していきたいと思いました。

質問をされたことによって、自分の知識の整理にもなった点も非常に良かったです!!

もくもく会が終わった後に飲み会をしましたが、その場でも活発にコミュニケーションが生まれて良かったです。とあるアプリケーションを使うときにリレーショナルデータベースとNoSQLどちらを使うべきかとか、自分が学んだ知識をすぐ活かせることができた点も印象に残っています。

NoSQLの基礎知識を読んだ

以上です!

NoSQL キーバリュー型のまとめ

はじめに

yoshitaku_jpです。

NoSQLの基礎知識について読んでいます。

NoSQLの基礎知識を読んだ


今回はキーバリュー型についてまとめておきます。

キーバリュー型

キーバリュー型はデータモデルがシンプルです。キーとバリューしかないです。このセットをデータとして書き込み、保存しておきます。データを呼び出すときはキーを指定して、バリューを取り出します。キーには文字列かバイト配列、バリューにはバイナリデータを持ちます。

NoSQLはデータが大きくなったときの対策としてはスケールアウトが適しています。サーバのスペックを良くするスケールアップではなく、サーバの数を増やしてく方法です。リレーショナルデータベースよりも簡単にスケールアウトができる点が、キーバリュー型の利点です。リレーショナルデータベースはデータの関係性を厳密に扱うので、他のテーブルとの整合性をとるために排他制御をおこなったり、テーブル定義を変更する際の待受処理を別に追加するケースもあります。複数のサーバがネットワーク越しに、それぞれのデータの関係性を維持することはまったくもって簡単ではないことです。

それに対して、キーバリュー型はキーを指定するだけでバリューがわかるので、データの関係性を維持する必要がないです。関係性を維持する必要が無いということはサーバがどれだけ増えても、複数のサーバにデータを分割することが出来ます。

キーバリュー型でデータを分割するときに簡単な方法は、「シャーディング」です。キー1をサーバAに、キー2をサーバBに分割して格納することです。
– メリット
– 簡単なこと
– デメリット
– サーバがダウンしたらキーとバリューを両方失うことになる

デメリットに対する対策は、キーとバリューを複数のサーバに複製することがある。しかし、複数のキーとバリューがあると、すべてのバリューが更新されているかどうかがわからないので、サーバAにあるキー1とサーバBにあるキー1で違うバリューを持つ可能性がある。
このデメリットを解消するソリューションがないNoSQLだから単独のサーバで運用しているものや、一方でBigtableやDynamoといった大規模分散型のNoSQLはデメリットを解消するような実装を持っている。

まとめ

  • キーバリュー型について学んだ
  • データモデルがキーとバリューで構成されていてシンプル
  • データが大きくなったらスケールアウトをしよう
  • データを分割するときに簡単なのはシャーディング
    • メリットは簡単なこと
    • デメリットはサーバがダウンするとキーとバリューの両方を失うことになる