【3分でわかる！】『JenkinsとCI（継続的インテグレーション）』〜書籍Jenkins実践入門より〜
読み終えるまで約3分⏰
どうも、ちゃんなるです。 最近仕事でJenkinsに触ることになりました🙋♂️ ただ、さっぱりよくわからないので、これを機に勉強を始めることにしました👍
今回参考にしたのはこの書籍です。
『Jenkins実践入門』
リンク
Jenkinsとは
Jenkinsは、継続的インテグレーション（CI）を効率的に行うためのツールです。インテグレーションテストを継続的に、かつ自動的に実行するための土台のことで、開発者の手作業を大幅に削減できるもののようです。
公式サイト*1を読んでみようと思いましたが、英語と中国語しかありませんでした（日本語ですら怪しいのに…笑）。
オープンソースなので、無料で利用できますし、誰でも開発に携わることができます。ソースコード*2はGitHub上にあるので気になる方は覗いてみてください。
継続的インテグレーションとは
CI(Continuous Integration)は、毎日何度も継続的にビルドを実行する仕組みのことです。 ソフトウェア開発の品質と生産性を向上させることが目的で、短いサイクルでビルドしてその結果を開発者にフィードバックすることにより、ソフトウェアのインテグレーション時に発生する様々な問題の早期発見・早期解決を目指すのです。
ビルド
ビルドは、コンパイルやテストなどを実行し、「正しく」動作するソフトウェアやアプリケーションを生成する一連のプロセスのことです。手作業で行われたり、シェルスクリプトやビルドツールなどで一部自動化されていたりします。しかし、手作業ではミスをしたり作業が属人化したり、スクリプトでも特定の環境でしか同じ結果にならないなどの問題が生じます。
CIではこのような問題を一挙に解決できます。
CI活用の大まかな流れ
CIは下記の2〜5を自動化します。なんとなく便利なイメージがつくでしょうか？
- 開発者がソースコードの修正をコミットし、ローカル環境で動作確認をして問題がなければリモートリポジトリに変更をプッシュする
- リモートリポジトリの変更を検知し、ビルドが実行される
- ビルド結果（成功/失敗）を開発者にフィードバックする（メールやRSS、Slackなどのツールと連携する場合もある）
- ビルド結果のレポートを作成する
- ビルドが成功している場合、デプロイする
結果のレポートには、ビルド自体や内部で行っているユニットテストやE2Eテストなどの成否、それにかかった時間などを載せる運用が多いでしょう。後からレポートを振り返ることで様々な分析ができるのもメリットですね。
あらゆることが自動化されることで、開発者の作業が大幅に削減できます。ソースコードの修正を起点にデプロイまでが完了し、開発当事者だけでなく他の開発者やプロデューサに修正したソフトウェア・アプリケーションを共有することが容易になります。
Jenkinsの歴史を少し
- 2004年、Hudsonという名前で、当時Sun Microsystemsで川口耕介氏（Jenkins生みの親）の個人的なプロジュエクトとしてスタート
- 2008年、同社からサポートが提供され始める→同年、JavaOne Duke’s Choice Arardsを受賞して、CIのデファクトスタンダードへ
- 2010年、同社がOracleに買収され、川口さんもOracleを去る→OracleがHudsonという名称を商標登録する問題が発生
- 2011年、Hudsonプロジェクトからフォークされ、名称を変更したものが現在のJenkins
- 2013年段階で、Linuxカーネルの半分弱に及ぶコミット数👏
- 2015年にアクティブユーザが10万人超え👏
- 2016年にJenkins 2.0リリース→同年、Jenkins Certification*3という認定制度が開始🔥
- 現在に続く…
まとめ
Jenkinsは、CIを効率的に行うための土台を提供しているツールです。 オープンソースであり、その中でも活発に開発活動が続けられているプロジェクトの一つです。
無料で利用できるので、興味のある方は使ってみてはどうでしょうか？私もこれから実際に自分のPCにインストールし、手を動かしながら学習していきます🔥
書籍情報
 | Jenkins実践入門改訂第3版 ビルド・テスト・デプロイを自動化する技術 （WEB＋DB PRESS plusシリーズ） [ 川口耕介 ] 価格:3,278円 |
 | ［改訂第3版］Jenkins実践入門 ーービルド・テスト・デプロイを自動化する技術【電子書籍】[ 川口耕介【監修】 ] 価格:3,278円 |
【5分でわかる！】コンピュータが計算ミスをする？！〜書籍『プログラムはなぜ動くのか』より〜
読み終えるまで約5分⏰
どうも、ちゃんなるです。 今回は、あの正確無比なコンピュータが計算ミスをする…という事実を紹介します✌️
「んなアホなw」 「計算できないコンピュータ、冷やせない冷蔵庫みたいなもんやん笑」
色々と思うところはあるでしょう。しかし、事実としてある条件下では必ず計算ミスをしてしまうのが現代のコンピュータなのですよ…涙
＊内容はこの本『プログラムはなぜ動くのか』を参考にしています。
リンク
①論より証拠、プログラム実行結果を見よう
実行するプログラム（今回はJavaScriptを使用しているが、別言語でも再現可能*1）
let result = 0; // 結果を格納する変数 for(let i=0; i<100; i++){ // 100回のループ処理を実行 result += 0.1; // 0.1をresultに加算し続ける } console.log(result); // 結果: 9.99999999999998
次の画像を見てくださいな🙋♀️
「嘘やん、そんなわけないやろ笑」
ぜひ、ブラウザ上のコンソール、またはpaiza.ioのサイトなどで実行してみてください！
②なぜ10にならないの？
端的に言うと、コンピュータ内部では2進数が使われているから、です。
「ふぁ？」
私たちは10進数（0から9の10種の数字）を用いますが、コンピュータは計算や画面の表示などの全ての処理を2進数（0と1の2種類の数字）でのみ行います（詳細は省略）。
画面上で見る10進数の演算も、内部では2進数の値で行われており、画面に表示する際は10進数に変換してから表示しています（少々語弊のある表現かもしれませんがご了承くださいmm）。
そして、10進数の少数点数の中には2進数で表現できないものがあります。0.1はそのうちの一つであり、今回はこの0.1を用いて計算をしたため、誤差が乗って計算ミスにつながったのです。
③10進数の少数点数には2進数で表せないものがある！
例えば、10進数の5を2進数で表すと0.101となり、10進数の0.625を2進数で表すと0.101となります（計算過程は省略）。
10進数の0.1を2進数で表現すると…
0.000110011001100...
循環小数になってしまう、近似値で表すしかない涙
よって実際の値とはずれてしまう、というのが計算ミスの理由なのでした。
まとめ
コンピュータにもできない計算がある！少数を扱う計算には要注意！
計算ミスをする背景は、2進数では表現できない10進数の少数点数があるということ。
計算ミスを避けるには、2進数で表現できる値で計算を行うこと。正確な値が求められる場合は、少数の計算を避けた方がいいでしょう。今回の場合は、『0.1を100回加算』ではなく、下記のように『1を100回加算し最後に10で割る』と少数を使わないように工夫するといいでしょう。
let result = 0; // 結果を格納する変数 for(let i=0; i<100; i++){ // 100回のループ処理を実行 result += 1; // 1をresultに加算し続ける } result /= 10; // resultを10で割る console.log(result); // 結果: 10!!!
書籍情報
 | プログラムはなぜ動くのか 第3版 知っておきたいプログラミングの基礎知識 [ 矢沢 久雄 ] 価格:2,640円 |
 | プログラムはなぜ動くのか 第3版 知っておきたいプログラミングの基礎知識【電子書籍】[ 矢沢 久雄 ] 価格:1,320円 |
- 【書籍名】プログラムはなぜ動くのか
- 【著者名】矢沢久雄
- 【出版社】日経BP
- 【出版日】2021年5月14日頃
- 【ページ数】308
【5分でわかる！】Webブラウザのレンダリングエンジンの仕組み
読み終えるまでおよそ5分⏰
どうも、ちゃんなるです。
今日はブラウザのレンダリングエンジンの仕組みについてやさーしくまとめます。
現職エンジニアの方々には簡単かもしれないけど、読んでもらえると嬉しいです🙋♀️
次の書籍の内容を参考にしました。
リンク
①まず、ブラウザって？
サーバからWebサイトを取得し、画面に表示してくれるアレです。 ChromeとかSafari、Firefox、EdgeのようなWebページを見るためのツールです。
ちなみに、ブラウザの世界シェアはこの順になってます。*1
ブラウザは、与えられたURLからサーバとWebサイトのファイル(主にHTMLファイル)を特定し、ファイルを取得します。WebサイトはHTML、CSS、JavaScript、画像ファイルなどのさまざまな要素で構成されます。
レンダリングエンジンとは、ブラウザの中に入っている仕組みのことで、HTMLをはじめとしたWebサイト構成要素を読み取って、画面上のピクセルに描画する機能を持ちます。メールクライアントに入っていることもあり、それゆえテキストだけでなく綺麗に装飾されたメール（HTMLメール）を使うことができます。（広告メールとかレイアウト綺麗ですよね笑）
②Webページがレンダリングされる流れ
大まかに言うと、4つのパートで構成されます。
Loading→Scripting→Rendering→Painting
- Loading: 必要なリソースを集めます。具体的には、HTMLとその内部で参照されているリソースを再帰的に取得し、ブラウザ内部で扱いやすい形式に変換します。
- Scripting: JavaScriptを実行します。場合によってはDOM要素を書き換えることがあります。
- Rendering: 画面の表示に必要な要素を計算して求めます。
- Painting: 実際に画面に描画します。（描画はレイヤーごとに分けて行われ、最終的にはレイヤーを重ね合わせて描画完了となるそうですが、レイヤーに関しては省略しますmm）
③再レンダリング
②までは、初期画面表示の話です。
Webページには、ボタンや入力フォームなどのコンテンツがあり、ユーザの操作によって画面が変わったりしますよね。その際に起こるのが再レンダリングです。
Webコンテンツがユーザによって使用される（=DOMイベント発生）→Scripting→Rendering→Painting
と、再度レンダリングのフローが走るのですね。
ちなみに、全ての要素が再計算されるわけではありません（再計算不要なものは再利用されます）。
まとめ
ブラウザと、ブラウザがWebページを表示する際に行われている処理をざっくり解説しました。
『Loading→Scripting→Rendering→Painting』です。
「大体こんな感じで動いているんだなぁ〜」と知ることで、今後のプログラミングに生きるかもしれません（知らんけど）。
不適切な表現や間違った部分があれば、厳しくご指摘お願いします！
書籍情報
 | Webフロントエンドハイパフォーマンスチューニング Webサイト・アプリケーションを徹底的に高速化 [ 久保田光則 ] 価格:2,948円 |
- 【書籍名】Webフロントエンドハイパフォーマンスチューニング Webサイト・アプリケーションを徹底的に高速化
- 【著者名】久保田光則
- 【出版社】技術評論社
- 【出版日】2017年6月
- 【ページ数】337
