年末年始にやってみたチュートリアルまとめ

気になっていたけどやれていなかったチュートリアルを年末年始にまとめてやってみた。その備忘録。

# Summary 
|キーワード|やってみたチュートリアル|チュートリアル感想|
|:--|:--|:--|
|TypeScript|[Learn TypeScript in 30 Minutes](https://tutorialzine.com/2016/07/learn-typescript-in-30-minutes)|TypeScriptの概要をさらっと掴むのにおすすめ。|
|GraphQL|[HOW TO GRAPHQL graphql-node Tutorial](https://www.howtographql.com/graphql-js/0-introduction/)|GraphQLのサーバサイド視点のチュートリアル。nodejs版。他にもruby版、java版など各種言語向けがある。nodejs版ではApolloサーバとPrismaを使ってGraphSQLサーバを作って見ることができる。途中まで分かりやすかったが、後半(Subscriptionの説明あたりから)が作りかけっぽく、説明が飛んでいたり、間違っていたりするので注意。|
|Terraform|[実践Terraform　AWSにおけるシステム設計とベストプラクティス](https://www.amazon.co.jp/dp/B07XT7LJLC)|AmazonでKindle版を購入。よく使うAWSリソースのTerraformでの構築例が豊富に掲載されている。Terraformを使うときにはそばに置いておきたい本|
|Terraform vs Serverless Framework|[A Beginner's Guide to Terraform and Serverless](https://blog.scottlogic.com/2020/01/21/beginners-terraform-serverless.html)|TerraformとServerless Frameworkの使い所の解説記事。|
||[Serverless Applications with AWS Lambda and API Gateway](https://learn.hashicorp.com/tutorials/terraform/lambda-api-gateway?in=terraform/aws)|TerraformでのLambdaのデプロイ方法。Serverless Framework版と比較すると特徴が見えてくる。|
||[Serverless Framework - AWS Lambda Guide - Quick Start](https://www.serverless.com/framework/docs/providers/aws/guide/quick-start/)|Serverless FrameworkでのLambdaのデプロイ方法。Terraform版と比較すると特徴が見えてくる。|
|CodeIgniter4|[Build Your First Application -CodeIgniter 4.0.4 documentation-](https://codeigniter.com/user_guide/tutorial/index.html)|PHPフレームワーク CodeIgniter4でのMVCにもとづく実装方法が一通り理解できる。|
||[CodeIgniter4でREST APIを作成する ](http://blog.a-way-out.net/blog/2020/12/20/codeigniter4-rest-api/)|CodeIgniter4のResourceControllerでREST APIを実装する方法。|
|CodeIgniter3|[CodeIgniter Composer Installer](https://github.com/kenjis/codeigniter-composer-installer)|CodeIgniter4のチュートリアルで学んだことをCodeIgniter3でやって見るときに便利。REST APIの実装サンプルもあり。|
|CloudFormation|[CloudFormationのヘルパースクリプトcfn-initによるインスタンスの初期化 - Developers.IO](https://dev.classmethod.jp/articles/cfn-init/)|CloudFormation再入門。cfn-initがよく分かっていなかったので改めて。記事の内容をYAML形式に置き換えてやってみた。|
||[AWS CloudFormationで使える4種類のヘルパースクリプトについて使い方と機能をまとめてみた - Developers.IO](https://dev.classmethod.jp/articles/cfn-helper-scripts/)|cfn-init以外のヘルパースクリプトの説明。|
|Vue|[Vue.js&Nuxt.js超入門](https://www.amazon.co.jp/dp/B07X6F1C2P)|AmazonでKindle版を購入。VueとNuxtの基本が分かりやすく解説してある。前半部分だけ読んで[これ](https://sharkalc.netlify.app)が作れた。|
|Netlify|[Vue.js+Netlifyで自動デプロイ -基礎から学ぶVue.js-](https://cr-vue.mio3io.com/tutorials/netlify.html)|Vueで作ったアプリを無料でインターネット公開する方法。githubと連携したCI機能も提供しておりとても便利。|


# 備忘録や感想
ふだんサーバサイドの開発に携わっているエンジニアとしての超概要と感想。
## TypeScript
### 超概要
静的型付けの機能などをJavaScriptに追加したもの。大規模開発をJavaScriptでやるのがつらくなってきたからMSが開発した。
実行前にTypeScriptからJavaScriptに変換=トランスパイルする。tscコマンドでできる。トランスコンパイル後のJavaScriptも可読性があるのがうれしい。
記法は、最近さわってみたKotlinに似ていた。変数名の後に型名を記載するあたりでそう感じたのだと思う。
TypeScriptからJavaScriptで書かれたライブラリを利用できる。利用する際には型定義ファイルが必要。型定義ファイルはCのヘッダファイルみたいなもの。TypeScriptからどのような型に見せたいかを記載しておく。トランスコンパイル時には、JavaScriptのライブラリの呼び出しに変わる。
サーバサイドでnodejsと組み合わせ使う場合、事前にトランスコンパイルしてnodeで実行すればよい。ts-nodeを使えば、tsのコードをそのまま実行できる。
### 感想
クライアントサイドの開発が大規模化したことへの対応が主目的と考えるのが良さそう。クライアントにはJS以外に現実的な選択肢がないため。一方、サーバサイドに関しては、JS以外にも様々な言語の選択肢があるため、JSに限界を感じるのであればTSではなく、他の言語を選択すればよい。

## GraphQL
## 超概要
GraphQL自体は、データの問い合わせ言語。SQL的なもの。通信レイヤにHTTPSを使うことで、RESTの代わりにクライアントからのデータ問い合わせインタフェースとして使うことを想定されている。
### RESTとの比較
RESTは、HTTPメソッドとURLを組み合わせて、どのデータにどんな操作を行うかを指定していた。GraphQLでは、それらはGraphQLのクエリとして表現する。RESTはサーバサイドの設計がシンプルになる一方で、それを呼び出すクライアント側の実装が複雑（というか面倒）になりがちだった。具体的には、複合的なデータの場合、欲しいデータを取得するまで、複数のREST APIの呼び出しの実行が必要だった。GraphQLでは、クエリの表現力が高いため、このようなケースでも1回のAPI呼び出しで済ますことができる。
### サーバサイドの実装
サーバサイドの設計、実装は、RESTに比べると複雑になる。
それを補助するのがGraphQLサーバのApolloや、GraphQLを意識したORMappingツールであるPrisma。Apolloの主な役割は、GraphQLのクエリを受け付けて、パースし、クエリを処理するモジュール(Resolver)までつなげること。Prismaの主な役割は、Resolver内で各種DBへアクセスする処理を実現すること。Prismaにデータモデルの定義を渡すと、DBのテーブル作成と、DBにアクセスするためのクライアントコードが生成される。このクライアントを使って、Resolver内の処理を実装する形になる。

### 感想
TypeScriptの登場と同じく、GraphQLも、アプリケーションにおけるクライアントサイドの比重が増加してきたことに伴い、クライアントがの開発効率を上げるという視点でのアーキテクチャの改善提案と言えると思った。サーバ視点で見ると、Apollo Server + Prismaは、node + expressよりはわかりづらいし使いづらい。ネット上の情報量も少ない。
AWS AppSyncのようなマネージドサービスを使うことでどれくらい効率が上がるのか、次は調べてみたい。

### 次にやってみたいこと
- AppSyncを触ってみる

# Terraform vs Serverless Framework
## 超概要
TerraformではAWSのCloudFormationの代わりに、HashiCorpのHCLで構成を記述。terraformコマンドがHCLを読み込み、対応するAWS APIをコールして、環境を構築する。AWSの多くのリソースのデプロイに対応している。
Serverless Frameworkでも独自のYAML記法で構成を記述。slsコマンドがCloudFormationファイルを作成し、AWS CloudFormation APIをコールして環境が構築する。Lambdaのデプロイがメイン。それ以外のリソースはCloudFormation形式で書いてデプロイする。
上記の動作の違いは、両方のツールで同じLambdaのデプロイをして見るとよくわかる。Slsだと実行後にCloudFormationのStackができているが、TerraformではStackはない。

## 感想
AWSでの利用を前提とした時、TerraformはCloudFormationの代替として使うことが想定されていると思う。一方、Serverless FrameworkはCloudFormationと組み合わせて使うように設計されていると思う。
AWS謹製のCloudFormationを使わずに、これらのツールを使うメリットはベンダーロックイン度を低く抑えることと開発効率向上。前者はベンダーロックインの代わりにツールにロックインすることになるというデメリットも伴う。
AWSからの乗り換えを考えないのであれば、Servless Framework + CloudFormationの方がバランスがいいのかなと思った。もしくはツールは一切使わずに、AWSが提供する環境のみで行くというのもあり。最近はSAM Localなど、ローカルでの開発環境も充実してきたので。

# CodeIgniter
## 超概要
### 基本機能
シンプルで分かりやすいMVCアーキテクチャのフレームワーク。Controller, Model, View。
URLからControllerへ処理がルーティングされる。デフォルトでは、/controller/method/args。カスタムしたい場合は、routes.phpに書く。
Model部分はQuery BuilderなるSQLクエリの作成支援ライブラリがある。クエリを直接書かなくてもクエリ発行が可能。ActiveRecordのようなORMappingはない。
あといろいろなHelperクラス。例えば、CSRF防止やValidationなど。

### REST API
3rdライブラリの[REST Server](https://github.com/chriskacerguis/codeigniter-restserver)を使うと楽。CI4では標準でREST実装で使うためのResourceControllerがある。

## 感想
先にCI4を使ってみたが、記法含め、馴染みやすかった。CIのMVCの考え方、PHP自体のオブジェクト指向な実装も、昔JavaでStructsを使っていた身にはすんなり入ってきた。そう意味ではレガシーなフレームワークと言えるかもしれない。
いまどきはUIはフロンとエンドフレームワークの役割になっているので、サーバサイドフレームワークとしては、UI機能は見る必要がない。API実装のやりやすさ、データベースアクセスのしやすさ、バッチ処理の対応などか。そういう観点では、現役でまだまだ使えるという感触。

# Vue
## 超概要
HTMLとJavaScriptとCSSをセットでComponentとしてまとめて設計、実装して使いまわすことができる。
Vue CLIを使うとコマンド一発で、ローカルでの動作確認や、サーバにデプロイするためのWebPackによるパッケージング処理などを行ってくれる。
Netlifyなどの静的コンテンツのホスティングサービスを使うと、簡単にインターネットにWebアプリ公開もできる。

## 感想
Vue本体が提供する機能はシンプルなのですぐに慣れて、簡単なアプリなら作れるようになる。学習コストが低いというのは内製する場合も外注する場合でも開発リソースをスケールしやすいという意味でメリットが高い。