angularの勉強にTour of Heroesをやった
仕事でangularを使うことになりそうなので、入門がてらに、Tour of Heroesをやってみました。
Tour of Heroes は、Angularの基礎を学ぶためのチュートリアルで、angular-cliを使ってプロジェクトを作成するところから、最終的にはangularに付属しているhttpライブラリを使用して、APIを叩くところまでやります。その間にもcomponentを追加したり、分離するためにServiceを挟んだりと色々勉強になります。
まだ入門なので、大したことはわかりませんが、React、vueと違って全部入りのフレームワークなので、頻繁にyarnで何がしかのライブラリを引っ張ってこなくていいというのは個人的には楽だなーという印象ですが、Angular自体が半年ごとにメジャーバージョンがあがるので、破壊的な変更が複数あった場合に関連する箇所を一気に変更しないといけないのは少々怖いなーと思ったりします（にわかなので間違ってたらすいません）。
一通り入門は終わったので次は自分で何か作ってみようかと思います。
追記
終わったあとに気づいた、Tour of Heroesの日本語訳。
goでDBのテストを書くときに、go-sqlmockを使ってみた
goでDB周りのテストをするときに、毎度テスト用のDBにデータを流し込んで終わったら削除する、みたいなことをしていたのだけれど、若干面倒だなーと思い始めたのでgo-sqlmockを使ってみました。
go-sqlmockはgo用のmockライブラリです。
公式のサンプルではそのままdatabase/sqlを使っていますが、普通にgormでも使えて以下のような感じで使えます。
func main() {
db, mock, err := sqlmock.New()
if err != nil {
log.Fatal(err)
}
gdb, err := gorm.Open("sqlmock", db)
if err != nil {
log.Fatal(err)
}
// 後は、gorm.Openの返り値を使って色々やる
}
gorm.Openの引数にsqlmockを使っていますが、内部でそれに対する値があるわけではないのでwarningが出ますが、特に問題なく使えます。
具体的な使い方ですが、リポジトリのexampleがあるのでそちらを参考にするといいと思います。
加えて、微妙にハマった点ですが、go-sqlmockではクエリを正規表現でマッチングしている都合上、テストコードに正規表現混じりのSQLを書くか各メタ文字をエスケープする必要があります。そのせいでテストがなかなか通らなかったりしたのですが、regexpのQuoteMetaを使うと、一括でメタ文字をエスケープしてくれるので大変便利です。
regexp - The Go Programming Language
QuoteMetaを使うとだいたい以下のような形で書き換えられます。
// regexp.QuoteMetaを使わないもの
mock.ExpectQuery("^SELECT (.+) FROM samples$")
// regexp.QuoteMetaを使ったもの
mock.ExpectQuery(regexp.QuoteMeta("SELECT * FROM samples"))
感想
goのDBのテストにgo-sqlmockを使ってみました。テスト用のDBから読み出すことに比べて事前に何のデータは入っているかを意識しなくていいので心持ち的にはだいぶ楽になったように思います。加えて、regexp.QuoteMetaを使えば細かいこと意識しなくてもよくなるのでこちらも楽になりました。ただ、細かい速度比較はしていないので、大規模なアプリケーションで使う場合は確認したほうがよいかと思います。
nuxtでRESTっぽい感じに重複したルーティングをする
特に難しいことを考えなくても色々できるので、最近はよくnuxtを触っているのですが、RESTっぽい感じに階層的なURLで動的なルーティングはどうするんだろうって思ったので、試してみた。
公式のリンクは以下。
上のリンクをたどればわかりますが、単純にidなどでルーティングしたいのであれば、pagesで以下のような形にします。ここの_id.vueでは、params.idという形でidを受けることができます。
pages
- users
- _id.vue
次に、階層的なルーティングは以下のような形でできました。下の例はユーザの趣味の一つを表示する的な意味合いでやっています。特徴的なのは上の例では、vueファイルに対して、_idという名前をつけましたが、階層的にルーティングをする場合は、ディレクトリに対して名前をつけています。
pages
- users
- _user_id
- hobby
- _hobby_id
werckerでs3にdeployしてみた
個人プロダクトをnuxt.jsを使ってSPAを書いているのですが、楽にデプロイしたいと思って、werckerを使ってみました。
werckerはTravis CIなどと同様のCIのサービスで、フリープランでもprivateリポジトリに対して導入できるという特徴があります。
wercker自体の導入は簡単で、wercker側でリポジトリの登録をして、登録したリポジトリに対して、wercker.ymlを入れるだけです。wercker.ymlはシンプルなものであれば、導入時にテンプレートが用意されているので、それを軽く修正する形で問題ないと思います。私の場合は、nuxt.jsで書いたアプリをbuildしたかったので、node環境のテンプレートを修正する形にしました。
以下が私が書いたものの一部です。本来はbuild stepを分けるべきなんですが、werckerのworkflowがうまく組めなかったので、諦めてdeploy stepに全部書いてます。
deploy:
steps:
- npm-install
- script:
name: build nuxt
code: |
npm run build
- s3sync:
key_id: $AWS_ACCESS_KEY
key_secret: $AWS_SECRET_KEY
bucket_url: $AWS_BUCKET_URL
source_dir: dist/
s3にデプロイしている部分はs3syncです。s3syncには、deploy用に作成したIAMユーザーのaccess keyとaccess secret keyを設定します。bucket_urlは配置するバケットのurlを乗っければいいです。例えば、hogehogeというバケット名であれば、s3://hogehogeでいけます。source_dirはs3に送るディレクトリになります。
ここで変数で指定している部分については、wercker側で設定する値になります。あとは、wercker側でpush時にpipelineが走るようにすれば概ね完了です。
あとは、pushしてしまえば、wercker側でpipelineが走って、上記だとs3にdistが配布されることになります。
「Amazon Web Services 基礎からのネットワーク&サーバー構築」を読んで、似たような構成をterraformで作ってみた
つい昨日、「Amazon Web Services 基礎からネットワーク&サーバー構築」を読んで感想を書いたのだけれど、実際に使う上では自動化必須だと思われたので、terraformでやってみました。
Amazon Web Services 基礎からのネットワーク&サーバー構築 改訂版
- 作者: 玉川憲,片山暁雄,今井雄太,大澤文孝
- 出版社/メーカー: 日経BP社
- 発売日: 2017/04/13
- メディア: 単行本
- この商品を含むブログを見る
リポジトリは以下。
似たようなものと書いているのは理由があって、mysqlのインストールは行っていません。理由は単純で、ローカルからremote-execで接続してもよかったんですが、そうすると構成上、mysql-server用のインスタンスを公開するか、ルートテーブルに自分の環境のipを載せないといけなかったので、面倒くさくてやめました。実際に使う場合はterraform applyを実行するCIサーバから接続できるようにする形になるんですかね。
上でちらっと書きましたが、httpdなどのインストールにはprovisionerのremote-execを使っています。本当はansibleを使いたかったんですが、provisionerに無かったことと、やることがシンプルなものだけだったので、そのままremote-execでやっちゃってます。provisionerにchefなどがあったので、そっちでやっちゃってもいいかもです。
まとめ
terraformについては名前だけしか知らず、実際に使ったことは無かったのですが、いざ使ってみると思いの外簡単でした。他環境用のものもterraformでやってみようと思います。
「Amazon Web Services 基礎からのネットワーク&サーバー構築」を読んだ
AWSを仕事で使ってはいるものの、実際の構築は他の部署の方にお願いしているので、私自身はシステムのアーキテクチャを設計して、それをAWSで構築してもらっているだけでした。
さすがにそれではいけないという気持ちと、一通り全部出来たほうがいいかという気持ちがあったので、入門書として「Amazon Web Service 基礎からのネットワーク&サーバー構築」を読んでみました。
Amazon Web Services 基礎からのネットワーク&サーバー構築 改訂版
- 作者: 玉川憲,片山暁雄,今井雄太,大澤文孝
- 出版社/メーカー: 日経BP社
- 発売日: 2017/04/13
- メディア: 単行本
- この商品を含むブログを見る
内容としては、AWSを使って、セキュリティを意識しつつ、wordpressを構築してみましょうというお話です。改訂版になって、UIが現在のものにかなり近くなっているので読みながら実際に構築していくことができます。加えて、基本的なhttpの説明から、TCP/IPの説明なんかもあるので、インフラ自体よくわからないという人におすすめかもしれません。
この本自体は実際に手を動かしながら進めていく形ですが、AWSのcloudformationを使って構築してみたみたいな記事がいくつかあるので、そちらを参考に同じことをしてもいいかもしれません。私自身はプライベートでGCPを使っていることもあるので、AWS以外の環境でも使えるterraformでお試しに構築してみています。またはそれについては別の記事で書くかもしれません。
「初めてのシングルアプリケーション Vue.js と Firebase で作るミニ Web サービス」を読んだ
ここ最近、個人プロダクトはReact使ってたんですが、仕事でVueを触らないといけない状況が増えてきたので、Vueの勉強を再開しています。そんな中で、技術書典4の本がBOOTHで売られていたのでPDFを買って読んでみたので、さっくりと感想でも。
本の内容は表題にもあるとおり、全編通してVueとFirebaseを使って、小さめのWebサービスを作ってみて公開してみようというお話です。個人的に一番助かった点ですが、firebaseを使っているので裏側をだいぶお手軽にできることが実感出来たことと、それをVueで利用する上でどうしたらいいかを理解できたことです。Vue自体はとりあえず触ったことはあるものの、フロント周りの技術自体あまり知らないので、「Vueの基本的な部分だけを使って、簡単なWebサービスを作る」ということを実感できたのは非常にありがたかったです。加えて、初学者・中級者向けに次の課題も提示されているので、さらに勉強するのであればそれらをやってみてもいい、という形で次の指針が示されているので、勉強もしやすいのではないかと思います。
まとめ
同人誌自体読んでみるのが初めてなんですが、普通に本を読むよりためになったなと個人的には感じています。「Vue使ってみたいけど、何やっていいかわからん」みたいな場合に読んでみるとかなり助けになるのではないかと思いました。
BOOTHで買うときにお布施しとけばよかったと後悔。購入後にお布施する仕組みとかないかな。
