kent備忘ログ

お仕事と趣味生活と

8月の学習を振り返って

毎日暑かった8月ですが、学習を振り返りです。先月は1ヶ月を通してRubyの学習に専念する形となりました。

8月上旬

Ruby学習
  • 先月から引き続き書籍「プロを目指す人のためのRuby入門」を読む.
  • 7章クラスでは特異メソッドとクラスメソッド、8章モジュールでは概要とincludeとextendの使い方、名前空間を分ける役割を持つことを学んだ。
  • 9章例外処理では例外の補足・意図的な例外の発生方法・実用的な例外処理の活用法、10章yieldとProcではメソッドの処理過程にyieldを使ったブロックの呼び出し方、Procにブロックを引数として渡す方法を学んだ。
  • 11章ではRubyの比較的新しい機能であるパターンマッチを学び、12章ではデバッグ技法を学んだ。
  • この書籍を通して、Rubyでコードを書く際の基礎になる部分から、大規模プロジェクト参加の際に、必須の知識となる部分まで幅広く学び、本を一周しただけでは全てをインプットすることは到底無理である為、今後の課題等で必要に応じて各単元を振り返り、知識として定着させていきたい。
  • 8月9日頃から課題に取り組み始めようとしたが、実際に要件に即したコードを書く経験が著しく乏しかった為、HCの課題をやる前にRubyの問題集を一本挟んで学習することにした。
    参考脱初心者のための問題集 Ruby編

8月中旬

  • 時間の合間を見つけてRuby問題集を少しずつ進めていたが、別記事にある旅行や、お盆時期のゴタゴタで腰を据えて学習することがあまり出来なかった。

8月下旬

  • Rubyのコードを書いていくうちに、真偽値と条件分岐・配列と条件分岐・ハッシュとシンボルの要件に応じた使い方がわかってきた為、並行して課題に着手することにした。
  • 課題では提示された配列を条件毎に処理するプログラムの作成だったが、一番に学ぶ事ができたのは、メソッドの引数の値を決定するのに、指定する引数の中で、入れ子の状態でメソッドを使用し、条件に合う値を指定するという考え方だった。
  • 9月の頭現在、取り組んでいる課題では実際にターミナル上に計算結果を表示させるプログラムの為、内部の処理方法の他に、表示されるレイアウトも考慮して実装しなければならず、細かい調整を必要とされている。
  • 課題に取り組む中で、公式リファレンスを参考にしながら意図した処理を実現するコードを模索していたが、公式リファレンス自体も参照する範囲が広く、適切なライブラリやメソッドを探すのにも苦労した。
  • まだ経験も少ないので、引き続き課題に取り組むことになるが、実際に使えそうなライブラリやメソッドを試して実際に動作を確認することで、知識として蓄積させプログラムを実装する際の表現の幅を広げていきたい。

お盆の時期を利用して仙台に行ってきました。

また月末ギリギリの報告ですが、お盆の時期に仙台へ観光へ行ってきました!

仙台駅西口を望む


8月11日、休日の合間に仙台を観光してきました。駅前に到着時、既に日が高い。

JR仙台駅

駅名アップ

街中の散策は8月で非常に暑かったですが、駅ビル地下のお土産街とヨドバシカメラ、商店街の通りは「ハピナ名掛丁」から「クリス通り」、「マーブル通り」を往復して巡りました。天井があるアーケード商店街エリアが特に熱がこもり暑かった。

クリスロード(東側)方面
マーブルロード(西側)方面

仙台名物の牛タンを食べるため、「味の牛たん喜助 エスパル店」に行きました。流石の繁忙期、でも30分程度で店に入れました。 (今回は定食の写真撮りました!)

喜助店舗前
喜助の牛タン定食

お土産にはこれまた牛タンと、「萩の月」「海宝漬け」を買って帰りました。

書籍「プロを目指す人のためのRuby入門」を読んで

学習の一環で、「プロを目指す人のためのRuby入門」 通称チェリー本を読んだので、所感をまとめました。

良かったところ

 Ruby若しくはその他言語を全く扱った事がない人向けに1から教えるような本ではなく、他言語経験者やRailsを触ったことがある人向けになっています。
その為、初歩の初歩から教える内容ではなく、各項目の実務上重要となる点、よく利用される観点に重点を絞って解説されています。(それでも500ページ以上の大ボリューム!)
内容も、各章・各項毎に分かりやすく分類されており、初めから順に読んでいけばRubyのプログラム構造を体系的に学べるものとなっています。

 またメソッドや構文の説明だけでピンとこない場合も、各解説に必ずと言っていいほどサンプルコードが一緒に記載されている為、そのコードを使って以下のようにハンズオンで学ぶ事ができます。 特に、各章に設けられた例題は、各章で学んだ事の理解度を試せるものとなっています。

irb(sumメソッド解説)

irb(main):001:0> numbers = [1, 2, 3, 4]
=> [1, 2, 3, 4]
irb(main):002:0> numbers.sum
=> 10

irb(パターンマッチ解説)

irb(main):003:1* case [1, 2, 3, 4, 5]
irb(main):004:1* in [first, *]
irb(main):005:1*   "first=#{first}"
irb(main):006:0> end
=> "first=1"

irb(main):007:1* case [1, 2, 3, 4, 5]
irb(main):008:1* in [*, last]
irb(main):009:1*   "last=#{last}"
irb(main):010:0> end
=> "last=5"

 この本は改訂版になりますが、作者の伊藤淳一さんもフィヨルドブートキャンプのメンターをなされている方で、初版から受講生の生徒さんから感想などのフィードバックを受けており、学ぶ側からの視点も考慮した一冊となっています。

学んだこと

 今までWebアプリ作成の為Railsを触った事があったが、やはりその中でもRubyの理解が浅かったり、プログラムの挙動を理解しきれずにぼんやりとしたまま作成していたところがあったので、今回の本でRubyの基本から学び直す事ができた為、クラスやメソッドの一つ一つ動きを理解しながらコードを実装していきたいと思います。

(特に4章〜7章の配列・繰り返し処理・ハッシュとシンボル・クラス・正規表現についてはRubyでプログラムを実装する際の基礎でありながら核となる部分であり、今後定期的に理解を深める為復習したいと思います。)

難しかったこと

 第7章クラスの解説から既に難しい単元ばかりでしたが、特に8章〜11章に至っては、Ruby全体の仕組みに関わる物も有り、内容が重たいものもありました。

 しかし、作者さんもおっしゃられているように、一度に全てを覚え切ろうとせず、頭の中にインデックスを作っておき、そこから実際にプログラムを作ろうとした際、分からない事が出てきた時に、この本を読み返して理解を深める事が上達への手段だと思います。

7月の学習を振り返って

今回も月の変わり目に、先月の学習を振り返ります。

7月上旬

HTML課題(Webサイトアウトプット模写続き)
  • 前月から課題のWebサイトの模写。一度レビューを頂いたのですが、細部にレイアウトの違いが残っている部分があったため修正しました。
Udemy教材にてWeb開発の流れを体系的に学ぶ
  • フロントエンドからバックエンドまで体系的に開発の流れを学ぶ為、HTMLとCSSを復習。また、今回新しく開設のあったBootstrapを使用した模擬サイトも作成。

  • 続いてJavaScript、今まで構文については学んだことがあり、こちらも復習になるが、今回はDOM操作に関しての解説もあり、要素やノードの変更・追加・削除の方法を学んだ。

  • バックエンドにはRuby on Railsを使用。まずは開発環境構築の為、教材ではAWSのCloud9を使用しての環境構築と、Rubyのターミナル上での実行方法を学んだ。
  • Ruby自体の学習では配列やハッシュなどの基本文法から、メソッド・クラスの作成方法と概要、モジュールの概要を学んだ。
  • Railsでは模擬WebアプリとしてTodoアプリを作成。MVCアーキテクチャの解説から始まり、erb記述方法、ページ共通部分のパーシャル化、Rails7から導入されたturbo機能を使用した実装方法を学んだ。
  • バックエンド2つ目はSQLの解説。MySQLの環境構築と、ファイルからの構文実行・データ型とテーブル操作方法を学んだ。
  • 最後にコードのバージョン管理となるGitの解説。復習となるがワークツリー・ステージ・リポジトリの解説、Gitコマンドの解説、リモートリポジトリとの連携方法、GitHub Flowを学んだ。

7月中旬〜下旬

GitHub Pagesを使用した模擬サイト公開と、解説のブログ記事作成
  • 先に学んだBootstrapを使用した簡易的な模擬サイトをGitHub Pagesを使用して公開しました。(GitHubが読み取れるファイル構造の理解に手間取り、何度かやり直しました。)
Docker
  • また新しい単元として、7月の中頃からUdemy教材を使用したDockerの学習に取り組みました。
  • 始めにイメージとコンテナの概要の解説から入り、dockerコマンドの学習、続いてDockerfileの概要と作成ルールを学んだ。
  • 実際の環境構築例では、pythonを使用したデータ解析環境を構築したが、より実践的なDockerfile作成方法を学んだ。
  • 環境構築2つ目ではRailsPostgreSQLを使用したWebアプリ開発環境の構築を行い、ここでdocker-compose.ymlについて学んだ。
  • またHerokuとTravis CIを使用したCICD環境の構築も学び、設定ファイルの準備の仕方次第でここまで作成を効率よくすることができると学んだ。
  • 最後に実際に既存のRailsアプリをDocker化を行った。今まで学んだコンテナとイメージ・Dockerfile・docker-composeの総復習ができた。

7月下旬

Ruby学習
  • 書籍「プロを目指す人のためのRuby入門」を読む.
  • 2章から文字列や数値を解説されているが、全くの基本からというわけではなく、あくまで実務に役立つ知識として実践的な事が書かれていた。
  • コードテストも開発と同時に行うことを推奨しており、より確実なコードを書くことを目的としている。
  • 配列と繰り返し処理、ハッシュとシンボル、正規表現と学んできたが、特に配列、ハッシュ、シンボル、繰り返し処理については、コードの中でも頻出の部分でもある為1度だけでなく、よく復習して理解したい。

WebアプリのDocker化について

Dockerの概要と、RailsをはじめとするWebアプリについて、Docker化の手順についてまとめました。

Dockerとは?(概要)

  • 従来であれば、ホストPCの環境に合わせてパッケージやライブラリをインストールし、環境構築を行うがdockerを使用することにより、ホスト側の環境を気にする事なくポータブルな環境構築を可能にしたコンテナ型プラットフォーム。
用語 説明
Dockerfile イメージの設計図、イメージ作成の際、Dockerfileにより実行されるコマンド、ディレクトリが決定される。コードはINSTRUCTION(指示) arguments(引数) の順番で記述する
Image Dockerリポジトリにアップロードされているイメージもあるが、自ら作成したDockerfileにより、利用したい実行環境に合わせたイメージを作成することができる
Container イメージを基に作成された実行環境、中身はDocker engine上で動いており、起動時に設定された以外のホストPCの動作環境の影響を受けない
Docker-compose.yml 複数のコンテナを同時に扱うための設定ファイル、このファイルからコンテナを起動することにより、複数のコンテナの接続・連携によりWebアプリを動作させることができる

Docker化の手順

  1. Dockerレジストリ(DockerHubなど)より、ベースとなるイメージをPull
  2. ホストPCでPullしたイメージを実行し、作成したコンテナの中で、Webアプリを実行。その際実行に必要となるパッケージのリストアップを忘れずに行う
  3. Dockerfileの作成、ベースイメージのPullと、そこに必要なパッケージのインストール、ディレクトリの同期、ファイルの追加などコードの記述を行う
  4. (Webアプリのコンテナとデータベースコンテナなど、立ち上げるコンテナがそれぞれ複数の場合)予め立ち上げる複数のコンテナ情報を記述した、docker-compose.ymlを作成する。

各INSTRUCTION解説

Dockerコマンドだけでも、それだけで記事が一つ書けるくらいボリュームがありますが、今回はDockerfileとdocker-compose.ymlファイル構成に焦点を当て、まとめてみました。
用語 解説
FROM ベースとなるイメージを決定(DockerfileはFROMから書き始める)
RUN コマンドを実行、RUN毎にLayerが作られる
CMD ["executable", "params1", "params2"] コンテナのデフォルトコマンドを指定、原則Dockerfileの最後に記述、一つのDockerfileに一つだけ記述
COPY ホストPCからファイルを渡す事ができる
ADD COPYと同じくホストPCからファイルを渡すことができるが、圧縮(アーカイブ)ファイルを解凍したい場合に使用する事が多い
ENV <キー名> <値> (若しくは <キー名>=<値>) 環境変数を設定
WORKDIR <絶対パスを指定> Docker instruction(ex.RUNコマンド)の実行ディレクトリを変更する、&&で繋げてコマンドを記述した場合は移動先でコマンドが実行される。なお指定されたパスの先に対象のファイルが無ければ、対象ファイルを自動生成する

(参考:デフォルトではRUNコマンドは全てroot直下で実行される)

RUNとCMDの違い
  • CMDはimageをrunした際に初めて実行される(Doker imageの中には記述されない)
  • RUNはLayerを作る、CMDはLayer作らない
COPYとADDの違い
  • 単純にファイルやフォルダをコピーする場合はCOPYを使用
  • tarの圧縮ファイルをコピーして解凍したいときはADDを使用
CMDとENTRYPOINTの違い
  • ENTRYPOINT ["executable"] デフォルトのコマンドを指定する事ができる
  • docker runコマンドでコマンドを上書き出来るのはCMDコマンドのみ
  • 但し、ENTRYPOINTを記述した場合、続いてCMDを使用する場合はCMDはENTRYPOINTで指定したコマンドの引数(オプション)のみを記述することになる CMD ["executable", "params1", "params2"]
  • 実際にはdocker run コマンドで引数を指定して上書きコマンドを実行する際に利用する事が多い
Dockerfileの効率の良い作成方法
  • 前提:DockerfileのINSTRUCTION : RUN, COPY, ADDにはDocker imageのサイズを肥大化させるlayerを追加する機能もあるため、Dockerfile内の記述数を最小限にする。そのために、コマンドを&&で繋げる・バックスラッシュで改行する
  • 作成途中は都度都度RUNでレイヤーを作成しながらfileを作成していく。完成後、コードのリファクタリングを行い、RUNの記述を最小限にしてスマートなDockerfileを目指す。

(参考) RailsプロジェクトのDocker化におけるDockerfile(左)とdocker-compose.yml(右)のコード解説

コメントアウトによる解説

Dockerfileもしくはdocker-compose.yml作成後の起動と停止

  • Dockerfileから起動する場合は、Webアプリのルートディレクトリ(ビルドコンテキストとも言う)に移動し、docker build .コマンドを実行によりイメージを作成し、docker runコマンドによりコンテナを起動(停止はdocker stopコマンド)
  • docker-compose.ymlファイルから起動する場合は、docker-compose upコマンドでコンテナの立ち上げてWebアプリを起動する。(停止はdocker-compose stop、コンテナの停止と削除を一度に実行する場合はdocker-compose downコマンド)

GitHub Pagesについて

GitHubを使用する際、HTMLやCSSJavascriptなどの静的ファイルで構成されたWebサイトであれば、「GitHub Pages」というWebサービスを使用して公開することが出来ます。

GitHub Pages は、アクセス者がログインを必要とするような、サイトやECサイトなどのサイトはサポートしていません。
PHPRubyPython などのサーバーサイド言語はサポートしていないため)

(例)紹介するGitHubリポジトリの中身はこうなってます。(HTMLファイル・CSSフォルダ・JavaScriptフォルダ・画像フォルダ)

リポジトリの中身

リポジトリ画面の上部バーの右側、「Settings」を選択

リポジトリ画面の上部バーの項目

②画面左の「Code and automation」メニューから「Pages」を選択

「Code and automation」メニュー

③画面右の「Source」プルダウンメニューから「Deploy from a branch」を選択

「Source」プルダウンメニュー

④「Branch」のプルダウンメニューで公開したいファイルのブランチを指定し、構成ファイルの場所をrootディレクトリか、docsフォルダのどちらかを選択

(今回はdocsフォルダ内に公開したいファイルがあるためdocs/を選択)

「Branch」のプルダウンメニュー

ここややこしく、実際にデプロイする際に私も悩みました

•••どうやらリポジトリ直下に任意の名前のフォルダを用意して、それを指定するやり方は出来ないようです。

※以下公式より抜粋
公開ソースとして使用するブランチフォルダーを指定できます。 ソース ブランチにはリポジトリ内の任意のブランチを指定でき、ソース フォルダーにはソース ブランチのリポジトリ (/) のルートまたはソース ブランチの /docs フォルダーいずれかを指定できます。

その後右側の「Save」で保存するとGitHub Pagesへのデプロイが開始され、ページ上部にWebサイトへのアドレスが表示されます(公開完了)。

デプロイされたWebページ

6月の学習を振り返って

月の変わり目なので、前回と同じように先月の学習を振り返ってみようと思います。

6月上旬

Linuxの基礎コマンドを学習
Git Pull Request、GitHub flow学習
  • チーム開発において、レビュワーに作成したコードを確認してもらうPull Requestの方法、プログラムを、安全に効率よく開発を行うことができるGitHub flowについて学習しました。
  • 中でもGitコマンドでの動きをGUIで確認しながら学習できるLearn Git Branchingはハンズオンで学習することができて参考になる教材でした。

6月中旬

HTML、CSS基本学習
  • 6月の中頃からUdemy教材を使用したHTMLとCSSの学習に取り組みました。

  • CSSグリッドレイアウトの学習、モバイルファーストによるレスポンシブデザイン

  • ページ内の要素をグリッドレイアウトに沿って配置するFluid Grid、ウインドウの幅に沿って画像サイズを縮小拡大するFluid Image
  • formタグ、inputタグを使用したコンタクトフォームの作成方法

を学びました。

HTML課題(Webサイトアウトプット模写)
  • 教材にて基礎知識を学習後、実際のWebページのコーディング模写に取り組みました。
  • 初めに見本となるWebページの画像やアイコンなどを取得し、フォントサイズや要素の幅・高さ・色などはソースを見ずにChromeプラグインを使って計測により取得しました。
    次にモバイルファーストを念頭にHTMLファイルから作成するため、見本のページにあるテキストをHTMLファイルに書き写し、見本のレイアウトになるようHTMLタグでマークアップしていきました。
  • HTMLの記述が完了後、CSSプロパティの設定を行い、細かい箇所のサイズを再度計測しながら、テキストや画像の装飾・調整を行ました。

6月下旬

HTML課題(Webサイトアウトプット模写続き)
  • 次に見本のサイトにある動きのある箇所の再現のため、まず初めにCSSの記述だけで再現できないか取り組みました。(画像の回転、プルダウンメニュー、画像ポップアップなど)
  • Webサイトの動きを検証中、どうしてもJavascriptを使用しなければできそうにない、ページスクロールに追従したメニューのハイライト表示の再現には、
    APIであるIntersectionObserverとElement.scrollIntoViewによるCSSプロパティの付与と解除機能とスクロール追従機能を再現しました。(このAPIを発見するまでかなり検索しました。)