1. ホーム
  2. JavaScript
  3. 技術・ツールコミュニティサービスのSpectrumがOSSに!【今日のGitHubトレンド】

技術・ツールコミュニティサービスのSpectrumがOSSに!【今日のGitHubトレンド】

目次

  1. はじめに
  2. spectrumとは
  3. 環境構築
  4. まとめ

はじめに

GitHubはご存知の通り、世界最大のソースコードの共有サービスです。
ユーザー数はなんと3,821万人を超えています。
※2018年4月時点

このようにAPIからユーザー数も調べることができます。https://api.github.com/users?since=38210000

GitHubの流行はいわばテクノロジーの流行とも言えます。
このシリーズでは、GitHubで人気のリポジトリをご紹介していきます。

今回ご紹介するリポジトリはSpectrumです。
後ほどご紹介しますが、Spectrumは技術やデザイン、ツールなどのコミュニティサービスで、チャットでディスカッションの場となっているサービスです。
2018年4月3日にオープンソース化され、話題となりました。

詳細は公式のこちらの記事もご覧ください。
🎉🎉 Announcement: Spectrum goes Open Source! 🎉🎉

Spectrumとは

Spectrumは技術やツールなどのコミュニティサービスです。

このように様々なツールや技術などのコミュニティがあり、検索し加入することができます。
 2018-04-09 22.58.19.png (445.7 kB)

Web系のフレームワークコミュニティなども活発です。
 2018-04-09 22.59.06.png (407.8 kB)

例えばReactのコミュニティはここです。

 2018-04-09 23.00.41.png (217.2 kB)

個々のテーマのスレッドがあり、中ではチャット形式でディスカッションされています
 2018-04-09 23.07.22.png (151.8 kB)

こういった技術的な議論の場としては、redditHacker Newsがありますが、Spectrumは今時のUIで見やすく、また技術やツールなどに特化しており見やすいのが特徴です。

環境構築

では、環境構築していきましょう。

Spectrumはこのような構成になっています。

spectrum/
├── api        # API server
├── athena     # Worker server (notifications and general processing)
├── chronos    # Worker server (cron jobs)
├── docs
├── email-templates
├── hermes     # Worker server (email sending)
├── hyperion   # Server rendering server
├── mercury    # Worker server (reputation)
├── mobile     # Mobile apps
├── pluto      # Worker server (payments; syncing with Stripe)
├── public     # Public files used on the frontend
├── shared     # Shared JavaScript code
├── src        # Frontend SPA
└── vulcan     # Worker server (search indexing; syncing with Algolia)

また使われている技術はこちらです。

RethinkDB: データストレージ
Redis: バックグラウンドJob及びキャッシュ
GraphQL: API
Flowtype: JavaScriptの片付け
PassportJS: Node.jsによる認証
React: フロントエンド及びモバイルアプリ
Expo: モバイルアプリのビルド
DraftJS: WYSIWYGエディタ

Spectrumはmonorepoで管理しています。monorepoは複数にわたる npm package を 1つのリポジトリで管理するやり方です。
サーバサイドではNode.js、フロントエンドではReact、モバイルアプリはReact Nativeが使われており、Full-stack JavaScript と謳っています。

リポジトリをクローンする

git clone git@github.com:withspectrum/spectrum.git

セットアップファイルをインストールする

node shared/install-dependencies.js

rethinkdbをインストールする

rethinkdbはNoSQLのデータベースです。
運営元会社が倒産し、オープンソース化されたという経緯がありますが、JSON形式でレスポンスを返してくれる手軽さもあり、またWeb上のコンソールも使いやすいです。
Mac OSの場合、brewでインストールします。
brew update && brew install rethinkdb

データベースをmigrateする

まずrethinkdbを立ち上げます。
rethinkdb

localhost:8080 にアクセスすると、このようにrethinkdbのコンソールが表示されます。
 2018-04-10 7.53.58.png (77.4 kB)

そして別タブを開き、migrationやseedデータ投入を行います。
yarn run db:migrate
yarn run db:seed

サーバの起動

APIサーバはこちらで起動します。
yarn run dev:api

フロントのUIはこちらで起動します。
yarn run dev:web

localhost:3000 にアクセスすると、無事Spectrumが立ち上がりました。

 2018-04-09 23.49.54.png (515.4 kB)

まとめ

以上がSpectrumのご紹介です。
Spectrumはコミュニティとしても勢いがあります。またコードとしてもほぼJavaScriptで構築されている、モダンな作りになっています。
ぜひSpectrumで好きなツールのコミュニティに参加してみたり、コードを見てcontributeにチャレンジしてみてください。

投稿者プロフィール

eishis
eishis
SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。
マーケター・ディレクター・エンジニアなど何でも屋。
COBOLからReactまで色んなことやります。