Vapor Trail

明るく楽しく元気よく

『イラストでわかるDockerとKubernetes』を読んだ

 


Dockerを開発で使用しておりDockerfileもdocker-compose.ymlも書くが、実はどういう仕組で動いているのかよくわかっていないので買って読んでみた。
感想を先に書くと本自体は薄いけど内容は濃い本。『イラストでわかるDockerとKubernetes』という本のタイトルだけ読むと初心者向けっぽく見えるけど、あくまでDockerとコンテナ技術について深堀した本であって「Docker Imageの中身がどういう構造か見てみましょう」「コンテナのレイヤがどういう風に作られるのか見てみましょう」みたいな濃い内容です。よくあるような「ApachePHPのコンテナを作ってWebアプリを動かしてみよう」といったことを期待している人は、別の本を買ったほうがいいと思う。
VagrantVirtualBoxでPC上に仮想の環境を作るという説明で理解しやすいですが、Dockerはコンテナを作るという感覚的に理解しにくい上、コンテナに入るってなんだ!?とかなんでCentOS上でUbuntu動かせるんだとか説明が大変です。今まではDockerについて説明するときに複数のネット上の記事の画像などを引用して説明する必要があったので、イラスト付きのわかりやすく体系的に書かれている本が出たという点で価値がある本だと思います。

学んだこと

いつも忘れるコンテナはなぜ軽いのかを復習。

・ホスト型
VirtualBoxなど
f:id:kyamashiro:20210321133314j:plain

正式リリース版で見るHyper-Vのアーキテクチャ:いまさら聞けないHyper-V【前編】 - TechTargetジャパン 仮想化


・ハイパーバイザ型
WSLなど
f:id:kyamashiro:20210321133346j:plain

正式リリース版で見るHyper-Vのアーキテクチャ:いまさら聞けないHyper-V【前編】 - TechTargetジャパン 仮想化


Windowsの構成

f:id:kyamashiro:20210321135637p:plain

 

・コンテナ型

f:id:kyamashiro:20210321135848p:plain

 

コンテナ内はホスト環境とは隔離されている。
Ubuntuのイメージにはルートファイルシステムを構成するファイルが含まれているがLinuxカーネルは含まれていない。
→Dockerを通してカーネルを共有するから。

複数のレイヤーがLinuxのルートファイルシステムを重ねていってコンテナを作成する。
複数のコンテナで同じイメージを使用する場合、コンテナ同士で共通のレイヤーは読み込み専用で共有され、コンテナ実行時にさらに読み書き可能なレイヤ(コンテナレイヤ)を作成してルートファイルシステムへの書き込みを可能にしている。
DockerはStorage Driverというコンポーネントでレイヤ群の管理を行う。

f:id:kyamashiro:20210321140649p:plain

イメージ、コンテナ、ストレージ・ドライバについて — Docker-docs-ja 17.06 ドキュメント


Dockerコマンド
↓ DockerAPIを実行
Dockerデーモン(dockerd)

OCIランタイム(ホストから隔離した実行環境をコンテナとして作り出す)

コンテナ作成

f:id:kyamashiro:20210321140935p:plain

Container Runtimes Part 3: High-Level Runtimes - Ian Lewis

 

f:id:kyamashiro:20210321140958p:plain

What is containerd ? - Docker Blog

 

結局、Linuxの知識をもっと身に付けねばと感じました。以上。

iPhoneSE2からPixel4aに速攻買い替えた話

買い替え

2年前に購入したHuawei P20Liteを今まで使用していました。

ここ1年で動作がもっさりするようになってきたこととストレージ16Gで常に残り数%しか空き容量がないみたいな状態だったので買い換えることにしました。

以前から気になっていたPixel4aにするつもりでしたが、ちょうどBiglobeモバイルでキャンペーンをやっていて16000円分ポイントもらえる+6ヶ月基本料金1200円割引されるのでBiglobeモバイルで購入できる端末を選ぶことにしました。

今までずっとAndroidユーザだったこともあってiPhoneは考えてませんでしたが、
iOS開発でiPhoneのサクサクを知っていたこと
iPhoneは写真が綺麗に撮れると聞いていた
・51,360円-16000円分ポイント=実質35360円で買える
ことからiPhoneSE2に決めました。

iPhoneSE2の感想

初めてのiPhoneということもありiPhoneSE2が家に届いて開封してセットアップするまではワクワクしてましたが「画面小さいな・・・」と感じて段々冷めていきました。

まぁそのうち慣れるかと思って数時間使いましたが、ブラウザでWebページ見ても画面が小さいので情報量が少ない、Youtubeを見たときに動画が小さすぎるといちいち画面のサイズが気になり「完全に失敗した」と感じました。大きい部屋に住んでる人が小さい部屋に戻れないのと同じように、大きい画面から小さい画面に変えるのは無理でした。おまけにバッテリー容量も少ないため数分ネットサーフィンして気づいたら数%バッテリーが減ってて初日で買い換えることに決めました。

あとは今までiPhoneの画面がバキバキになっている人とか見て自分はスマホ落としたりしないのでどんな使い方したらそうなるんだと思ってましたが、iPhoneって端末が薄いガラスで覆われてるんですね。手に持ってて滑りやすいしこりゃ落としたらすぐバキバキになるわと気付かされました。

Pixel4aへ

結局iPhoneSE2はメルカリで47000円で売却してPixel4aに買い替えました。画面サイズが大きいiPhoneXやiPhone11にすることも考えましたが、中古でも5万円以上して高いことと落として画面バキバキになりそうなのでやめました。

買い替えたPixel4aはとりあえず最高です。画面サイズもちょうどいいし、バッテリー持ちもいいし、サクサクだし特に不満はないです。ただカメラはやっぱりiPhoneのほうがキレイに撮れる気がします。カメラのハードウェア性能というよりソフトウェアの処理によるものだと思いますが。

iPhoneSE Plusが出るみたいな噂もあるので、安くて画面サイズが大きくて指紋認証ができる端末が出たら今度こそiPhoneにするかなといった感じです。

2020年振り返り

Cordova

4月あたりからcordova+cakephpの仕事を引き継いで機能追加やバグ修正をしていた。cordova全くわからんかったけど、html+css+jsでwebview表示しているだけでネイティブ層はほとんど触らないのでなんとかなった。

経験として身についたこと。

Sass

今までbootstraperで極力CSSを書かないようにしていたが、5000行超えしているSassはアンチパターンの宝庫で学ぶことが多かった。タグに直接スタイルを当てているとめちゃくちゃ変更しづらい。スタイルの当て方が、タグに直接・id・クラスと入り乱れており、詳細度って大事だなと気付かされた。

BEM記法

タグにスタイルを当てている+ネストが深いためCSSがHTMLの構造に依存しておりHTMLのタグを変更するとCSSも変更しなければいけない状態だったがページごとにBEM記法で書き直したりした。

Vue.js

Vue.jsの経験はなかったが、methodとcomputedの違い、v-ifとv-showの違いとか一通り知る機会になった。webpackとかのbundlerを使わないでhtml内のscriptでvue.jsを読み込んで使うというのもあまりないと思うので良い経験だった。『Vue.js入門 基礎から実践アプリケーション開発まで』の本もだいぶ前に読んでいたけど、やっぱり目的なく読んでもすぐ忘れてしまうので業務で使って覚えるのが一番だなと感じた。v3でComposition APIになって随分変わったようだがv3を使う予定がないので必要になったらキャッチアップするかなという感じ。

Cordova・ネイティブ関係の知識とか改善したこと

WKWebView対応

5月あたりはUIWebViewを使用しているアプリがAppStoreにアップロードできなくなったのでiOSのWKWebView対応をしていた。
CordovaのUIWebView→WKWebView移行についてまとめ - Qiita

UniversalLinkの設定

QRコードでURLを読み込んでアプリをインストールしていなければストアへ、インストール済みの場合はアプリ内の特定のページを開くみたいな機能を追加するにあたってUniversalLinkについて知った。AndroidはカスタムURLスキーマで比較的簡単に実装できるがiOSは何かとめんどくさかった。
QRコードでのアプリ起動とユニバーサルリンク - Vapor Trail

署名付きAPKのビルドの自動化

毎回手動でやっていた署名鍵でのビルドする機能がcordovaにはあったのでその設定をしたりした。
Android Platform Guide - Apache Cordova

デプロイゲートの利用

実装した機能の確認をしてもらうのにiOSはテストフライトを利用していたが、AndroidはビルドしたAPKファイルをいちいち渡して確認してもらっていた。フィードバックをもらって更新するたびにいちいち渡すのが面倒だったのでデプロイゲートにアップロードして配布するようにした。

ReactNative

新規スマホアプリ開発でCordovaで実装するか、ReactNativeで実装するか悩んだが、いろいろ考えてReactNativeを選択することにした。React+ReactNativeのスキルができたことはよかったが、正直Capacitorのほうが適切だったかなと思っている。CordovaとReactNativeを両方経験して「Cordovaも良かったんだなぁ」と思った点は、

  • ビルドが速い
    ReactNativeはAndroidは速いが、iOSのリリース版ビルドに5~10分ぐらいかかる。
  • ビルドサイズが小さい
    ReactNativeだとビルドしてできたapk,ipaファイルが最低30MB~になる。
  • クラッシュしない
    Cordovaはエラーになっても表示が白くなって何も表示されないだけでクラッシュはしない。モバイルアプリなので当然通信環境が悪いとか考慮する必要があり、いろいろな状況を想定してクラッシュしないように作ることは大変である。
  • Webの技術で作れる
    グラデーション、すりガラスなどの凝ったデザインの場合、ReactNativeだとライブラリを入れないと実現できない。(実はlinear-gradientはできるかも)

iOSでテキストの部分選択が出来なかったり、ReactNativeは変なところでハマりどころが多い気がする。逆にReactNativeの良かった点としては、

  • 情報量が多いところ
  • Reactの有名ライブラリがReactNativeに対応してくれている場合が多いのでライブラリが豊富。
  • その延長線上でライブラリのドキュメントが充実しておりAPIもわかりやすいものが多い。

結局、一長一短だし、どの技術を選ぶにせよAndroidiOS両対応開発はしんどいという事実は覚悟しなければいけない

React

ReactNativeどころかReactも初めてだったためAPIから非同期でデータを取ってきて初期値としてセットして表示するという方法すらわからない状態で正直苦労した。

Hooks

カスタムフックを作ったりしてuseStateとuseEffect+depsはなんとなく理解できたが、その他のuseCallbackとuseMemoなどのフックは理解が怪しい。

非同期

はじめはuseEffect内でAPIから非同期でデータを取得して表示していたがローディングやプルリフレッシュの実装が面倒だったのでreact-queryを使用した。react-queryを導入したものの最新バージョンを使用していると思っていたら、たった1ヶ月の間でv2.26.2からv3.5.9にアップデートされていた。さらにドキュメントも書き換わっていて削除されたAPIについてすでに見れなくなっていた。これはまずいなと思ってローディングとrefetch、reduxを使用したキャッシュ機能を持つ自作のカスタムフックを使用することにした。早くSuspenseが正式リリースされて非同期処理が楽になってほしい。

Redux Toolkit

当初はpropsで渡すかContextで十分かなと思っていたが、Reactの理解が進むにつれてredux-persistも使いたかったしRedux使ったほうが便利そうだなと感じてReduxToolkitを導入することにした。本当はRecoilを使いたいが勇気がなかった。でもやっぱり状態管理は難しいのでReduxやキャッシュはなるべく使わず、都度APIで取得したものをただ表示するだけにすれば、状態を意識する必要がないしバグも起こらないという考えで極力状態は持たないようにしている。

コンポーネント設計

MoleculesとOrganismsの違いはよくわからんし時間かかりそうだなと感じてはいたがやっぱりAtomicDesignは無理だった。 基本的にこれらの記事*1の通りで別の会社の人が作ったページデザインを分解して共通で使えそうなパーツを抽出していくという、AtomicDesignの思想とは真っ向から反対するやり方では当然うまく行かなかった。ページをまたがって同じような部分が少ないデザインであった(統一性がない)こともあるが、再利用可能なコンポーネントって幻想では?と感じている。見た目とロジックを分離するPresentationalComponentとContainerComponentの考えはDIっぽくておもしろいなと思った。

ReactNativeで開発するにあたって参考にしたものとか

この本が自分的にかなり良かった。

良かった点としては

  • JS+Reactの基本的な知識が一通り学べる
  • ReactNativeのコアコンポーネントの説明
  • Reduxの使用
  • ReactNavigationの説明
  • AndroidiOSごとのdebug・release環境の設定ファイルの切り替え

Reactバリバリ書いている人ならともかくReactもしくはReactNativeに挑戦しようとしている人には実用的で役に立つと思う。Githubのリポジトリディレクトリ構造とか書き方とかかなり参考にしている。