[2018年]Webエンジニア今年やっていたこと

始めに

年末大掃除のような、毎年定例に書く記事です。今年も遂にこの時期が来ましたね。

が、うそです。このタイトルは初めてです、これから続けていきたいです。

キーワード

2018年以前はC++がメインですが、今年から初めて使っていたもの

ちょっと触ったもの
Vue.js(Ver.2), OnsenUI
AIY Vision Kit(Ver.1), raspberry pi, Dialogflow,
AWS(lambda, S3), GCP(GCE, GKE, GAP)
Pipelines

プロトタイプ実装
AngularMaterial, Monaca, Cordova, ionic Native(Ver.3), React(Redux, React Native)
GCP(Speech Api, Vision Api, Translate Api), Firebase(Cloud Messaging)
Docker

がっつり開発
npm, node.js
Angular2(Ver.5, Ver.7, Rxjs), ionic(Ver.3), PWA, PrimeNG
GCP(realtime DB, FireStore, Cloud Functions, Storage), kintone
HTML, CSS(Sass)
Zsh(Oh-my-zsh -> zprote)
GithubのProjects(タスク管理trello -> Projectsに移行)
CircleCI(Ver.2)

今年やったこと(2018.2~2018.12)

2月末~3月前半 Angular三昧！

　新しい会社のエンジニアチームにJoin。
この時期にモダンのWebアプリ開発を目指したいということで、Angularの勉強を始めました。社内でReactを使っている若い兄ちゃんの学習欲が凄い、自分も負けないよう頑張ろうと思っていました！

使ったもの
　Angular2, Angular-material, Typescript
感想：
「AngularはC++オブジェクト指向と似ている！」構造部分はスムーズに理解できたが、RouterとTypescriptなんか全然イマイチです。Materialも全然かっこ良くなかったです。

3後半~4月末 IoTプロトタイプ開発

　IT高専の先生と生徒たちが作ったラズベリとWebアプリで介護施設で使う自動化モニタリングシステムの開発。
　ラズベリのセンサー(主に赤外線)で、目標の動きを感知し、複数のセンサーによる、動きの状態を推測し、Webにプッシュして、プッシュ通知で端末に看護士さんに状態を送信することを実装しました。ラズベリは先生たちが開発、Webアプリ側は先輩が先に作ったプロジェクトをもらって実装しました。

使ったもの
　RaspberryPi, GCP(GAE, FireStore, CloudFunctions, FCM), Monaca, Angular

感想
　初IoT面白かった！最初は完全にWebアプリでやっていたですが、GCP/FireStoreとAngularの連携(AngularFire2)超強っ！
　「subscribeしたらサーバから変更が来るなんや！スゲェー！」と感動しました。
　途中からプッシュ通知の実装で、やっぱりネイティブじゃないとダメかと思い、Monacaを使ってハイブリッドアプリでやりました。
　Webアプリではブラウザに通知がくるが、スマホとしたら閉じている間プッシュ通知したいなら、やっぱりネイティブしかできない、その時点はそう思っていました。PWAの存在を知りませんでした。

　Monaca使いにくかったと呟いた覚えがあります。cordovaでオンラインでビルトして、Apkを実機にインストールする事をやっていました。（今なら自分でcordovaをビルトする）
　CloudFunctionは使いやすい！GCPのUIがAWSよりも使いやすいすっかりGCP入教しました。

5~9月 ペパレスクラウド-kintone

会社の一番力を入れている開発プロジェクト、介護現場でかつて紙に書いたものをkintoneに保存し、フロント部分は自分たちで実装します。

使ったもの
Angular(Ver.5), Ionic(Ver.3), PWA
kintone, AWS(lambda)
TypeScript, Rxjs
Pipelines,CircleCI(Ver.2)

感想
　Gitを運用し、チームメンバーにもお互いにレビュー、段々と統一になってきた。
　タスク管理をTrelloで使っていたが、GitHubのProjectで試したところ、プロマネが気に入り、速攻で移行しました。運用手段簡単に言うとIssueでチケットとして、プルリクは対応しているチケットにDoingに入れ、マージしたらDoneになり、Issueに対して全てのプルリクがマージされたらIssue Doneに移します。
　KintoneはDBとして使い、REST Apiでやりとりをし、一番最初はkintoneのJSONデータをどう処理するが色々悩んでいた、JSON整形をカスタマイズして、Angular用のモデルに変換できるようにしました。
　Rxjsを最初全然理解できなかったが、実際いろいろ試しに使っていたら、強さが分かってきました。オペレータが種類充実し、ほぼ全部の動きを管理できます。一番使っていたのは「Subject」でした。（あとは桃と川の話しを説明時によく使っていました笑）
TypeScriptはまた良さがちゃんと理解していないが、ESLint、TSLintでちゃんとコードの悪い所を教えてくれるのが凄く助りました。
　CIでコードをチェック、デプロイする事が開発には欠かない事です。
　初期で３人開発時BitBucketを使っていました、Pipelines機能が実装簡単で、作ってみました。

image: beevelop/ionic:v3.20.0

pipelines:
  default:
    - step:
        caches:
          - node # node_modules
        script: # Modify the commands below to build your repository.
          - npm install
          - npm run build

　その後、チームの増員によりGitHubに移行し、本格的にCIを使っていこうと思い、CircleCI(2.0)にしました。
Kintone側にREST Apiで使うと、CORSに怒られたからAWS lambdaに介して送るようにした(プロマネが実装してくれました、感謝感謝)
IonicでUIもかなりいい感じと、何よりPWAをするには、準備全く必要なくすぐできるのが凄いところです。夏ごろからIonic4のBeta版が公開され、正式版に出たらまた試したいです。Angularと相性さらに良くなってくると思います。Angular CLI に対応し、テストもらくらくに書けます。
npm,nodeもnodebrewで管理し、bashからzshに乗り換え、ローカル環境を育っていました。

6月 React開発(暗号化/会社HP/MashUpで作ったアプリ)

Reactでやったことを数えると１ヶ月程度しかないです。
初見時、Angularを慣れた自分からReactを見ると...「なんでこれがFacebookに使われているの？」と疑問を持っていました。

しばらく経つと、Reduxやデータのアクセス処理などの便利さを実感できて、React何かそこら辺が自由な感じですね。
Vue.jsでそのメリットも継承して、来年から勉強したいと思います。

使ったもの
React, Redux, React Native, Firebase

アプリ--「ゴミの名は」
Mashupで社内のほかのメンバー、３人で一日開発したアプリです。
バーコードを読み込み、Firebaseに保存したデータと照合し、一致した結果をアプリに返す。

ネタを仕込んでいただいた二人とのハッキングタイムが楽しかったです。
https://www.youtube.com/watch?v=CAFn1T4TE7A

10月 GCPのApiを使って機械学習プロトタイプ

10/23 大阪でやったGoogle cloud summit'18から色々情報収集できて、
画像分析、音声データ変換など実装をしてみました。
そして、Docker、GKEもすでに業界基準になっているを事実を知り、無知のままで開発を進めたくないので、チームに導入すべきと気づきました。
「コンテナ乗り遅れたなぁ〜」

プロトタイプに関して詳細の記事はこちら
https://qiita.com/jakushin/items/38f1686efa3a71f1f776

使ったもの
GCP(Speech,Translate,Vision Api, Storage, Firestore)
Ionic Native(Ver.3), Cordova, Angular(Ver.5)

11月~2019.2月 ペパレスクラウド-Firebase

ペパレスクラウドのFirebase版、フロントの機能のままが、DBはkintoneからFirestoreに変更しました。
開発も各自ローカルではなく、最低限共通のコンテナで開発できるようにしたいです。

とりあえず個人環境で作ってみます。

使ったもの
Docker, Firebase(NoSQL Firestore, FireStorage, Hosting), CircleCI
Angular(Ver.7), Angular-material, PrimeNG

今年できなかった事

社内gyazo
やるやる詐欺案件
gyazoで取った画像をAWS or GCPに保存し、社内で共有する
企画、調査段階で止まりました。(社内のたくさんの方々の時間もいただいて申し訳ないです。来年きっと！きっと...)

GoogleHomeアプリ開発
ミニプロでZombie化案件
Dialogflowで音声会話アプリを作ってみましたが、会話自体できたが、固定なシナリオじゃないとうまく動かないです。

最後１ヶ月、 2019年やりたい事

・IoT Core
・機械学習、社員の顔認識して、google homeで挨拶してもらう(AutoML/Tensorflow)
・Nuxt.js
・Flutter & Dart2
・エンジニアチームで新しい開発手法を実践(マイクロサービス)
・高知のWeb開発者コミニュティを盛り上がろ

来年もこの記事を書けるように頑張ります！