なになれ

IT系のことを記録していきます

GraphQL(Backend)を試した

TypeScript GraphQL

TypeScriptで作ってみるシリーズの作業ログです。
今回はGraphQLを試してみます。
前回まではこちらです。Backendの処理のWeb化まで行なっています。

hi1280.hatenablog.com

とりあえずGraphQLを試す

まずはGraphQLに慣れるため、簡易なGraphQL serverをNode.jsで作ります。

graphql-yogaを使います。

npm install --save graphql-yoga

GraphQLのスキーマ定義やリゾルバを実装します。
index.js

const { GraphQLServer } = require('graphql-yoga')

const typeDefs = `
type Query {
  info: String!
}
`

const resolvers = {
  Query: {
    info: () => `This is the API of a Hackernews Clone`
  }
}

const server = new GraphQLServer({
  typeDefs,
  resolvers,
})
server.start(() => console.log(`Server is running on http://localhost:4000`))

type QueryでGraphQLのクエリを定義しています。
resolversはクエリに対しての実際の処理になります。
ここでは単純にThis is the API of a Hackernews Cloneという文字列を返しています。

GraphQL serverを起動します。

node index.js

localhost:4000をブラウザで開きます。
以下のクエリを実行します。

query {
  info
}

クエリ結果が表示されます。
f:id:hi1280:20190105213032p:plain

WebAPIをGraphQL化する

GraphQL対応

GraphQLに対応するために以下のように変更しました。

前述の簡易的に作った方法とあまり変わりません。
index.ts

import { GraphQLServer } from 'graphql-yoga';
import { main } from './main';

const resolvers = {
  Query: {
    get: () => main().then(v => v),
    info: () => `This is the API of a Hackernews Clone`,
  },
};

const server = new GraphQLServer({
  resolvers,
  typeDefs: './dist/schema.graphql',
});

const port = process.env.PORT || '3000';
server.start({ port }, () => console.info(`API running on localhost:${port}`));

スキーマ定義は別ファイルにしています。
schema.graphql

type Query {
  info: String!
  get: [Qiita]
}

type Qiita {
  rendered_body: String
  body: String
  coediting: Boolean
  comments_count: Int
  created_at: String
  group: Group
  id: String
  likes_count: Int
  private: Boolean
  reactions_count: Int
  tags: [Tag]
  title: String
  updated_at: String
  url: String
  user: User
  page_views_count: Int
}

type Tag {
  name: String
  versions: [String]
}

type User {
  description: String
  facebook_id: String
  followees_count: Int
  followers_count: Int
  github_login_name: String
  id: String
  items_count: Int
  linkedin_id: String
  location: String
  name: String
  organization: String
  permanent_id: Int
  profile_image_url: String
  team_only: Boolean
  twitter_screen_name: String
  website_url: String
}

type Group {
  created_at: String
  id: Int
  name: String
  private: Boolean
  updated_at: String
  url_name: String
}

そのほかにDockerfile、package.json、tsconfig.jsonを修正しています。

実行

クライアント側のクエリの内容に応じて結果が返ります。
ここでは、ユーザの名前と記事のタイトル名のみを取得しています。

f:id:hi1280:20190105225438p:plain

クエリを変えることで取得するデータを変えることができるのが面白いです。

最終的なプログラムはこちらです。

github.com

まとめ

GraphQLをベースとしたスキーマ駆動開発は便利そうです。
OpenAPIなどもありますが、GraphQLはAPIの定義がシンプルなので開発者体験も良さそうです。

参考

こちらを参考にしました。
www.howtographql.com

2018年で学んだ技術

AWS 振り返り

今年を振り返る的な投稿です。

今年も色々学べました。ただ技術の進歩が早すぎて学んでも学んでもより良いものが出てきてしまいますね。それを楽しめるようになってこそのエンジニアなのかもしれません。

パブリッククラウド

  • AWS
    • Amazon Rekognitionで人物の画像処理
    • Athenaを使ったRekognitionによる人物データの分析
    • Firehoseを使ってのデータ収集基盤の構築
    • EC2、Lambda、S3の扱い方
  • Azure
    • Cognitive ServicesのFace API試用

Azure来るだろうと思って昨年はよく学習してましたが、あまりAzureは来ませんでした。やはりAWSの需要が大きい。

画像処理

クラウドサービスを含めた画像処理についてはこの記事で言及 hi1280.hatenablog.com

Webフロントエンド

  • AngularとFirebaseでWebアプリ作成
  • PWAの理解と試用
  • React、Vue.jsを試用
  • Reduxライクな状態管理を試用

コンテナ技術

  • Docker、Docker Compose、Kubernetesを試用
    • サンプルのWebアプリを動作させてみる

IoT

まとめ

来年のテクノロジ・トレンドがガートナーから発表されています。 enterprisezine.jp

概ね昨年と傾向は変わらず、AI、IoT、MR、ブロックチェーンのようです。
量子コンピューティングは気になります。
来年は何をしようかな。

コードが公開されているAngularの使用例をまとめてみた

Angular

モチベーション

Vue.jsのドキュメントにある使用例（https://jp.vuejs.org/v2/examples/）の内容が魅力的だったので、Angularにもそういうものがないかを探してみました。
実際に動くものを見ると、どんなことができるのかイメージできるので良いと思っています。

使用例の紹介

Tour of Heroes

stackblitz.com

Angular公式ドキュメントのチュートリアルです。まずはこれでAngularの基本を学びつつ、どんな風に作って、どんなことが出来るかを理解できると思います。

Angular+Firebaseでチャットアプリを作る

qiita.com

AngularからFirebaseを使うための内容が細かく解説されています。Firebaseを使うことやNgRxの説明など一通りAngularの基本的なことを学んだ人の次のステップとして学んでおくと良いことが色々載っていると思います。
チュートリアル形式で学べるようになっています。2018年12月15日の時点でまだ未完のようです。

Angular RealWorld Example App

github.com

Mediumのクローンアプリです。モジュールの分け方などAngular公式のスタイルガイドに則って作られているちゃんとしたアプリなので学べるものが多いです。
Tour of Heroesを一通り実施した人が実用的なアプリを作りたい時に参考になるアプリだと思います。認証処理が参考になります。

Angular NgRx Material Starter

github.com

Angular+NgRx+Angular Materialを使って作成されたスタータープロジェクトです。
NgRxが全面的に使われていてNgRxを学びたい人にとっては参考になる内容だと思います。
以下の内容が盛り込まれています。

  • カスタムテーマのサポート (4つのテーマがある)
  • フィーチャーモジュールの遅延ロード
  • ローカルストレージでの画面状態の永続化
  • @ngrx/effects によるAPIリクエストの発行
  • レスポンシブデザイン対応
  • angular-material and custom components in SharedModule
  • Angular Materialと SharedModule内にカスタムコンポーネントを配置
  • CypressによるE2Eテスト
  • プロダクション向けDockerfileによるアプリ公開

E2Eテストが用意されているのは珍しいと思います。

Hackernews clone using Angular 5

github.com

シンプルかつ実用的なアプリになっているのが良いです。Angular5なので若干古いです。

TuneIn

github.com

おしゃれなアプリです。こちらもシンプルかつ実用的なアプリです。Angular6なので比較的新しいです。

Angular公式サイト

github.com

Angularの公式サイトですが、実はAngularで作られています。コードも見ることができます。
流石に作り込まれている感じでパッと見ではよく分かりません。
dgeniというドキュメントを生成するツールが使われているようです。

Angular Console

github.com

Angular CLIの機能+αをGUIで使えるようにしたプロダクトです。
Nxという大規模組織向けのAngularプロジェクト構成ツールが使われているため、通常のAngularプロジェクト構成とは異なるので理解しにくいところがあります。
NxはAngular Consoleを作った会社が作っているライブラリのようです。
ElectronやGraphqlを利用しているのが注目ポイントだと思います。

まとめ

とりあえずアプリケーションっぽいものを集めました。コードが公開されているものを前提にしたのでだいぶ限定されました。
Angularが使用されているところを調べてみると色々なところで使われているんだなぁということが分かりました。

https://www.madewithangular.com/

whouse.angular.jp

サンプルやUI部品での使用例を集めるのも良さそうです。