2023-07-01

6月の月報

月報

6月の月報

2023年3月の下旬ごろから、HappinessChainというプログラミングスクールに入校して、勉強を続けています。

happiness-chain.com

日報は勉強した日は必ず書いているのですが、他の受講生の方々が月報を書かれているのを見て、私も振り返りも兼ねて月報を書いてみようと思った次第です！

やったこと

先月まで行っていたLinuxの残り
SQL
HTML/CSS
JavaScript

勉強時間

52.7H

感想

過去2ヶ月の中で一番勉強時間が確保できていました(5月までで45Hの累計勉強時間だった)
- それでもだらだらしてしまう時間などを勉強時間に当てることができれば、もっと時間を確保してできたと思います……
- 今の環境から早く抜け出したい気持ちが強いので、勉強時間のさらなる増加を7月はがんばります！
仕事でも使っている内容の勉強がメインでしたが、理解できていなかったんだなと思うことが多く、こうして勉強し直せてよかったです

次の月間目標

JavaScript
- ロードマップの内容をすべて完了する
React
- ロードマップの内容をすべて完了する
TypeScript
データ設計課題
HTML/CSS課題
週の振り返りを行う
- timesチャンネルで行う
  - HappinessChain内のSlackで個人のtimesチャンネルを作成してもらっているので、日報提出は別で、週末にその週の振り返りを行う
    - 振り返りの内容は月報と同じく、その週にやったこと、勉強時間、感想、次週の目標を記載する
- 週ごとに振り返りを行うことで、勉強を進めていくにあたって問題が起きたら速やかな改善を目指す

2023-06-29

『JavaScript Primer』を読みました！

技術書感想

はじめに

『JavaScript Primer』を読んだので、その感想をまとめていきます！

良かったところ

わかりやすい解説

基本的な知識から、少し進んだところまで説明がされていますが、どの解説もわかりやすいです。

ソースコード例が豊富

わかりやすい解説にも絡みますが、解説している文法を使用したコード例の種類が豊富です。
さらにオンラインだと、そのソースコード例についている『実行』のボタンを押すと、実行ができます。
実行後は、webコンソールに入力が可能なので、ここ少し変えてみたらどうなるかな？などを簡単に試せます。
解説を読むだけでなく、ソースコード例を参考にしつつ手を動かせるので、理解を深めることができるのがとても良いなと思いました。

学んだこと

ループと反復処理

基本的なループ(whileやfor)は知っていましたが、配列のsomeメソッドやfilterメソッドはこの本で知りました。

配列のsomeメソッド

マッチする要素があるならtrueを返し、存在しない場合はfalseを返すメソッド。

const colors = [
    { "color": "yellow" },
    { "color": "blue" },
    { "color": "pink" }
]

const isIncludePinkColor = colors.some((obj) => {
    // ccolors配列の中で、colorプロパティにpinkのオブジェクトがあるかどうか。ある場合はtrueを返す
    return obj.color === "pink";
});

// pinkがあるので、出力: true
console.log(isIncludePinkColor);

配列のfilterメソッド

配列の要素を順番にコールバック関数へ渡し、関数がtrueを返した要素だけで、新たに配列を返すメソッド。

const array = [1, 2, 3];

// filterメソッドの引数は要素、インデックス、配列
const newArray = array.filter((currentValue, index, array) => {
    // 奇数の場合trueのため奇数要素のみの配列が作成される
    return currentValue % 2 === 1;
});

console.log(newArray);  // 出力: [1, 3]

オブジェクト

オブジェクトとオブジェクトに対する様々な操作について学びました。

オブジェクトはプロパティの集合です。
プロパティとは名前(key)と値(value)が組みになったもののことです。

// キーは文字列またはSymbol、値は任意のデータを指定可能
const obj1 = {
    "key1": "value1",
    "key2": "value2"
};

const obj2 = {
    key1: "value1",
    key2: "value2"
};

プロパティの追加

プロパティを追加します。

// 空のオブジェクト
const obj = {};

// key1プロパティを追加して"値"を代入
obj.key1 = "ドット記法で追加";
console.log(obj.key1); // 出力: ドット記法で追加

obj["key2"] = "ブラケット記法で追加"
console.log(obj["key2"]);　// 出力: ブラケット記法で追加

プロパティの削除

プロパティを削除します。

const obj = { key1: 'ドット記法で追加', key2: 'ブラケット記法で追加' }

// key1プロパティを削除
delete obj.key1;

console.log(obj); // 出力: { key2: 'ブラケット記法で追加' }

プロパティの存在確認

指定したプロパティが存在するかを確認します。

const obj = {};

// 存在しないプロパティに対してアクセスした場合`undefined`を返す
console.log(obj.key1); // 出力: undefined

obj.key1 = "値";

// in演算子で存在確認
if ("key1" in obj) {
    // key1プロパティを持っているならtrueを返す
    console.log("key1プロパティが存在する");
}

// Object.hasOwn静的メソッドで存在確認 ※ES2022で導入されたメソッド
Object.hasOwn(obj, "key2"); // 出力: false(objはkey2プロパティを持たないため)

// Optional chaining演算子で損z内確認(?.)
console.log(obj?.key1); // objのkey1プロパティは存在するので、その値である`値`が出力
console.log(obj?.key2); // objのkey2プロパティは存在しないので`undefined`が出力

オブジェクトのマージ

Object.assignメソッドでオブジェクトを別のオブジェクトに代入できます。空のオブジェクトに代入することで、オブジェクトを複製もできます。

const objA = { key1: "value1" };
const objB = { key2: "value2" };
const merged = Object.assign({}, objA, objB);
console.log(merged); // 出力:  { key1: 'value1', key2: 'value2' }

HTTP通信

Fetch APIを使用したHTTP通信の方法を学びました。
Fetch APIはHTTP通信を行ってリソース取得するためのAPIで、このAPIを使用することで、ページ全体を再読み込みすることなく指定したURLからデータを取得できます。

fetch(url)
    .then(response => {
        console.log(response); // 出力: 指定したURLから返ってきた、内容を表示
        console.log(response.status); // 出力: 指定したURLから返ってきたstatusを表示
    });

エラーハンドリング

fetch(url)
    .then(response => {
        console.log(response.status);
    }).catch(error => {
        console.error(error); // ハンドリングしたエラーを表示
    });

難しかったこと

第二部: 応用編(ユースケース)のTodoアプリ作成

一通り読みながらTodoアプリ作成をしましたが、難しかったです……、、、
すべて理解できているわけではないので、何度か読み返して、理解をしていきたいと思います。

まとめ

内容が盛り沢山で学んだことをすべてまとめようとすると、量が多かったので一部をまとめてみました。
javascriptで困ったときは、該当箇所を読み返して、理解を深めていきたいと思います。

2023-06-24

既存のRuby on Railsプロジェクトの実行環境をDockerで構築する方法

技術まとめ

既存のRuby on Railsプロジェクトの実行環境をDockerで構築する方法をまとめます。

環境構成

version
- Ruby: 3.0.2
- Node.js: 16.15
- Yarn: 1.22.19
DB
- PostgreSql: 12

1. Dockerfileの作成

まず、Dockerイメージ作成のためのDockerfileを作成します。
プロジェクトフォルダ直下にDockerfileを作成し、記述を行います。
今回、マルチステージビルドを使用して、イメージサイズを抑えるようにします。

FROM node:16.15-stretch as node
FROM ruby:3.0.2

# yarnとnodeのインストール
ENV YARN_VERSION 1.22.19
RUN mkdir -p /opt
COPY --from=node /opt/yarn-v$YARN_VERSION /opt/yarn
COPY --from=node /usr/local/bin/node /usr/local/bin/
COPY --from=node /usr/local/lib/node_modules/ /usr/local/lib/node_modules/
RUN ln -s /opt/yarn/bin/yarn /usr/local/bin/yarn \
    && ln -s /opt/yarn/bin/yarn /usr/local/bin/yarnpkg \
    && ln -s /usr/local/bin/node /usr/local/bin/nodejs \
    && ln -s /usr/local/lib/node_modules/npm/bin/npm-cli.js /usr/local/bin/npm \
    && ln -s /usr/local/lib/node_modules/npm/bin/npm-cli.js /usr/local/bin/npx

# 必要なパッケージのインストール
RUN apt-get update -qq && apt-get install -y \
    build-essential \
    libpq-dev \
    postgresql-client

WORKDIR /myapp

# yarnの更新
COPY package.json yarn.lock /myapp/
RUN yarn install

# Gemのインストール
COPY Gemfile Gemfile.lock /myapp/
RUN bundle install

# カレントディレクトリの内容を/myappに全てコピーする
COPY . /myapp/

2. docker-compose.ymlの作成

今回、DBにはPostgreSQLを用いるので、複数のコンテナを動かす必要があります。
複数のコンテナを一括で作成・起動をするためdocker-compose.ymlを作成します。
docker-compose.ymlはDockerfileと同階層に作成をします。

version: '3'

volumes:
  db-data:

services:
  web:
    build: .
    command: bundle exec rails s -p 3000 -b '0.0.0.0'
    ports:
        - '3000:3000'
    environment:
      - 'DATABASE_PASSWORD=postgres'
    volumes:
        - '.:/myapp'
    tty: true
    stdin_open: true
    depends_on:
      - db
    links:
      - db
  db:
    image: postgres:12
    volumes:
      - 'db-data:/var/lib/postgresql/data'
    environment:
      - 'POSTGRES_USER=postgres'
      - 'POSTGRES_PASSWORD=postgres'

3. Gemfileとconfig/database.ymlの修正

プロジェクト内のGemfileとconfig/database.ymlを修正します。

GemfileにはPostgreSQLの接続用gemを追加します。

gem 'pg'

また、PostgreSqlを使用するための設定をconfig/database.ymlに追加します。

default: &default
  adapter: postgresql
  encoding: unicode
  host: db
  user: postgres
  port: 5432
  password: <%= ENV.fetch("DATABASE_PASSWORD") %>
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  timeout: 5000

4. イメージの作成

以下のコマンドを実行して、イメージを作成します。

$ docker-compose build

5. DBの作成・マイグレーション

以下のコマンドを実行して、DBを作成し、マイグレーションを実行します。

$ docker-compose run --rm web rails db:create db:migrate

5. 実行環境の起動

以下のコマンドを実行し、コンテナを起動します。

$ docker-compose up

コンテナを起動した後、http://localhost:3000に接続するとRailsプロジェクトの画面が表示されます。

以上で、Ruby on Railsプロジェクトの実行環境の構築が完了です。

参考

Multi-stage build でNode.jsのインストールをちょっぴり効率化する

2023-06-09

『達人に学ぶDB設計』を読みました！

技術書感想

はじめに

『達人に学ぶDB設計』を読んだので、その感想をまとめていきます！

達人に学ぶDB設計徹底指南書

作者:ミック
翔泳社

Amazon

良かったところ

タイトルの通りDB設計について深く知ることができる

正規化、ER図などなんとなく理解して作成したり行っていたことを、具体的な例を交えて解説してくれていたので、理解が深まりました。

わかりやすい

DB設計の本で難しいだろうな……と構えていたんですが、文章が読みやすく、難しいところは少しありましたが、概ね説明がわかりやすかったです。

学んだこと

正規化

第1正規形から、第5正規形まで解説されています。
正規化については、他の本でも説明がある場合が多いですが、じっくりと解説されていてこういうことだったのかと改めて学ぶことができました。
各正規形の定義を明確にし、その正規化を行うべき理由、行わない場合はどんな問題があるのか、などが解説されています。

各正規形の定義

本では、第3正規形までは原則として行うとしているので、その定義をまとめます。

正規形	定義
第1正規形	一つのセルの中には一つの値しか含まない
第2正規形	テーブル内で部分関数従属を解消し、完全関数従属のみのテーブルとする
第3正規形	推移的関数従属の解消

従属

部分関数従属

主キーの一部の列に対して従属する列がある

完全関数従属

主キーを構成するすべての列に従属性がある

推移的関数従属

テーブル内部に存在する段階的な従属関係

非正規化とパフォーマンス

正規化と検索SQLのパフォーマンスは強いトレードオフの関係にあります。厳しく正規化をすればパフォーマンスが悪化し、パフォーマンスを良くするために非正規化すればデータの不整合が生じやすくなります。

論理設計のバッドノウハウとグレーノウハウ

論理設計のバッドノウハウ

論理設計でやってはいけないことです。

非スカラ値
- 値に配列型を利用すること
ダブルミーニング
- 列が途中で値の意味が変わること
単一参照テーブル
- 一つのテーブルにすべてをまとめる
テーブル分割
不適切なキーを用いる
ダブルマスタ
- 同じ役割を果たすはずのマスタテーブルが2つ存在する

論理設計のグレーノウハウ

節度ある利用をするのであれば有効に作用するものの、利点と欠点のバランスを身長に考える必要があるノウハウのことです。

代理キー
- 主キーが決められない場合などの代替手段
列持ちテーブル
- 配列型は使えないけれど、配列を表現したい場合
アドホック(場当たり的)な集計キー
多段ビュー

難しかったこと

第9章

第9章は、一歩進んだ論理設計でSQLで木構造を扱う、という内容でした。
隣接リストモデル、入れ子集合モデルなどが解説されているのですが、いまいちSQLと結びつけるのが難しく……
一通り読んだものの、内容は半分も理解できていないので、繰り返し読み直して理解したいところです。

まとめ

DB設計に関する本ははじめて読んだのですが、実際に設計を行う際に参考になりそうなことばかりでした。
更に読み込んで、設計どんどん活かしていきたいです。

2023-06-07

『スッキリわかるSQL入門』を読みました！

技術書感想

はじめに

『スッキリわかるSQL入門』を数年前にも読んだのですが、機会があって再度読み直したので、感想をまとめたいと思います！

スッキリわかるSQL入門第3版ドリル256問付き！スッキリわかるシリーズ

作者:中山清喬,飯田理恵子
インプレス

Amazon

良かったところ

文章が読みやすい

スッキリシリーズは、Javaも読んだことがあるんですが、それと同じく読みやすいです！固くない文章で、読んでいてすっと頭に入ってきます。

基本的なことが抑えられる

業務でSQLはよく使っています。そのとき使っている構文は一通り網羅されているなという印象です。

学んだこと

再度の読み返しなので、ほとんど知っている内容が多かったのですが、それでもこういう構文があったのか！など特に学んだと感じた箇所をまとめます。

集合演算子

INTERSECT演算子で積集合を取得できます。
積集合とは、2つのSELECT分に共通する行を集めた集合のことです。

SELECT カラムA FROM テーブルA
INTERSECT
SELECT カラムA FROM テーブルB

上記のSQL分を実行すると、テーブルAとテーブルBの両方にあるカラムAを取得することができます。

集合演算子は他にも和集合(UNION)や差集合(EXCEPT)があります。

ANY / ALL 演算子

比較対象を複数の値とを比較したい時に用いる演算子です。

ANY

値リスト(値1, 値2, 値3 ...)のそれぞれと値を比較して、いずれかが真なら真となります。

比較対象 基本比較演算子 ANY (値1, 値2, 値3 ...)

ALL

値リスト(値1, 値2, 値3 ...)のそれぞれと値を比較して、すべてが真なら真となります。

比較対象 基本比較演算子 ALL (値1, 値2, 値3 ...)

インデックス設定の効果が高い列リスト

読み返している時にちょうど、インデックス設定をする列を検討していたので、参考になりました。

WHERE句に頻繁に登場する列
ORDER BY句に頻繁に登場する列
JOINの結合条件に頻繁に登場する列

まとめ

知っている内容が多い読み返しでしたが、知識の復習や前に読んだ時は理解し足りなかったところを補強できたので良かったです。

2023-05-02

vimの基本操作まとめ

技術まとめ

vimを使う機会があったので、基本的な操作をまとめていきたいと思います。

vimとは

vimとはテキストエディタの一種です。

vimの各モード

vimには3つのモードがあります。

モード	内容
Normal Mode	メニュー操作を行うためのモード
Insert Mode	文字入力を行うためのモード
Visual Mode	閲覧するためのモード

vimを起動する

指定したファイルをvimで起動します。

$ vim <ファイル名>

vimでファイルを編集して保存する

vimでテキストファイルを編集して保存する基本的な流れは下記となります。
[]はキーボードの入力です。

vim <ファイル名>のコマンドでファイルをvimで起動する
- 起動した直後は「Normal Mode」となっています
[i]を押下する
- 「Insert Mode」になります
ファイルの編集ができるようになるので、自由に編集をする
[esc]を押下する
- 「Normal Mode」になります
:wqのコマンドでファイルを保存して、閉じる

基本的なコマンド・入力

注釈がないものは、「Normal Mode」で入力する前提です。

保存

コマンド	内容
:w	上書き保存
:wq	保存して終了
:q	保存しないで終了

削除

入力	内容
[x]	入力した時点の1文字を削除する
[dd]	入力した時点の行を削除する
[2 dd]	入力した時点の行から2行分を削除する。数値の部分は削除したい行数を入力する
[dw]	入力した時点の単語を削除
[u]	前の入力を取り消す
[Control + r]	前の入力取り消しを取り消す

コピー

入力	内容
[yy]	入力した時点の行をコピーする
[2] yy	入力した時点の行から2行分をコピーする。数値の部分はコピーしたい行数を入力する
[p]	入力した時点の行の下にペーストをする
[P]	入力した時点の行にペーストをする

まとめ

vimの基本操作についてまとめてみました。
他にも検索や、入力だけでカーソルを移動したりとかもできるのですが、すぐに覚え切れないのでまずは編集の際に自分がよく使う操作を書き留めて、覚えていきたいと思います！

2023-04-13

Web技術の用語まとめ

技術まとめ

はじめに

Web技術の用語についてまとめていきます。

プロトコル

あらかじめ決められた手順や規定を意味します。例えばHTTP(WebブラウザとWebサーバー間のデータ転送プロトコル)や、TLS(暗号化送受信のプロトコル)やSMTP(メール送受信のプロトコル)などがあります。

HTTP

WebブラウザとWebサーバーがHTMLをやり取りすることによって、Webページを見ることができます。このような、ブラウザとサーバーがHTMLを受け渡しするときの規定をHTTPと言います。

リクエスト

リクエストはサーバーに対して、情報を渡したり、このような情報がほしいと伝えたりすることです。

レスポンス

リクエストの内容に応じて、サーバーが返すものです。例えば、このWebページを表示してください、というリクエストを行った場合、サーバーからはページ表示のためデータのレスポンスがあります。

ステートレス

「ステート」とは「状態情報」を意味します。前回のリクエスト結果や、メール送信の際のメールの送信元や送信先の情報などが「状態情報」にあたります。ステートレスはこの「状態情報」を保存しないことを示します。

例えば、HTTPはステートレスなプロトコルの一つです。リクエストに対し、Webサーバーはレスポンスを返します。このとき、同じクライアントからリクエストを2回送ったとしても、「状態情報」を保存していないため、2回目のリクエストは1回目のリクエストに何の関係のないものとして扱われます。

ステートフル

ステートフルは「状態情報」を保存することを示します。例えば、Webサイトにログインした場合、ログイン情報を保存することで、ログインをしていなければ閲覧できないWebサイトを閲覧し続けることができます。この「ログイン情報を保存する」ということが「状態情報を保存する」にあたります。

クッキー(Cookie)

ステートレスなHTTPで状態情報を保持するための技術です。 Cookieを用いることで、WebサーバーとWebブラウザ間で情報の交換ができるようになり、状態情報を扱えるようになります。

ポート番号

TCP/IP通信によって情報を受け取るプログラムは、「待ち受けポート」を決めて、情報を待ちます。通信を受信したコンピューター内で、どのプログラムにデータを渡すかを、「待ち受けポート」に従って識別をします。この、「待ち受けポート」となる番号を、ポート番号といいます。