Sakiのプログラミング学習ブログ

プログラミングについて学んだことや、学習の振返りを書いています。

『Web技術の基本』を読んで学んだこと

読書ノート 輪読会

f:id:Saki-Htr:20210228162526p:plain


フィヨルドブートキャンプで、「Webを支える技術 -HTTP、URI、HTML、そしてREST」(以下、「Webを支える技術」)を読むという課題があったが、必要な前提知識に不足があり、理解が難しかった。

この本が難しい場合は『イラスト図解式 この一冊で全部わかるWeb技術の基本』(以下、「Web技術の基本」)が、イラストが多く最初にイメージを掴むのに最適とアドバイスをいただいたので、そちらを先に読むことにした。

www.amazon.co.jp

読み終わったので、読んだ中で学んだこと・調べたこと、感想を書いた。


<<無断転載にならないよう気をつけて書いたつもりですが、もしご指摘等ありましたら修正あるいは削除させていただくつもりです>>


本の構成

ch1. Web技術とは
ch2. Webとネットワーク技術
ch3. HTTPでやりとりする仕組み
ch4. Webのさまざまなデータ形式
ch5. Webアプリケーションの基本
ch6. Webのセキュリティと認証
ch7. Webシステムの構築と運用

ch1. Web技術とは

学んだこと

  • HTMLを人が見やすいように変換しているのは、Webサーバーではなく、Webブラウザ。

Webページが表示される流れ

  • 一度のコンテンツ転送で送られてくるファイルは1つ。
  • 画像など他のファイルがそのコンテンツに埋め込まれていて、転送が必要になったときはもう一度Webサーバーに要求してファイルを取得する。
  • 疑問:例えば、そのWebページに画像のファイルが１０枚あったら、コンテンツに1回要求+画像ファイルの要求10回で11回要求するということか？
    →以下の記事によれば、読み込むファイル1つにつき、HTTPリクエストが1回増えてしまうため、ファイル数が多いほど、表示までの時間が遅くなってしまう とあるので、やはり、ファイルの数の分リクエストとレスポンスが行われているようだ。

なぜ全てのサイトがSSL化しないのか？

調べたこと

教わったこと

この疑問についてtechplay女子部のエンジニアの方が答えてくださったので、以下にまとめた。

→まとめると、今はSSL化することが当たり前で、していないサイトはほとんど無い。

CGIの仕組み

普通のホームページはスーパーで売っているお寿司と同じです。作り置きです。CGIでは、注文が入ってからホームページのファイルを作ります。
１．ホームページを見る人の注文をWebサーバ上にあるプログラムが受ける
２．注文を受けたプログラムが何かお仕事をする
３．注文を受けたプログラムがホームページのファイルを作って、ホームページを見る人に渡してあげる
の流れですね。
この流れを実現するためのあれやこれやがCGIです。

  • 注意:CGIはWebサーバ上でプログラムを動かすための「仕組み」であって、プログラム自体を表す言葉ではない

クライアントサイド・スクリプト

どんなプログラムかイメージしづらかったので、パスワードを登録する時に例えて考えた

  • 新しいWebサービスを使うために新規ユーザー登録をするとき、大抵は「パスワードの文字数は8文字以上、大文字小文字を混ぜる」などの条件がある。
  • クライアントがその条件を満たしてパスワードを設定できたかどうかは、誰が判断しているのか?
  • Webは同時に何百人もの人がアクセスしてくるので、サーバにやらせるのは非効率。
  • Google Chrome、Internet Explorerなどのブラウザが、送られたプログラムを解析し、ユーザが入力したデータなどをチェックしてからサーバへ送信している。
    つまり、ユーザーがパスワードを条件通りに入力したかチェックしているのは、ブラウザ。
  • このチェックしているプログラムが、クライアントサイド。スクリプト。

RESTful(RESTっぽい)とは

  • RESTは、「これが REST な実装である」という厳密な定義があるわけではない。
  • REST はアーキテクチャスタイル。スタイルなので、「REST っぽい」「REST っぽくない」といった語られ方をする。

考えたこと

  • HTMLを人が見やすいように変換してくれているのが誰かは考えたことがなかった。なんとなくWebサーバーがやっていると思っていた。
  • SSL化の背景についてここまで深く知ることは自力では不可能だったと思うので、教えてくださったエンジニアの方に深く感謝。今使われている技術がどういう背景で繁栄していったのかを知るのは楽しい。

ch2. Webとネットワーク技術

学んだこと

HTTP

TCP/IP

  • TCP/IP(プロトコルの集まり)は、役割ごとに4つの階層に分かれる。レイヤー1~4。
    クライアントとサーバーの両方にこの階層があり、同じ階層同士でプロトコルに従った処理をしている。
  • 処理の流れ:レイヤー1から処理が始まって、レイヤー1→2→3→4とデータが渡されていく
  • 階層を7つに分けた考え方もある=OSI参照モデル

IPアドレス/ドメイン

考えたこと

  • メンターさんに、TCP/IPの階層についてお聞きしたら、
    • Webエンジニアとして働く上では、「アプリケーション層/HTTP」の部分を理解していればOK
    • 他の階層については深く理解している必要はなく、階層になっているということが分かっていればOK

とのことだったので、今は、「階層に分かれている」ということを覚えておく。

ch3. HTTPでやりとりする仕組み

学んだこと

HTTPメッセージ

  • HTTPメッセージ=HTTPリクエストとHTTPレスポンスの2種類

HTTPリクエスト/HTTPレスポンス

  • HTTPリクエストの構成は、3つの構成でできている。
    リクエスト行/(メッセージ)ヘッダー/メッセージボディ
    • リクエスト行:どうしたい
    • ヘッダー:何を
    • メッセージボディ:どんな方法で
  • もし要求して応答されたwebページを解析したときに、画像のリンクがあったら、もう一度要求を送る。

f:id:Saki-Htr:20210227110159p:plain (HTTP入門 - とほほのWWW入門より引用)

HTTPメソッド

  • HTTPリクエストメソッド:簡単に言うと、WebブラウザからWebサーバに対しての命令(リクエスト)。
  • リクエスト(命令・お願い)には色んな種類がある。
  • Webサイト閲覧で主に使うのはGETとPOST
  • 主に使われるメソッド
メソッド 動作
GET ページの取得を要求。WebブラウザからWebサーバに渡す値をURLの後ろにくっつけて送るやり方
HEAD ヘッダのみの要求
POST データをwebサーバーに送信
PUT webサーバーが保管してるコンテンツのアップロード(書き換え)
DELETE 指定したデータを削除
CONNECT SSL

HTTPバージョンの変遷

HTTP/1.0以前

  • リクエストを送信するたびにコネクションを確立し、レスポンスでデータを送った時にコネクションを閉じていた。
  • つまり、画像が埋め込まれていたらそのたびにリクエストを送る仕様になってるので、たくさん画像が埋め込まれているとリクエストの回数分だけコネクションの確立&閉じるをしなければならなかった。=効率が悪かった!

HTTP/1.1~

  • コネクションを継続利用できる、「HTTPキープアライブ」ができた。
  • HTTPパイプライン:複数のリクエスト&レスポンスを同時並行で行う。

HTTP/2

  • HTTP/2はgoogleが提案したSPDYという通信の高速化を目的としたプロトコルが土台。
    = HTTP/2の高速化を担う部分はほぼSPDYの機能を使っている。
  • 2での改良点①
    • 1.1のHTTPパイプラインは、HTTPリクエストの順番通りにレスポンスを返す。
    • つまり、1つのレスポンスの処理が重いと遅くなってしまう(高速道路で渋滞が起こっているイメージ)という問題があった。
    • この解決のために、コネクション上に仮想的な通信経路=ストリームを作った。
  • 2での改良点②
    • データのやりとりがテキスト形式→バイナリ形式に。前はテキスト形式だったので、バイナリ形式のデータを変換するのに負荷がかかっていた。
      • バイナリ形式のデータとは:コンピュータが直接的に処理するために２進数で表現されたデータ
    • そのため、ヘッダー情報を、2回目のやり取りからは追加情報(差分)だけ送るようにした。
  • 2での改良点③
    • 前はブラウザからリクエストが来たときに、画像が埋め込まれていたらその都度リクエスト&レスポンスのやり取りをしていた。
    • サーバーが、リクエストが来たときに必要なファイルを判別して、画像などのファイルもすべて返すようになった。(サーバープッシュ)

HTTP/3

  • 本には載っていなかったが、調べたら、HTTP/3がリリースされていた。
  • HTTPはステートレスなプロトコル。それをステートフルにしてくれるのがCookie。
    例:ショッピングサイトのカートに入れた商品を次にログインしたときにも覚えてくれる。
  • Cookieが使用される目的は大きく分けて次の２つ
    1. Webサイトでユーザー情報を保存し、利便性を向上する
    2. ユーザー情報を取得し、広告配信に利用する
  • 仕組み
    1. ブラウザが初めてサーバーへ接続
    2. サーバーが、ブラウザに対してレスポンスを返す時に、ブラウザに保存しておいてほしい情報をCookieとして返す。 HTTPレスポンスに、set-cookieヘッダーを含めることで、Cookieを送信できる。
    3. 2回目以降、ブラウザはサーバーへ接続した時、HTTPリクエストにCookieヘッダを含めることで、Cookieを送信する。

セッション

  • セッション:クライアントがWebサーバーに接続してから切断されるまでの一連の行動を表す。
    クライアントとサーバーで通信を行う場合、クライアントからサーバーへ接続した時点でセッションが始まり、サーバーから切断するとセッションが終了する。この一連の流れを管理することをセッション管理という。
  • 例えばECサイトには、商品を探し、カートに入れ、購入するという一連の流れがある。このように同一利用者からのアクセスを関連性のある一連のアクセスとして扱いたい場合、Cookieを使ってセッション管理が行われる。
  • セッションID:一連のやりとり（セッション）を識別するための一意の数字。銀行の受付番号と同じ。セッションIDをクッキーに格納してやりとりをすることによってステートフルな通信ができる。
  • 各セッションにはIDが割り振られている。
  • セッションのデータはサーバーに保存され、セッションIDはブラウザに保存される。
    ブラウザがサーバーにリクエストする時、セッションIDを渡す→サーバーがIDに対応したデータを返す。
  • Cookieでユーザーの判別が行われ、セッションによってそのユーザーがとった行動と結びつけられることで、「通販サイトのカート内商品の保持」といった機能が実現される。

Cookieの問題点

  • Cookieは便利だが、プライバシー面・セキュリティ面において注意しておくべき点もある。
  • Tracking Cookie（トラッキングクッキー）
  • セッションハイジャック
    Cookieの識別子が漏えいする:右矢印:CookieにはサイトのセッションIDとともに、ログイン情報が含まれていることがある:右矢印:情報自体がSSLなどで暗号化されていても、セッションIDさえわかってしまえばサーバーに送ることで、ログイン状態が再現されてしまう。

考えたこと

  • HTTPが登場したのは1990年代らしい。私が生まれたのが1995年なので、想像していたよりも最近で驚いた。
  • HTTPの進化に感動した。私が小学生の時に父が使っていたPCは、Webページを表示するのにとても時間がかかり、画像も少しずつジワジワと読み込んで表示されていた。今はそんなことは有り得ず、wifiなどのネット回線に問題がなければ、たくさん画像が使われたWebページでも一瞬で表示できる。今ネットを便利に使えているのは、HTTPの進化のおかげなのだな、と思った。
  • HTTPのバージョンを知る方法を調べた。
    デベロッパーツールを開き、networkタブのProtocolを見ると、バージョンが分かる。

f:id:Saki-Htr:20210227112606p:plain

ch4. Webのさまざまなデータ形式

学んだこと

スクリプト言語

フィード

  • webサイトなどの更新履歴を配信するためのファイル。中身はハイパーリンクの集まり。
  • ブログやニュースサイトで使われる
  • webサイトにアクセスすることなく、最新情報をチェックできる

フィードリーダー

  • フィードを取得&管理するためのソフトウェア
  • お気に入りのwebサイトを登録しておくことで、わざわざそのサイトにアクセスしなくても最新情報や更新情報をチェックできる便利な情報収集ツール
  • ウェブサイトの見出しや要約、更新情報を記述したフィードを巡回・受信し、一覧表示するソフトウエア。RSS形式のフィードを扱うRSSリーダーを指すことが多い。
    = RSSリーダー

フィードリーダーは現在は衰退している

YouTubeやニコニコはストリーミング配信ではないのか

  • 本では、

YouTubeやニコニコ動画などの多くの動画配信サービスはプログレッシブダウンロード配信

と説明されていたが、ストリーミング配信ではないのかと疑問に思ったため、調べた。

3つの配信方法の特徴・違い

  • 音声･動画の配信方法は3つある。
  • ダウンロード配信
    • ダウンロードを全部完了するまで再生できないが、完了すればいつでも再生できる
    • 例：Amazonプライムの動画をDLした時、途中までしかできていないと視聴することができない。
  • プログレッシブダウンロード配信
    • ダウンロードしながら再生
    • 疑似ストリーミング
    • 配信したファイルはユーザー側に残る
  • ストリーミング配信
    • ファイルを細かく分割し、細切れにしたデータをユーザーに配信して再生する
      例:ニコニコ生放送などのライブ配信
    • プログレッシブダウンロード配信との大きな違いは、動画データを端末にダウンロードさせない点。
    • 利用者のパソコンやタブレットに動画データが残らないから情報漏えいの心配がなく、セキュリティ的にとても安心な配信。

→YouTubeを視聴する時に、見たい動画のURLや配信ページにブラウザで接続した時にしか視聴できないので、「いつでも再生できる」という説明が理解できなかった。ストリーミング配信ではないのか？

YouTubeを調べてみた

  • YouTubeで動画を見ると、映像の下に赤いラインとグレーのラインがある。赤いラインは再生した部分を示し、グレーの部分はダウンロードした部分を示している。 →このグレーの部分は、ダウンロードしている部分だった。
    f:id:Saki-Htr:20210227124307p:plain

  • 濃いグレーの部分は、まだダウンロードが完了していない部分。ダウンロード配信では、全部ダウンロードが完了していないと、視聴することができないので、YouTubeはダウンロード配信ではない。

  • よって、YouTubeやニコニコ動画は、プログレッシブダウンロード配信であることが分かった。
  • プログレッシブダウンロード配信も動画データが一時的に端末へ保存されているので、目に見えづらかっただけで、YouTubeを視聴している時に、一時的にスマホやPCに動画が保存されていることが分かった。

考えたこと

  • このチャプターでは、webで使われている様々なデータ形式について学んだ。学習でさわったことのあるHTMLやCSSについてはすんなり理解できたが、この本で初めて知ったJSON,DOM,マイクロフォーマット,フィードなどは、触ったことがないので、読んでもイメージしづらかった。実際に学習や仕事でさわることになった時に、また読んで理解を深めたい。
  • 自分が使っていたAmazonプライム,Netfrix,YouTubeなどの動画配信サービスの配信方法が何かについて、考えるのが面白かった。

ch5. Webアプリケーションの基本

学んだこと

Webクライアント

  • Webクライアント = Webブラウザのみを指すと勘違いしていたので、調べて整理した。
  • Webクライアントとは
    • Webサーバー（Wepアプリケーション)にリクエストを投げるプログラム。
    • ブラウザ以外でも、http(s)で通信しているものは全Webクライアント。
      1番使われているものはWebブラウザだが、スマホアプリ、WIndowsやMacの専用アプリケーションなど、WebサーバーとやりとりしているものはWebクライアント。
    • つまり、Webブラウザ=Webクライアントでなく、WebブラウザはWebクライアントの(代表的な)一種。

クライアントプログラム

CDN

  • CDNが何か、本の説明だけでは理解できなかったので、調べたことを整理した。

  • インターネットの世界にも現実世界と同じように「距離」の概念がある

  • 自分の使っているwebブラウザと相手のwebサーバーの距離が近ければ、それだけwebページを早く見られる。
  • 世界各地にwebサーバーを設置し、大元のwebサーバーからwebページのファイルをコピーしておく(お互い連携している=1つのネットワーク)
  • これによって、ホームページを見る人は、自分の近くにあるWebサーバからホームページのファイルを受け取れる。
  • このwebサーバーが集まったネットワーク(世界各地に分散されたキャッシュサーバーの集合体)をCDNという！

Ajax

  • 同期通信には、「リクエストを送ってレスポンスがかえってくるまで、クライアントは待つことしかできない」という欠点がある。
  • Ajaxという技術では、JavaScriptがクライアントとして直接webサーバーと通信をする。必要なデータだけやり取りするため、同期通信よりもサーバーへの負担が少なく済む。
  • JavaScriptのおかげで非同期通信が可能。
  • レスポンスを待つ間も、レスポンスに左右されない箇所のHTMLを更新したり、ユーザーからの入力を受け付けられたりするなど、レスポンス待ちの時間を有効活用できる→ページの更新が早くなる。

Googleマップの地図の表示部分で使われている

  • 具体的にAjaxがどのように使われているか疑問に思ったので、調べた。

  • Googleマップ地図をスライドすると、その先の地図が表示される。

  • これは、スライドしている間に足りない地図のデータをAjaxでリクエストしているから、ぬるぬると地図を動かすことができる。
  • 1回目の通信はリクエスト⇔レスポンス(同期処理)で行い、2回目からはAjaxという技術をつかって、JavaScriptに必要なデータ分だけを取ってきてもらう、という流れ。
  • もしAjaxがなければ、スライドする度にページを再読み込みする必要がある。

Web API

  • 本では、
  • ユーザーではなくプログラムが直接サービスを利用できるための窓口
  • アプリケーションがWebサーバーの機能を利用するためのインターフェース(接点)

と説明されていたが、意味が理解できなかったので、実際にWebAPIが使われているサービスを見て調べた。

  • 例えば、connpassというWebサービスを利用してイベントに申し込んだ時に、参加コメントをTwitterに投稿できる機能がある。

f:id:Saki-Htr:20210227132622p:plain

  • これは、コンパスがTwitterが提供している「ツイートする」WebAPIを利用しているため、ユーザーの代わりに事前にTwitterのWebサーバー(が提供してるWebAPI)からデータを取得することで、実現できている。
  • ユーザーはこれのおかげで、わざわざTwitterというWebサービスに自分で接続しなくても、connpassというWebサービス内から参加コメントをツイートすることができる。
    = 本の「ユーザーがWebブラウザから操作しなくても、アプリケーションが直接Webサービスを利用できます」という説明は、このことを言っている。

考えたこと

  • Googleマップを快適に使えているのはAjaxのおかげだったとは知らなかった。地図を移動する度に、ページを再読み込みしていたら非常に使いづらいと思うので、感謝。
  • 新しいことを学んだ時に、イメージが湧かない時は、実際のWebサービスのどの機能に当たるか、どこに使われている技術かを調べることで、理解を深められた。

ch6. Webのセキュリティと認証

学んだこと

  • すべての驚異や脆弱性への対策をするのは難しいので、一般的にはリスクによる損失の度合いを算出し、それに応じて優先順位を決めた上で対策する。

ファイアーウォールはどこに設置するのか

  • ファイアーウォールとは:企業などの内部ネットワークをインターネットを通して侵入してくる不正なアクセスから守るための防火壁。

  • 本の説明で、ファイアーウォールがシステムのどこに設置されているのか分からなかったので、調べた。

  • 外部ネットワークとDMZ、DMZと内部ネットワーク、それぞれの間にファイアウォールが入るような構造を作り、通信を仕分ける。

  • DMZとは
    • 外部ネットワークと社内ネットワークの中間につくられるネットワーク上の区域
    • 外部ネットワークからも内部ネットワークからもファイアウォールなどによって隔離されている。
    • 外部に公開することが前提となるWebサーバは、常にリスクに晒されている。もし、Webサーバーを社内ネットワーク(=内部ねっと)に置くと万が一乗っ取られたり（リモートハッキング）、悪意のあるマルウェアなどを組み込まれたりした場合、社内ネットワークに接続されているその他のサーバやパソコンがすべて被害を受ける可能性がある。
    • 何のためにあるのか？→危険な地域のすぐそばに大切なものを置いておくのは危ないので、何かトラブルが起きても大丈夫なように緩衝地帯を設けて、そこに大切なものを置かないようにするためにある。
    • ファイアウォールはDMZを置かない状態でも設置できるが、Webサーバと外部ネットワークの間に設置されるファイアウォールは広く開放されている状態で、警戒が緩く、外部からの攻撃に対して脆弱な状態。Webサーバが内部ネットワークに置かれていると、乗っ取られたWebサーバを踏み台にして内部ネットワークも簡単に攻撃を受けてしまうので、DMZが必要。

考えたこと

  • 自分が被害を受けたことがないのもあって、セキュリティについて深く考えたことがなかったが、ドコモ口座の不正アクセスなど、かなり身近な問題。
  • これから消費者側ではなくサービスを開発して提供する側を目指すので、きちんと学んでセキュリティ面も考えて開発ができるエンジニアにならねばと思った。
  • 個人情報の漏洩がどれくらいの頻度で起こっているか気になったので調べたら、知らないだけで意外と結構あった。自分の個人情報も気づいてないだけで結構抜かれているのではと怖くなった。

ch7. Webシステムの構築と運用

考えたこと

  • アプリケーション設計は、機能の一覧、アプリケーションの構成図、画面レイアウトなど表面的な部分の設計らしい。
    エンジニアとして就職したら、おそらく全部を自分でやるのでなく、
    • サーバーやセキュリティなどインフラをどうするかはインフラエンジニア
    • 機能の洗い出しなどはRubyを書いたりDB設計をするサーバーサイドエンジニア
    • 画面のデザインはWebデザイナー、マークアップエンジニア、フロントエンドエンジニア

が主に決めたり各々同士が話し合ったりして設計ができるのだろうか。 これら全部を一人でする経験ができる、自作Webアプリ開発のカリキュラムが楽しみだと思った。

この事件はプログラムに問題があったわけではなく、伝達ミスによるもののようだが、気をつけないとこういう事態もあり得るのだな、と教訓になった。

全体の感想

  • この本はTECHPLAY女子部の方と2人で輪読会を行って読み進めた。
    輪読会についての感想は以下にまとめてある。

saki-htr.hatenablog.com

  • 一つ一つの用語を見開き1ページに丁寧に解説をしてくれており、ページの半分は図で解説してくれているので、初心者の私にとってとても読みやすかった。 Webを支える技術で分からない用語があった時に、この本を辞書代わりにして読むと良さそうだと思った。

DB設計で詰まったところ&どうやって理解したか

データベース

フィヨルドブートキャンプで、データベース設計(以下、DB設計)について学ぶプラクティスがあり、先日TwitterのDB設計の課題を合格したので、振り返りを書いた。

学習方法

  • 読んだ書籍
    • 『達人に学ぶDB設計 徹底指南書 初級者で終わりたくないあなたへ』(ミック 著,翔泳社,2012年出版,全360ページ)
    • 『楽々ERDレッスン』(羽生 章洋 著,翔泳社,2006年出版,全240ページ)
  • 課題を解くために必要な部分を読む遅延評価法で学習した。一方の書籍に知りたい内容が載ってない時や疑問が出た時に、もう片方の書籍を読んで補完した。

理解に詰まったところ

1. 主キーは必ず一つのテーブルに一つだけと勘違いしていた

  • 『達人』の主キーの説明で、

主キーは一つのレコードを特定できるカラムの組合せ

と書いてあった。

  • しかし本に載っている、主キーを説明するテーブルには、主キーが一つのパターンしか載っていなかったので、主キーは一つのテーブルにつき一つだけと、勘違いしてしまった。
  • 勘違いしたまま『達人』の正規化の関数従属についての説明を読んだので、「主キーの一部」という言葉が出てきて混乱した。

どうやって理解したか

  • 以下の動画を見て、理解が誤っていたことに気づいた。
    • 主キー(わくわくアカデミー,2013/11/29投稿)
  • この記事の説明も分かりやすかった。

www.momoyama-usagi.com

  • 主キーは、一つのテーブルに一つある場合と複数ある場合がある。具体的には、主キーが何なのかについては、以下の記事に書いた。

saki-htr.hatenablog.com

2. ER図のリレーションシップ「1対0~多」の0とはどういう意味か

  • ER図のリレーションシップで、「1 対 0~多」の関係がある。 この「0」がどういう意味か理解するのが難しかった。

どうやって理解したか

  • テーブル同士の関係性を、現実に存在しているものに例えて考えてみると、分かりやすかった。
    Twitterの、ユーザーとツイートの関係について考える。

  • ユーザーから見た、ツイートとの関係

    • 1人のユーザーは、ツイートを複数回行うことができる。また、ツイートを1回もしないユーザーも存在する。よって、0~多。
  • ツイートから見た、ユーザーとの関係
    • 1つのツイートは、必ずだれか一人のユーザーが作成したものである。よって、1。
  • よって、ユーザー対ツイートの関係は、1対0~多である。

3. 外部キーはどうやって決めるのか

  • 『達人』を読む前に、『楽々ERDレッスン』の演習問題を解いたので、解説を読むと、いつの間にか外部キーができていて、ER図作成が完了しているので、過程がわからず混乱した。

どうやって理解したか

  • 外部キーは、正規化=関数従属を排除して新しいテーブルを作っていく中でできる。
  • 以下の解説動画を視聴して、関数従属を切り出して別にテーブルを作ることで、外部キーができることが分かった。

4. エンティティを抽出した後、どうやって正規化をすればいいのか分からなくなった

  • 『楽々ERDレッスン』の演習問題１を解いているところで、エンティティを抽出して、関連がありそうなカラムをテーブルに入れるところまで行った。

f:id:Saki-Htr:20210225151744p:plain

  • このテーブルの状態から、第3正規形まで正規化するにはどうすればいいか分からなくなった。
  • 自分の作ったテーブルと入れたカラムを見ただけでは、
    • どのカラムが主キーになるのか
    • どのカラムに2つ以上の値が入ってしまいそうか
    • どこに関数従属があるのか

が分からない。

どうやって理解したか

  • 上記の作ったテーブルに、色んなデータを登録してみたら、どこに複数のデータが入ってしまうのか分かりやすくなった。
  • 『達人』に載っていた正規化の説明が、一つのテーブルから始めていたので、作ったテーブル全てを一つのテーブルに入れてみた。

f:id:Saki-Htr:20210225152440p:plain

  • 実際にデータを登録する方法で方向性が間違っていないか、メンターさんにお聞きしたところ、「現場でも、実際にデータを入れてみて"あ！ここにミスある"って気づくことがある」と伺った。

感想

DB設計の手順を理解するのが難しかった

  • 課題を解く時に具体的なDB設計のやり方が分からなかった。
  • 『達人』でDB設計のやり方は、以下の4ステップと説明されていた。
1. エンティティ抽出
2. エンティティ定義
3. 正規化(~第3正規形まで)
4. ER図作成
  • しかし『達人』には、エンティティの抽出・定義の方法について詳しい説明が載っていなかった。
  • 逆に、『楽々ERDレッスン』には、エンティティの抽出方法についての説明はあったが、正規化とER図作成の手順については載っていなかった。
  • なので、具体的な手順を2冊の本を行き来して調べた。

本のどこが重要かの判断が難しかった

  • 私は分からない用語や理解できなかったことを全部日報に書いていた。そうしたら、メンターさんから「細かい言葉の定義はわかってなくていい」とか、「DB設計は仕事でよくやっているけど、「部分関数従属とか推移性関数従属とか意識して設計していない」、などアドバイスをいただいた。

  • 実際にTwitterのDB設計をした時に、「これは推移的関数従属だ」とか、「部分的関数従属だ」とかは意識していなかった。同じカラムが違うテーブルに複数ないようにすることを意識して設計することで完成できた。

  • 結局、自分が作ったテーブルに実際にデータを登録したときに不具合が起きないか&どういう風にデータを扱うかに重きを置くことが大事だと思った。

参考書籍/参考記事

Gitで課題提出するまでの手順をまとめた

Git･GitHub オススメ!

Gitの使い方を忘れてしまっていたので、復習。

用語解説

  • ローカル:自分のPC
  • リポジトリ：履歴に関するデータを保管している場所
  • ローカルリポジトリ:自分のPCにある、履歴データの保管場所
  • リモートリポジトリ:専用のサーバに配置して、複数人でファイルを共有するためのリポジトリ。ここではGitHubのリポジトリを指す。
  • ワークツリー:ファイルを編集する作業場。PCでコード編集していた場合、そこのことを指す。
  • インデックス:コミットするためのファイルを登録しておくためのスペース

Gitはどうやってファイルを管理しているのか?

  • Gitの目的は、変更履歴をたどれるようにすること
  • スナップショット(その時点の状態を、そのまま丸ごと保存したもの)で保存している

コミットするまでの手順

  • git initしてからコミットするまでの手順。

全体の流れ

# Gitに必要なファイルすべてを自動生成する
$ git init

# 変更をステージに追加する
$ git add

# 変更を記録する = コミットする
$ git commit

# ファイルの現在の変更状況を確認する
$ git status

1. git init

  • 実行は、ステージにあげたいディレクトリの直下で行う。
    例:sinatraメモアプリのコードをコミットしたいなら、/rubybook/sinatra_practice/で実行。
  • 何が起きるか?:Gitに必要なファイル(.gitディレクトリ)の全てが、このコマンドを実行したディレクトリの直下に自動生成される。
# /users/<ユーザー名>/rubybook/indexで実行
$ git init
Initialized empty Git repository in /Users/<ユーザー名>/rubybook/index/.git/

#=> 成功

# ls -aでファイルができているか確認
$ ls -a
./          ../         .git/       index.html
#=>.git/ができている

#.git/下に、Gitに必要なファイル全てが入っている
$ ls .git/
HEAD         config       description  hooks/       info/        objects/     refs/

2. git add

  • 何が起きるか?:変更をステージに追加する
# 今いるディレクトリ直下のファイル&ディレクトリ全てをステージに追加する
$ git add.

# ファイルやディレクトリを指定することもできる
$ git add <ファイル名>
$ git add <ディレクトリ名>

そもそもステージは何のためにあるか?

一部の変更だけをコミットしたい時、ワークツリーからステージにコミットしたい部分だけをステージにあげて、コミットするため。

3. git commit

  • 何が起きるか?:変更を記録する = コミットする
    ※git addでは、変更をステージに登録しただけで、まだ記録はされていない
$ git commit
#=>
[master (root-commit) 81fa678] initial commit
 1 file changed, 1 insertion(+)
 create mode 100644 <コミットしたファイル>

# コミットメッセージを一緒に入力する
$ git commit -m "<メッセージ>"
  • これでコミットは完了。

git status でファイルの変更状況を確認

  • git addやgit commitする前に、どのファイルをadd&commitすべきか確認すべき。→git statusでファイルの変更状況を確認する。
  • ワークツリーとステージ間の変更状況、ステージとリポジトリ間の変更状況の、2つの情報を教えてくれる。

ワークツリーとステージ間

  • 前回ステージに追加=git addしてから、ワークツリーのファイルに変更があるかどうか、を教えてくれる。
  • git statusしたときに、Changes not staged for commit:：前回addされてからワークツリーに変更があって、それをまだgit addしてないよ！といっている。

ステージとリポジトリ間

  • 前回コミット=git commitしてから、ステージに新しく追加された=git addされたファイルがあるかどうか、を教えてくれる。
  • git statusしたときにChanges to be committed:：ステージに追加されているけど、まだコミットしてない変更があるよ!といっている。

例

実際にgit statusの結果がどうなっているか見てみる。

1.git commitまでしたファイルを編集して変更を加える

2.その後git statusで確認

$ git status
#=>
On branch master
Changes not staged for commit: #ステージに追加されてない変更があるよ！
  (use "git add <file>..." to update what will be committed)
  (use "git restore <file>..." to discard changes in working directory)
        modified:   index.html #$index.htmlに変更があったよ！
no changes added to commit (use "git add" and/or "git commit -a")


3.git addしてもう一度git statusを確認

$ git add .
$ git status
#=>
On branch master
Changes to be committed: #ステージに追加されているけど、まだコミットしてない変更があるよ!
  (use "git restore --staged <file>..." to unstage)
        modified:   index.html #該当するファイルはindex.html


4.git commit した後、git statusを確認

$ git status
#=>
On branch master
nothing to commit, working tree clean #コミットしてないファイルはありません

GitHubへアップロードする

  • git commitしたら、次にその内容をGitHub(リモートリポジトリ)にアップする。
  • GitHubにアップする理由
    • 自分が書いたコードを他の人に見てもらうため
    • ローカルリポジトリの内容をGitHubに保存しておくため

コミットしてからGitHubへアップするまでの手順

1.GitHub上で、保存したいリモートリポジトリを新規作成する。


2.アップする度に毎回リモートリポジトリのURLを指定するのは大変なので、ショートカットを作成する

$ git remote add origin <リモートリポジトリのURL>

  • これで、originというショートカットでアップできる。

  • 作成したショートカットの一覧確認と削除は以下のコマンドでできる。

# 作成したショートカットの一覧
$ git remote -v

# ショートカットの削除
$ git remote rm <ショートカット>


3.リモートリポジトリ(GitHub)へコミットしたファイルを送信する

git push <リモートリポジトリのショートカット名> <pushしたいローカルブランチ名>

# 例:originというショートカットに、mainブランチをpushする
git push origin main
  • ブランチが何かについては後で説明。

ブランチを作成してmainブランチにプルリクエストを送る

ブランチとは

  • ブランチとは、一つのプロジェクトから分岐させることにより、プロジェクト本体に影響を与えずに開発を行える機能のこと。並行で複数の機能を開発するために使う。
  • メリット:ブランチを作ることで、他の人の変更の影響を受けないですむ。
  • mainブランチ(旧:masterブランチ)はリリース用のブランチとし、開発はトピックごとにブランチを作って進める。 mainブランチで開発してしまうと、リリースしているコードがどれか分からなくなったり、一個前のリリースに戻れなくなってしまう。
    →そのため、ブランチを切って開発し、最終的にリリース用のmainブランチへマージする(コードを取り込む)という流れで開発を進める。

プルリクエストとは

  • プルリクエストとは:自分の変更したコードをリポジトリに取り込んでもらえるように、依頼すること。
  • 課題提出で、「READMEだけmainブランチにpushして、それ以外のファイルを開発用ブランチに保管してプルリクエストを送る」と指定があったのは、最終的には完成したコードをmainブランチに取り込むため。だからmainとは別に開発用のブランチを作る。

手順

1. ブランチを新規作成

# ブランチを新規作成
$ git branch <ブランチ名>

# 作ったブランチの一覧確認
$ git branch

# リモートブランチも表示
git branch -a
  • このコマンドは、作成をするだけで、切り替えはしない！

2. ブランチの切り替え

# 切り替え
$ git checkout <行きたいブランチ名>

# 作成してそのまま切り替えたい
$ git checkout -b <新規作成するブランチ名>

3. プルリクエストを送りたいファイルをgit add & git commit する

  • 作成したブランチに切り替える前に、絶対add&commitしない！

4. GitHubへpushする

$ git push <リモートリポジトリのショートカット名> <pushしたいローカルのブランチ名>

5. GitHub上でプルリクエストを作成する

ここからはターミナルではなく、GitHub上で操作する。

1.リモートリポジトリのPull requestsをクリック

2.New pull requestボタンをクリック

3.baseには取り込み先のブランチ(main)、compareには取り込んでほしい元のブランチを指定。

4.pull requestをクリック タイトルとメッセージを入力してcreateをクリック

(Revieweresでレビュワーを指定できるが、今回はしない)

参考書籍,参考教材

週報 2/15(月)~2/21(日)

2/15(月)~2/21(日)の一週間の学習の振り返りをざっくり。

今週の目標&結果

今週の目標 結果
sinatraメモアプリの合格 ◎ 20(土)に合格
WebアプリからのDB利用の合格 ✕ pgを使ったDB接続は完了
/prepared statementを利用した実装がまだ
Railsの教科書(約100P)を読み終わる ✕ 残り6~8章
DB設計について学んだことをブログに書く ✕
URLについて学んだことをブログに書く ✕

今週の学習時間

プラクティス外の学習・勉強会への参加は含めない。

今週は目標時間をぴったり達成🎊

日付 目標 実際
2/15(月) 2:00 0:00
2/16(火) 2:00 3:00
2/17(水) 2:00 3:15
2/18(木) 6:00 9:30
2/19(金) 6:00 7:00
2/20(土) 6:00 7:15
2/21(日) 6:00 0:00
合計 30:00 30:00

今週やったこと

2/15(月)

やったこと

考えたこと

  • 目標を立てた時しか意識できてないので、忘れないように固定ツイートに貼った!これで忘れない💪

2/16(火)

やったこと

  • Railsの教科書p.1~20(1章の途中)
    • Railsをbundlerでインストール
    • rails new
    • rails sするために色々インストール&設定
  • 6:00-7:30 TeamGeek輪読会(最終回)

考えたこと

  • 1月頭から週3でやっていたTeamGeekの輪読会を読み終わった！読み終わって嬉しいが、終わってしまったのが悲しい。でもプラクティスを進めたいから、読みたい本ができるまでは、しばらく輪読会はお休みかなと思っている🤔
  • Railsの教科書が、とても丁寧で分かりやすい。
  • npm,Node.js,yarn,webpackerが何かわかってないので調べる。

2/17(水)

やったこと

  • rails sできるようにするために色々設定
    • nodeのバージョンを最新版から安定版にする
    • node -vとnodebrew lsの結果を同じにできた
  • rails g controller hello indexがうまくいかず →Webpacker can't find application.js とエラーが出たので解決にあたっていた

考えたこと

  • エラーメッセージを読んでも、そもそもwebpackerを初めて知ったので、何が原因か、どうしたら解決できるか分からなくて大変だった💦
  • 早くrails s ,rails gできるようになって学習を進めたい🥰

2/18(木) 休み

やったこと

  • rails -s できるようにするために設定いろいろ
    • 普段使ってるシェルをfish→bashへ変更
    • Error:homebrew-core is a shallow cloneを解決
    • railsコマンドが一切使えなくなったので解決。bundle installしたら直った
    • Rubyのバージョンを最新版3.0.0にアップデート
    • yarnをインストールしたらrails new,-s,-gできた
  • Railsの教科書:2-3章

考えたこと

  • なんとかrails new,-s,-gが実行できるようになった！
  • rbenvの切り替え方がわからず、ツイートしたところ、フィヨルドの方にアドバイスしていただいて、そもそもrbenvの仕様を理解していなかったことが原因と気づけた。アドバイスいただかなかったら気づけなかったと思うので、本当に感謝。
  • Railsの教科書、自分が実行したコマンドの裏側で何が起こっているか、非常に丁寧に解説してくれていて、Sinatraでやっていたのはこういうことだったのか〜と思いながら読んでいる。
  • コマンド数行でCRUD機能をもったメモが一瞬でできてびっくり仰天した🤯
  • fishシェルでrbenvのエラーが出たため、デフォルトシェルをfishに戻したが、自分がよく使うコマンドやディレクトリの候補を表示してくれたり、自分がいるGitのブランチを表示してくれたり、色々と便利なので、また戻そうか悩んでいる。
  • 30分弱仮眠したら午後も集中できた!睡眠は大事😄

2/19(金) 休み

やったこと

  • Railsの教科書
    • 4章完了
    • 5章途中(あと2pくらい)
  • Sinatraメモアプリのレビューを昼にいただいたので、修正
    • メモを新規作成するcreateメソッドと編集するeditメソッドがほぼ同じなので、createを消して、editのid部分を修正して新規作成時も使い回せるようにする
    • 提出物リンクリポジトリのトップなのでPRへのリンクに変更する。
    • PRページの下にREADME.mdがコンフリクトしていると警告が出ているので解消する→失敗
  • コンフリクトした原因が分からないので、提出時にどんなコマンドを実行したかを整理

考えたこと

  • Sinatraメモアプリ、プログラム自体には修正はほとんど無かったので嬉しかった！しかし、Gitのコンフリクトを修正できず、いろんなコマンドを試しているうちに、誤ってマージしてしまった💦Gitのプルリクエストを使った提出はこれが初めてで、操作に慣れていないので、実行するコマンドがどんな動作を行うのか理解してから実行すること、分からなければメンターさんに質問することを心がける。
  • Bookクラスのメソッド定義のコードはどこのファイルに書いてあるんだろう？と疑問だったが、「諸々の仕組みはRailsのActiveRecordが担ってくれていて、これを理解していこうとするともっと大変になるので、一旦ActiveRecordがとても便利だな、くらいの考えでもRails利用には支障がありません」とメンターさんから伺ったので、次に進む。

2/20(土)

やったこと

  • fishシェルを使いたいのでエラーの原因を調べた→未解決のまま
  • Sinatraが起動しなくなったので解決
    • brew postgresql-upgrade-databaseを実行
    • postgresql12をアンインストール
  • WebアプリからのDB利用
  • 昨日の日報提出

考えたこと

  • 昨日睡眠の質が微妙だったので、午後は集中力がかなり下がってWebアプリのDB利用はあまり進められなかった。今日はきちんと寝る！
  • URLもDBも知らない状態でいきなりrailsに入っていたら全然理解できなかったと思うので、おそろしい...
  • fishシェルが便利すぎて、やっぱりfishでruby,railsを使える方法がないか調べてたら時間がかかりそうだったので、後回し
  • 目の前のエラー解決は自分でできるようになったけど、その解決方法が長い目で見て良いかや、後々にこういう問題が起きてしまうかもということが分からないため、その場しのぎになっていないか不安。。というのもあって解決方法を細かく記録している。

2/21(日)

やったこと

  • 学習せず。

考えたこと

  • 木~土の3日間長時間学習していたので、4連休の最終日は力尽きてしまった...。目標の30時間は達成できたので良しとする。

今週の振り返り

✅ できたこと/できるようになったこと

  • sinatraメモアプリの合格
  • railsを問題なく使えるようになった
  • 今週はRailsがうまく使えなかったり、sinatraが起動しなくなったりと、エラー解決にあたることが多かった。Gitのコンフリクト以外は、全て自力で解決することができた💪

✅ "こうしたらもっと良かった"と思うこと

  • プラクティスを先に進めたいと思ってしまい、ブログでアウトプット等の復習が後回しになってしまっていたので、来週は復習する時間もきちんと確保する。長い目で見て、学んだことはしっかり振り返るべき。

来週の目標

Railsに本格的に入る前に復習に注力する。

  • データベース
    • TwitterのDB設計をどうやって行ったかまとめる
    • 他の受講生の提出物をチェック
    • 自己参照/自己結合の理解
    • 【ブログ】DB設計で学んだこと&詰まった点
  • REST
    • 【ブログ】web技術の基本/webを支える技術の感想
    • 【ブログ】URL設計で学んだこと
  • Git
    • 【ブログ】git init~プルリクエストの手順
  • 【ブログ】TeamGeekを輪読会の感想
  • 28(日)に必ず行う：2月の振り返り&計画の見直し

以下はできれば。

  • Railsの教科書の6~8章(最後)まで
  • book_appをリモートリポジトリのmainブランチにpushする

週報 2/8(月)~14(日)

2/8(月)~14(日)の一週間の学習の振り返りをざっくり。

今週の目標&結果

Sinatraでメモアプリを作る →目標達成✨

今週の目標 結果
メモに自動採番されるidをURLに組み込む。 ○
一覧画面でメモをクリックすると内容が見られるようにする ○
メモを編集できるようにする ○
メモを削除できるようにする ○
コードのクラス化 ○
PRGパターンで実装する ○

 

今週の学習時間

プラクティス外の学習・勉強会への参加は含めない。

日付 目標 実際
8(月) 2:00 0:15
9(火) 2:00 1:45
10(水) 2:00 0:00
11(木) 6:00 7:15
12(金) 2:00 0:00
13(土) 6:00 0:00
14(日) 6:00 10:45
合計 26:00 20:00

 

今週やったこと

✅ 2/8(月)

やったこと

考えたこと

  • 金土日学習をしなかった自己嫌悪にひきずられて更に学習しなくなるのはまずい!と思い、リハビリをかねて出していなかった日報を提出した。

  • あんまり頑張れなかった週の振り返りブログは書きたくなかったが、頑張って書いた。書いたことで自分がなぜ学習できなかったか、どこに問題があったのか原因を明らかにでき、根拠なく落ち込まずにすんだので、よかった。文章を書くと頭と心の整理もできていいなと思った。

  • 漢方を飲むのを怠ったせいで、体調が悪化してしまい金土日はぐったりしていて一切学習できなかった。月曜朝に自己嫌悪に陥ったが、それについてツイートしたらフィヨルドの方々からたくさんふぁぼがきて、きっとみなさんも頑張れない日があって、毎日絶好調なわけではないんだな〜と元気をいただいた。

✅ 2/9(火)

やったこと

  • 6:10-7:10：TeamGeek輪読会
  • Sinatra
    • メソッド化したいコードを考える
    • jsonの中身をハッシュで取り出せたら便利と気づく
    • ①formのname＝titleとcontentに入れられた内容をハッシュに入れる→ハッシュをjsonに変換してmodel/id.jsonに書き込むメソッドを作
    • ②model/ に保管された各メモの情報が入ったjsonファイルからタイトルとメモ内容をハッシュ[キー]で取り出せるメソッドを作る
    • キーワード引数の復習

考えたこと

  • 久々に5時に起きて学習できた！
  • 落ち込んでるときはふさぎ込みがちだけれども、そういう時こそ人と話すことが大事だなと思った。輪読会に感謝。人と意見を交わすのは勉強になるし、自分とは違う考え方を知れてたのしい!
  • ✗「クラス化しなきゃ」→◎「 どんなコードを使い回せたら便利か」という視点で、クラス化・メソッド化を考えると分かりやすいと思った。そういえば、メソッド化についてQ&Aコーナーに投稿した時、「どう呼び出したいかで考えている」って答えてくださった方がいた。
  • 確定申告の処理が始まり、この日は久々に仕事が忙しく、疲れて夜は学習できなかった。結果的に終えられてホッとしている☺️ 仕事をしてない時間は学習に専念したいので、もう少しメンタルを切り替えられるようになりたい...。今回は、体調が悪い期間と被ったので、ダメージがいつもより大きかったと思う。ちゃんと漢方を毎日飲んで健康維持に努めようと思った💪

✅ 2/10(水)

やったこと

  • 学習せず。

考えたこと

  • この日は仕事が忙しいのと体調不良が重なり、学習できず。

✅ 2/11(木)

やったこと

  • Sinatra
    • 機能完成:メモのidをURLに組み込むことができた！
    • README作成
    • XSS対策
  • 6:00-7:00 TeamGeek輪読会

考えたこと

  • 週報ブログ 2/1(月)~2/7(日)で掲げていた今週の目標を達成した！idをurlに組み込んでからは、意外とすんなり実装できた。うれしい！

f:id:Saki-Htr:20210215180613p:plain

  • Bundlerを使ってインストールしたgemは、常にbundle execを冒頭につけて実行しなければいけないことが分かった。
  • 提出のために久々にGitをさわったら、Gitの仕組みやコマンドの意味をすっかり忘れてしまっていたので、明日から復習する！
  • sinatraで変数の中身がどうなってるか知りたい時にpデバッグするのが難しい。。lsコマンドの時はファイルが1つだったので、p 変数で簡単にできたが、sinatraからファイルが複数になって難しくなった。。
  • 今日はメモアプリを提出できる段階までもっていけた!まさか今日ここまで進むとは思わなかった。。タスクの洗い出しは事前にしていたものの、どこで詰まるか分からないため、思わぬところで詰まったり、意外なところが簡単に実装できたりして、学習計画を立てるのが難しかった...。
  • インスタンスメソッドとクラスメソッドの使い分け方が、プラクティスの記事を読んでもよくわからなかった。。しかし、今回の課題でクラス化・メソッド化ができるようになってきて、コードを書くのが楽しくなってきた。練習問題を探して解いてRubyの書き方をもっと身につけたい。

✅ 2/12(金)

  • 学習せず。

✅ 2/13(土)

やったこと

  • 6:00-7:00 TeamGeek輪読会

考えたこと

  • TeamGeek、次の回で読み終わる!週3で読んで約一ヶ月半で読み終わるので、良いペースだと思う。読み終わったら、読んだ感想をブログに書きたい💪

✅ 2/14(日)

やったこと

  • メモアプリ提出のため、gitの復習
  • Sinatraメモアプリの提出
  • 提出したファイルをコピーして、WebアプリからのDB利用を進めた。全部の機能が問題なく使えるところまでDBを使って実装できた。
  • 2/11(木),13(土),14(日)の日報提出

考えたこと

  • JSONファイルを使ったメモデータの管理、実装とても大変だったのに、pgを使ってDBに接続したら簡単にかけて感動した。 ハッシュをJSON形式に変換する必要もないし、自動採番のためにsecurerandomを使っていたが、データ型をserialにするだけで解決できたし、DB便利、すごい...と思った。
  • また、前のプラクティスで学んだデータベースが、アプリを作る時にどのように使われるのかも分かって、嬉しかった。これからRailsプラクティスでもっと複雑な機能を学習できると思うと、不安もあるがワクワクのほうが大きい。
  • 2月が半分終わってしまったが、今月は週報以外のブログを書けていない。DB設計,URL設計で学んだことを忘れないうちに今月中に書きたい。
  • 土曜から体調が良くなってきたので快適に学習できている✨いつも健康でいられるように気をつけたい。
  • 日報提出に思ったより時間がかかってしまい、週報ブログを日曜にかけなかった。  

    今週の振り返り

    👏 できたこと/できるようになったこと

  • Sinatraメモアプリ、必須条件を達成し、提出した
  • Gitを復習して、仕組みや各コマンドが何を行っているかを思い出せた。忘れないように手順やそのコマンドが何を行っているかを詳細にメモしたので、提出物に問題がなければ、ブログに手順をまとめるつもり。
  • まだメモアプリの課題を合格していないが、プラクティス「WebアプリのDB利用」をやった。思ったより時間はかからなかった。最初、Rubyでどういうコードを書けばDBのテーブルにデータを登録したり、抜き出せたりできるのかが分からず、苦戦した。
  • 2月中にkaminariのプラクティスまでいく計画を立てているが、この調子だと達成できそう。課題のレビューを待っている間にRailsプラクティスを進めるつもり。
  • 次の火曜でTeamGeekを読み終わる✨去年の10月から始めた輪読、もう3冊目が読み終わると思うと感慨深い。

🤔 "こうしたらもっと良かった"と思うこと

  • 最近朝起きた時にスマホをさわって、そのままやる気が削がれて学習を始められないことが多いので、なんとかしたい。。寝る前にスマホを別室に置いてスマホをアラームにしないほうがいいかもしれない。今日からやってみる。
  • 今週の目標達成のために今日何をすべきかの意識が、紙の手帳からTodoistアプリに移行してから薄れている。 Todoistだと、完了するとリストから削除されてしまい、やったことが把握できないので、Notionを使ってtodo管理してみようと思う。todoistは全てのtodoの備忘録、Notionは一週間のtodo管理として使ってみる。

来週の目標

  • sinatraメモアプリの合格
  • WebアプリからのDB利用の合格
  • 【レビューを待っている間に進める】Railsの教科書(約100P)を一通り実際に手を動かしながら読む。
  • DB設計について学んだことをブログに書く
  • URLについて学んだことをブログに書く

週報 2/1(月)~2/7(日)

2/1(月)~2/7(日)の一週間の学習の振り返りをざっくり。

今週の目標&結果

今週の目標 結果
Sinatraでメモアプリ作成の機能の完成 機能完成に至らず。
続きは、メモのidをURLに組み込むところから。

今週の学習時間

プラクティス外の学習・勉強会への参加は含めない。

日付 目標 実際
2/1(月) 2:00 4:45
2/2(火) 2:00 2:15
2/3(水) 2:00 2:15
2/4(木) 6:00 7:00
2/5(金) 2:00 0:00
2/6(土) 6:00 0:00
2/7(日) 6:00 0:00
合計 26:00 16:15

今週やったこと

2/1(月)

やったこと

  • メモ作成ごとにJSONファイルを新規作成 を実装
  • 一覧ページに、メモのタイトル名が、作成順に表示される を実装
  • 【Sinatra】<% ～ %>と<%= ～ %>の違いをまとめた

考えたこと

  • Sinatra、なんにもわからん状態から、何がわかれば解決できるかとか、エラーがこの辺で起きてるなーとかがわかってきた！
  • しかしエラーの見方が分からない。右上のメッセージで、ファイルとこの行がおかしいよーと言われてるのは分かったけど、それ以外何を意味してるか分からない。
  • get ~ endの中で定義した変数/インスタンス変数は別のところで使えるのか,,,? 使い回せるようにするためにクラスを作ってその中にインスタンス変数を作るべきってことなのかな。。オブジェクト指向とスコープが分かってない。 コードを書きなれておらず、書くのも読むのも遅いので、超入門の問題を解き直す。

2/2(火)

やったこと

  • 全ページの<h1>メモアプリ</h1>に、一覧に戻るリンクを貼る
  • メモ名と内容が入力されていない時は、登録できないようにする。 自動付番されるメモのidをURLに入れて、メモ一覧のメモ名にリンクを貼る →昨日書いたコードを使いまわしたいと思ったので、明日から、クラス,クラスメソッド,インスタンスメソッドを復習する
  • 復習の手順のタスクを作った。

f:id:Saki-Htr:20210208192358p:plain

プラクティス外

  • 6:00~7:15 TeamGeekの輪読会

考えたこと

  • Rubyの課題では、オブジェクト指向で書かなくてよかったので、超入門やチェリー本で学習したクラスやインスタンスまわりを忘れてしまったので、明日から復習する！実際に書けるようにならないと本当に理解したとは言えないなと思う。
  • ベタ書きだと上から読めばいいので、読みやすい&書きやすいが、Rubyの書き方に慣れていないので、「このメソッドや変数はそこから来たんだろう？」「このコードの戻り値はなんだろう？」と、コードを読み解くのにも時間がとてもかかっているので、Ruby力をつけたい。 Ruby超入門の物理本を買い直したので、問題も解き直す💪

2/3(水)

やったこと

  • Sinatraのメモアプリ:メモに自動採番されるIDをURLに使いたい。 →書いたコードを使いまわしたいと思ったので、コードを書く前にクラスの復習を先にすることにした。
  • クラスについてまとめた自分の日報を読む
  • インスタンスメソッドとクラスメソッドのちがいを思い出す
  • インスタンス変数について思い出す

考えたこと

  • クラス,クラスメソッド,インスタンスメソッド,インスタンス変数,initializeメソッドがどのようなものか思い出せた。久々なので不安だったが、一度理解できていると意外とすんなり理解できる。
  • 日報を書いた過去の自分に感謝。疑問を突き詰めて書いていたので我ながらわかりやすかった。
  • 自動採番されるメモIDをどうやってURLに組み込むにはどんなコードを書くか、イメージできていないので、それも手順を先に書く。頭の中でどう書くかイメージできていないと書くことはできない。
  • 明日は超入門のチャプター8を読んで解く。これを機会に物理本も買った！

2/4(木)

やったこと

  • クラス&ハッシュの復習
    • 超入門のch.8「クラス」を読む&解く
    • 超入門のch.6「ハッシュ」を読む&解く
    • 超入門7-3のキーワード引数を読んで理解
  • Sinatra
    • paramsを理解する
    • Sinatraの変数のスコープを調べる
    • idを各メモのurlに組み込むコードを考える

プラクティス外

  • 6:00-7:15 TeamGeek輪読会
  • Forkwellのイベント:Corporate Engineering​ Study #1 のyoutube動画を半分まで視聴

考えたこと

  • クラス、ハッシュの復習をした。オブジェクト指向で書かれたコードを読めるようになってきた

2/5(金)

  • 学習せず

2/6(土)

  • 学習せず

2/7(日)

  • 学習せず

今週の振り返り

✅ できたこと/できるようになったこと

  • JSONってそもそも何だろう？というところから、使い方や文書の構造が分かるところまで理解できた。Webを支える技術を読んで初めて知ったが、
  • ファイルが複数あるので、書きたい処理をどこに書けばいいかわからなくなったり、get ~ endやform action =に入れるURLに何を入れるかわからなくなったり、自分で作った変数がどこで作ってとんできたものか分からなくなったりと、混乱した。 が、混乱したときは書きたいコードの部分だけ全く別のファイルに書いてSinatra実行したりして、理解を深めた。
  • クラス,ハッシュの復習をした。一見遠回りに見えても復習は大事だと思った。遅かれ早かれオブジェクト指向で書けるようにならなければならないので、今からクラスやメソッドを使いこなせるようになりたいと思い、復習した。

✅ "こうしたらもっと良かった"と思うこと

  • 今週土日は体調が落ち込んでいたのもあり、ベッドから動けず全く学習しなかった。やらなかった時に週報を書くのは嫌だけど、自分を責めるためではなく、振り返るために書いているので、今リハビリのような感覚で週報を書いている。 文字に書きおこすと、なんとなくこうしなくちゃな〜と思って流していたことに対してちゃんと向き合えるので、"思う"だけでなく"行動"に結びつけられていいなと思った。
  • 体調改善のために2ヶ月くらい前から飲み始めた漢方を、最近飲むのをサボりがちだったので、今回また症状がぶり返してしまったのだと思う。反省。回復してくると飲むのを忘れてしまうので、今日からきちんと飲む。Amazonで買い足した！
  • 今週は朝早く目覚めても、スマホをいじってしまって気分が怠くなってしまったり、二度寝してしまうことが多かった。前になにかの記事でスマホにはやる気を奪う作用があるって見た...。気をつけねば。
    朝スマホをいじってしまわないように、目覚まし時計を買ったので、寝る前にタイムロッキングコンテナにスマホを入れてから寝て、朝起きたときに触れないようにして、家を出る直前くらいにロックが解除されるように設定しようと思う。目指せ脱・スマホ依存！

来週の目標

  • Sinatraのメモアプリ
    • メモに自動採番されるidをURLに組み込む。
    • 一覧画面でメモをクリックすると内容が見られるようにする
    • メモを編集できるようにする
    • メモを削除できるようにする
    • コードのクラス化
    • PRGパターンで実装する

ところまでいきたい！

週報 1/25(月)~1/31(日)

1/25(月)~1/31(日)の一週間の学習の振り返りをざっくり。

今週の目標&結果

今週の目標 結果
TwitterのURL設計 ○ 合格
Sinatraのメモアプリ 登録したメモをJSONファイルに保存する所で詰まる

今週の学習時間

プラクティス外の学習・勉強会への参加は含めない。

日付 目標 実際
1/25(月) 2:00 2:45
1/26(火)休み 6:00 8:15
1/27(水) 2:00 0:00
1/28(木) 6:00 2:30
1/29(金) 2:00 0:00
1/30(土) 6:00 5:00
1/31(日) 6:00 2:45
合計 30:00 21:15

今週やったこと

1/25(月)

やったこと

  • URL設計の課題の再提出。気になることも合わせて質問。
  • XSSがなにか、Sinatraで対策するにはどうしたらいいか調べた
  • PRGパターンとは何かを調べた
  • 夜:techplay女子部のもくもく会に参加

考えたこと

  • メモアプリで、メモの保存ボタンや変更ボタンをおしたときに、データの保存とメモの一覧へのページ遷移が必要だと思っていたが、ここでPRGパターンの考え方が重要になってくると知ることができた。

1/26(火)

やったこと

考えたこと

  • モニターを2画面分割にして使ったらさらに快適になった🥰
  • Sinatraたのしい!早くGETメソッド以外も使いこなせるようになって、メモの機能を実装していきたい。

1/27(水)

  • この日は前日遅くまで起きていて、早起きに失敗&仕事後もだるくなってしまい学習しなかった。 やっぱり睡眠は大切。寝る前にスマホを触らない仕組みが必要と思った。

1/28(木)

やったこと

  • 6:00~7:00 TeamGeek輪読会(第11回):4~4.3を読んだ
  • メモの内容を保存するには色んな方法があるが、JSONが良いらしいので、JSONについて調べた

考えたこと

  • 登録したメモの内容をJSONファイルに保存するのが良さそうと思って調べたが、Sinatraにどのように書けばそれができるか分からず...。おそらくJSONファイルのハッシュのキーに、メモのID,タイトル,内容を設け、値に実際に登録したメモ内容を保存すると思うのだが、そもそもJSONの扱い方がよく分かっていない...。 →JSON.parseを調べたら良さそうとメンターさんからアドバイスいただいたので、調べる

1/29(金)

  • 今日は学習せず。JSONファイルに入力内容を保存することができるのか、不安なものあり学習への意欲が下がっている...。タスク洗い出しはしたものの、Sinatraを初めてさわるため、手順が明確にわかっていないため、進捗状況が見えづらいのも不安。

1/30(土)

やったこと

  • 6:00~7:00 TeamGeekの輪読会
  • 8:30~10:00 Hirakata.rbに参加
  • 本:Sinatra入門のじゃんけんアプリを作る
  • RailsGirlsのチュートリアルの投票アプリを作る
    • ハッシュをeachで回すとどうなるか調べる
    • yamlとはなにか/使い方を知る
  • JSONでのメモ保存方法を調べる

考えたこと

  • erbファイルに書くコードがhtmlとRubyが混ざっているので、自分がHTMLを書いてるのかrubyを書いてるのかわからなくなる...
  • たくさんファイルがあるので、「この変数の出どころはどこだろう」と混乱する...
  • なかなかJSONでのメモ保存方法がわからず焦る😓

1/31(日)

やったこと

考えたこと

  • Rubyのハッシュを使ったJSONファイルへの書き込み方がやっと分かったので、これを皮切りに登録したメモごとにハッシュ作成もしくはファイル作成して、IDを自動で付与するコードも書けるようにしたい。

今週の振り返り

✅ できたこと/できるようになったこと

  • TwitterのURL設計を合格した
  • XSSがなにか分かった
  • PRGパターンがなにか分かった
  • Bundlerの使い方を復習した
  • HTMLのformの使い方を復習した
  • formに入力した内容を、ハッシュの値に入れる→JSON形式に変換→JSONファイルに保存するコードは書けた
  • メモのIDを自動採番する方法がわかった
  • 火曜はコワーキングスペースで学習したら長時間学習に集中できた。
  • タスク&時間管理に、Toggl,Todoist,Googleカレンダーを連携して使い始めたが、タスクを整理してtodoistに登録したら、やるべきことが明確になり、後でやろうと思って忘れることを防止できてよかった。 f:id:Saki-Htr:20210131193710p:plain

✅ "こうしたらもっと良かった"と思うこと

  • 参考記事を読んでもやりたいことの実現方法がわからない場合、やりたいことを細分化して言語化したり、図に書いたりして整理すればよかった。先週のLT会
  • Sinatraメモアプリを進める上で、外部モニターがあった方が学習しやすいので、自宅で学習していたが、ベッドがすぐ近くにあることもあり集中力が続かなかったので、コワーキングスペースなど人目がある場所で学習しようと思った。
  • また、意欲が下がってきて学習しない日が続くと、着手するのが更に億劫になったり、再開するときに思い出すのが大変になるなど、かなりのタイムロスになってしまうので、毎日少しずつでもすすめることを心がける。
  • 今週は火曜に有給を取るなど、学習できる時間が多かったはずだが、Sinatraがなかなかうまく行かず学習意欲が下がってきてしまい、あまり長時間は学習できなかった。
  • タスク&時間管理に、Toggl,Todoist,Googleカレンダーを使い始めたが、一週間の目標設定と、それに対しての日々の進捗状況の見える化がうまくできなかったので、
    • タスクの登録はtodoist
    • 勉強会やイベントなど既に決まっている予定はGoogleカレンダー
    • 学習時間はToggl に登録して、
      一週間の目標設定と、そのために具体的に何をやるかはバーチカル手帳に書くことにする。 今週は、Sinatraをいつまでにどの程度すすめるかの目標設定が甘かった。

来週の目標

Sinatraでメモアプリ作成の機能の完成
READMEの作成、XSSの対策、提出するためのGit復習は必須にしないことにする。