JavaScript Primerを読んでみて

はじめに

JavaScriptという言語について、その言語仕様を理解を深めたくて学習しました。
筆者は基礎的なことやNode.jsについては他の書籍でも学習していたりするので、それなりに予備知識はありました。
そんな私が読んでみた感想、ということになるので、前提として理解いただければと思います。

ご紹介する書籍

以下のリンクから全て無料で閲覧できます。
後述しますが、このボリューム・質を無料で学習できるのはすごすぎます。
一応、書籍版も有料で販売されているのですが、Web版の方がコードをその場で実行できたり、何かと便利なので、Web版の方がおすすめです。
jsprimer.net
(著者に還元するためにも、出世したら有料版書籍を購入することを誓います...。)

本書の長所

導入&解説が丁寧

これまでいくつか入門書的なものは(他の言語や技術を含め)それなりに見てきましたが、本書が一番丁寧だと思います。
シンプルに説明が上手いというのもありますが、初心者が読み進めていく上で疑問に思いそうなところを先回りして例示してくれたりするところが親切ですね。

詳細な仕様にまで言及

表面的な基礎だけでなく、かなり深い裏側の仕様にまで踏み込んで解説しています。
例えばオブジェクトが呼び出すことのできるプロパティやメソッドは、継承元のオブジェクトに定義されているものも呼び出すことができます。
これがprototypeチェーンという仕組みによって実現されていることにまで丁寧に解説されています。

具体的な利用シーンの紹介

ただただJavaScriptの仕様を説明するだけでなく、それらの利用シーンも紹介してくれます。
例えば関数の定義は、function宣言、function式、Arrow Function式などがありますが、どういった時に使い分けるのが良いか、というところにまで踏み込んで解説してくれます。

Web上で例示コードを実行可能

随所に例示コードがあるのですが、これらのコードはWeb上でRunボタンクリックで実行できます。
さらに、そのコードは自分の手で一時的に編集することもでき、気になった変更を加えて実行結果を確認する、といったことまでWeb上で完結しちゃいます。

戸惑ったこと

正直、解説が非常に丁寧かつ手を動かしながら進めていったので、ほぼなかったです。
が、1点だけ。
最後のTodoAppを作成する内容があったのですが、そのコードの中でJS Docが始めて出てきました。
しかし、JS Docについてだけはなぜか説明なしでした。
@paramなど、「なんだコレは!?」と初心者なら思っちゃうだろうなと思います。
ここは少しだけ解説があっても良いんじゃないかと思いました。

ただ、上記のことが不自然だと思ってしまうくらい、その他についての解説が非常に丁寧ですので、まず安心して学習していけます。

まとめ

「基礎はできてるし、流し読みでいけるだろう」と高を括っていたのですが、かなり深い内容まで紹介されていたので、がっつり読み込んじゃいました。
TypeScriptが流行ってきていますし、私自身も学習していたのですが、TypeScriptでつまづくのはJavaScriptの理解が浅いことが原因、という話はよく聞きます。
この機会に、より深くJavaScriptを理解できたことはとてもよかったです。

Happiness Chain Euforia - 1ヶ月目の振り返り

はじめに

エンジニアとして開発業務に取り組みたく、今年2024年の2月下旬に入会しました。
学生時代に独学でツール作成したり、もともとIT企業に勤めていたこともあり、全くの初心者ではないのですが、スキルアップを目的としています。 本格的に学習を開始したのは3月頭からなので、ちょうど1ヶ月になります。

振り返りの概要

基本的にはロードマップにしたがって学習を進めており、もともと知っていた領域についても飛ばさずに学習をしていました。 また、業務で使用したり資格取得を必要なために急を要する領域(具体的にはJS/TS)については、他と並行して学習をしていました。

今月の学習時間

124.5 時間

学習内容

良かった点

一言で表すと「知っている知識を頭の中で整理できたこと」です。

Vim, Linux, Gitについては、系統的に学習することで、頭の中で散らばっていた知識が整理されていきました。
これらは独学や会社でフワッと触れていたのですが、他の目的達成(例えば環境構築)のために触るくらいで、その場しのぎ感が否めませんでした。
しっかりと理解した今、これらが基礎としていかに重要であり便利なものなのか、その偉大さに感服しております。

JavaScript, TypeScriptについては、独学でかなりガッツリ触れていたので、教材は流し読みでいけるかなと思ったのですが、こちらも自分の知らないトピックが結構出てきて、非常に学びがいがありました。
また、これらの課題を通し、初めてPR作成してコードレビューいただくという経験ができたこともとても良かったです。

改善点

「毎日継続して学習すること」ですね。

1日でも間を空けてしまうと、学習を再開した時、思い出すための時間が多くかかってしまいます。
これがけっこうな時間ロスだなと感じます。
これを防ぐためには、毎日学習を継続することで、常に頭に学習内容が残っている状態を維持することかな、と思ってます。

daily_goalチャンネルという、日々の目標を宣言する場所も用意されているので、上手く活用することで日々の学習をコントロールしていきたいですね。

次月の目標

HTML/CSSやDocker、Reactなどの学習を完了させたいと思っています。
再来月にはバックエンド側の学習を始められたらいいな〜、と淡い期待を抱いています。
(フロントの方が苦手で時間がかかりそうなので、ホントに淡い期待ですが...)

まとめ

想定していたよりも学習内容のレベルが高く、全て完走し切れば確かな実力が着くのだろうなということが感じられました。
継続していくことが何より重要だと思うので、引き続き学習を進めていきたいと思います。

Linux 基礎コマンド

はじめに

  • 想定読者: Linux初心者で、コマンドはちょっと知ってる
  • 記号や書式の意味

紹介コマンド

以下のコマンドについて紹介します。

  • cd
  • pwd
  • ls
  • mkdir
  • rmdir
  • cat
  • less
  • tail
  • touch
  • rm
  • mv
  • cp
  • ln
  • find
  • chmod
  • chown
  • ps
  • kill

cd

chage directoryの略で、カレントディレクトリから移動するのに使用します。

cd <目的のディレクトリパス>

pwd

print working directoryの略で、カレントディレクトリを表示してくれます。

pwd

ls

listの略で、カレントディレクトリのファイルやディレクトリなどを一覧にして表示してくれます。
また、引数にパスを与えると、そのパスのファイルやディレクトリを表示してくれます。

ls [表示したいパス]

隠しファイルまで表示したい時は、aオプションを使用します。

ls -a [表示したいパス]

各ファイルを詳細まで表示したい時は、lオプションを使用します。

ls -l [表示したいパス]

mkdir

make directoryの略で、ディレクトリを作成します。

mkdir <作成するディレクトリ名>

rmdir

remove directoryの略で、空のディレクトリを削除します。
注意ですが、ディレクトリが空でない場合は削除できません。

rmdir <空のディレクトリ名>

cat

concatenateの略で、対象のファイルの中身を表示します。
複数ファイルを引数にとることも可能で、その場合は引数の順に内容を並べて表示します。

cat <表示したいファイル名1> <表示したいファイル名2> ...

less

こちらもファイルの中身を表示するコマンドですが、catとは違い、専用の画面で内容を表示できます。
ファイルの中身が多い時にはこちらの方が便利です。

less <ファイル名>

tail

こちらもファイルの中身を表示しますが、tailは最終行から10行だけを表示します。
ファイルは複数指定することも可能です。

tail <ファイル名1> <ファイル名2> ...

また、行数を変更したい場合は、nオプションを使用します。

tail -n <行数> <ファイル名> <ファイル名2> ...

touch

新規の空ファイルを作成します。
もし既存のファイルが存在する場合は、タイムスタンプを更新します。

touch <ファイル名>

rm

removeの略で、ファイルを削除します。
ただし、この削除はゴミ箱に移すわけではなく、完全に削除されますので気をつけます。

rm <ファイル名1> <ファイル名2> ...

また、ファイルではなくフォルダを削除することもできます。
ただし、フォルダの中身も全て削除されます。

rm -r <フォルダ名>

mv

moveの略で、ファイルやディレクトリを移動させたり、名称を変更できます。

mv <移動元ファイル(ディレクトリ)> <移動先ファイル(ディレクトリ)>

注意が必要なのは、移動先の名称が存在しなかった場合、移動元ファイル(ディレクトリ)は移動するのではなく、名称が移動先でした内容に変更されます。
また、移動先が存在した場合でも、移動元と移動先がどちらもファイルの場合は、移動先が移動元で上書きされる、という処理になります。
ここは注意が必要ですが、上書きしそうな場合は確認してくれるiもあります。

cp

copyの略で、ファイルやディレクトリをコピーします。

cp <コピー元ファイル名> <コピー先ファイル名> # コピー先ファイル名でコピー
cp <コピー元ファイル名> <コピー先ディレクトリ名> # コピー先ディレクトリ名にコピー
cp -r <コピー元ディレクトリ名> <コピー先ディレクトリ名> # コピー元ディレクトリをコピー先へまるごとコピー

こちらもmvと同じ注意点として、同一名が存在するときは内容が上書きされるので、iオプションで実行前に確認を表示できます。

ln

linkの略で、既存ファイルのハードリンクまたはシンボリックリンクを作成します。

ln <ファイル名> <リンク名> # ハードリンク
ln -s <ファイル名> <リンク名> # シンボリックリンク

find

ディレクトリ内を条件指定して検索するコマンドです。
使い方の詳細を深ぼると非常に長くなるので、以下でよく使う条件を例にして記載しています。
こちらを実行すると、「検索ディレクトリ内に存在する、検索ファイル名を持つファイルを検索し、その結果を出力する」という意味になります。

find <検索ディレクトリ> -name <検索ファイル名> -print

chmod

change modeの略で、ファイルやディレクトリの権限設定を行います。
記述方法は以下の2通りあります。

chmod <モード> <対象のファイル(ディレクトリ)> #方法1
chmod <8進数表記のモード> <対象のファイル(ディレクトリ)> #方法2  

方法1の場合は、モードの部分に対象者、権限の設定方法、権限の種類を記述します。

  • 対象者: u(所有ユーザ)、g(所有グループ)、o(その他ユーザ)、a(全ユーザ)
  • 権限の設定方法: +(追加)、-(削除)、=(設定)
  • 権限の種類: r(読取)、w(書込)、x(実行)

例えば、所有グループに書き込み権限を追加したい場合は、chmod g+w <対象ファイル>のように実行します。 複数の対象者、複数の権限を同時に設定することもでき、次のようになります。

chmod u-r,o+w <対象ファイル> # ユーザから読取権限を削除、その他グループに書込権限を追加
chmod go+x <対象ファイル> #グループおよびその他グループに書込権限を追加
chmod u=rw,go=r <対象ファイル> #ユーザに読み書き権限を追加して実行権限を削除、グループおよびその他グループに読取権限を追加して書込実行権限を削除

方法2の場合は少し難しく、全ての対象者に対する権限を8進数3桁で表記して指定します。
3桁の内訳は、左からユーザ、グループ、その他グループです。
それぞれの桁の値は、rを4点、wを2点、xを1点として、その権限を持つなら加点します。
言葉だけだと分かりにくいので、同じ内容を示す方法1の表記と比べてみます。

chmod u=rw,go=r <対象ファイル> #方法1
chmod 644 <対象ファイル> #方法2

上記の場合、ユーザはrw権限を持つので4+2=6、グループおよびその他グループはr権限のみなので4、よって644となるわけです。

chown

change ownerの略で、ファイルやディレクトリの所有者を変更します。
注意として、管理者権限で実行する必要があります。

chown <所有者名> <ファイル名(ディレクトリ名)> #所有ユーザを変更
chown :<所有グループ名> <ファイル名(ディレクトリ名)> #所有グループを変更

ps

process statusの略で、実行中のプロセス一覧を表示します。

ps

kill

実行中のプロセスやジョブを終了させます。

kill <プロセスID> #プロセスを終了
kill %<ジョブID> #ジョブを終了

また、何らかの原因で終了させられないため、強制終了させたい時があります。
そんなときは、コマンドのあとに強制終了のシグナルを記載して実行します。
次のコマンドはどちらも同じ意味です。

kill -SIGKILL <プロセスID>
kill -9 <プロセスID>

おわりに

過去になんとなくその場を乗り切るために使ってきたLinuxコマンドたちですが、改めて系統的に学習すると頭の中で整理されてスッキリしました。

Vimの基本操作

はじめに

  • 対象読者: Vim初心者、これからVimを触る人
  • 説明内容: 筆者が個人的に覚えておいた方が良いと思ったものを抜粋

Vimのコマンドはかなり多いので、もし他のコマンドを知りたい場合はググってみてください。

カーソル移動

Vimではカーソルを移動させるのに、十字キー以外が使えます。
そして、慣れてしまえば十字キーよりも早く正確に動かせます。

移動方向 対応コマンド
h
j
k
l

余談ですが、Macでは日本語入力モードでz + 上記アルファベットのどれかを入力すると、Vimにおいてそのアルファベットに対応する矢印文字(←/↓/↑/→)が入力できます。

モードの切替

Vimには以下のモードが存在します。

モード モードの内容 他のモードからの切替方法
ノーマルモード h Esc
文字入力モード j iなど
文字選択モード k v

ファイル操作

コマンド 操作内容
:w ファイルを保存する
:w + ファイル名 開いているファイルをファイル名で保存する
:q ファイルを閉じる
:q! ファイルを強制的に閉じる(変更は破棄される)
:wq ファイルを保存して閉じる
:! + コマンド Vimを開いたまま、外部コマンドを実行する
:r ファイル名 ファイル名の中身を挿入する

文字操作

コマンド 操作内容
i カーソル位置で文字入力モードに切り替える
a カーソル位置から1文字進めて文字入力モードに切り替える
A カーソル位置の行末から文字入力モードに切り替える
o カーソル位置の下に1行追加してから文字入力モードに切り替える
O カーソル位置の上に1行追加してから文字入力モードに切り替える
x カーソル後の文字を1文字消す(Vimレジスタに格納する)
y 選択範囲をコピーする(Vimレジスタに格納する)
p Vimレジスタに格納された文字列を、カーソルの1文字先に貼り付ける
r カーソルの1文字先を入力した文字で置き換える
R カーソル位置からEscを入力するまで文字入力し、置き換える
cw カーソル位置の1単語を削除し、文字入力モードに切り替える
cc カーソル位置の行を削除し、文字入力モードに切り替える
dw カーソル位置の1単語削除する
d$ カーソル位置から行末まで削除する
dd カーソル位置の行を削除する(Vimレジスタに格納する)
u 直前操作の取り消し
U 行全体の取り消し
Ctrl + R 取り消しの取り消し

dなどのコマンドは、コマンド実行回数 + コマンド + モーション回数 + モーションというように構成されており、上記のdw中のwはモーションになります。
よって、d2wなどと入力すれば、カーソル位置の 2 単語削除する、という操作になります。

カーソル移動

コマンド 操作内容
h, j, k, l カーソルの位置を1文字分動かす
0 行の先頭に移動する
gg ファイルの先頭行に移動する
G ファイルの最終行に移動する
数字 + G ファイルの数字行に移動する
Ctrl + g 現在のファイル内の行数を表示する
Ctrl + o 前のカーソル位置に戻る
Ctrl + i Ctrl + oで戻ったカーソル移動を進める

検索

コマンド 操作内容
/ + 文字列 ファイル内を文字列で検索する(ファイル内を前から)
? + 文字列 ファイル内を文字列で検索する(ファイル内を後ろから)
n 次に検索がヒットした場所へ移動する
N 前に検索がヒットした場所へ移動する
% 対になる(), {}, []に移動する

まとめ

Vimのコマンドはものすごく多いので、一部だけ抜粋しました。
また、操作方法が独特なので、自分自身に刷り込ませるためにも、継続的に触れていく必要があるなと痛感しております。

Web技術の用語

はじめに

Web技術で頻出する用語について解説します。
本記事では以下の項目を扱います。

  • ステートフル
  • ステートレス
  • リクエス
  • レスポンス
  • クッキー
  • プロトコル
  • ポート番号

また、想定読者は「超初心者で用語のイメージを掴みたい」という方になります。
ちなみに、以下では「クライアント」という用語が説明なしに出てきますが、よくわからない方は「Webサイトに訪問したユーザが使用しているブラウザ」と解釈していただいて構いません。
それではいきましょう。

ステートフル - stateful

一言で表すなら「状態を保持している」という意味になります。
イメージとしては、ECサイトなどでカートに入れた商品が保持されている状況です。
カートに入れた商品が、別のページに行ったり来たりしている間に消えたりすることはないですよね?
それはまさに、「商品をカートに入れた状態」が「保持されている」からです。
これがステートフルです。

ステートレス - stateless

では、その対義語になりそうなステートレスとは何か?
それは「状態を保持しない」です。そのまんまですね。
前回の状態を保持しないので、毎回毎回、情報をハッキリ定義しないといけません。
さっきのECサイトの例を出すと、もしカード情報がステートレスに処理されているとすると、カート内商品の情報が毎回リセットされる、といったことになります。
これでは不便極まりないですが、ステートレスが悪いわけではありません。
用途が違うのです。
ステートレスとは、「無用な状態を保持しない」ということでもあるので、状態を保持する必要のない時に有用です。 例えば、ECサイトのトップ画面は誰が見ても同じですので、トップ画面上の情報だけをやり取りすれば済みます。(※ここではログイン前後で変化する内容は無い、と仮定させてください)
この時、ステートフルだといちいち状態に関する情報までやり取りするので、情報量が無駄に増えてしまいます。
これをカットしてスッキリしたやり取りを実現するのが、ステートレスです。

リクエスト - request

その名の通り、「要求」になります。
よく使われるのは、サーバーに対してクライアント側から要求する時に使われます。
リクエストには、何に対してなのか、どんなことをするのか、といった要求に関する情報が含まれています。

レスポンス - response

リクエストの対義語で、「返答」になります。
こちらもリクエストの逆で、クライアントに対してサーバー側から返答する時によく使われます。
レスポンスには、リクエストに対する返答内容が含まれていますが、そもそも上手くリクエストを処理できたのかといった、エラーに関する情報も含まれています。

Webの世界におけるクッキーとは、サーバー側が作成し、クライアントで保存される小さなファイルを指します。
このファイルがあることで、サーバー側が「あ、このクライアントはログインしているな」といった判別ができるのです。
次項目の内容を先取りしますが、Webサイトなどで使用される通信はHTTP(もしくはHTTPS)という規約(プロトコル)に従って行われているのですが、これらはステートレスなプロトコルになります。
なので、そのままだとステートフルな機能を実現できません。
なぜならサーバー側がクライアントを識別できないからですね。
サーバーがどのクライアントかを識別するために、クライアント側にクッキーというファイルを持たせているのです。

プロトコル - protocol

前項目で出てきましたが、「通信の規約(取り決め)」を意味します。
これだけでは意味がわかりづらいかもしれないので、荷物(郵便物)を発送する時に例えてみます。

もしあなたの荷物が、定形郵便物に該当し、郵便局から送る場合を考えてみます。
その時の決まりは、封筒に入れ、宛名と住所を書き、84円切手を貼って送りますよね?
これが定形郵便物を発送する時の「プロトコル(取り決め)」になります。

さらに、その荷物がただ送付先のポストに投函されるだけでなく、本人にちゃんと受け取って欲しいのであれば、書留料金を追加で支払うことになるでしょう。
これは定形郵便物を書留郵便で発送する時の「プロトコル」になります。

これと同様なことがWebの世界にもあります。
メールを送る時、ファイルをやり取りする時、など様々な用途ごとにプロトコルが存在しています。
先述のHTTPやHTTPSプロトコルの一種で、Webサイトを閲覧する時に主に使用されます。

ポート番号 - port number

最後はポート番号です。
これは通信を行う際の機器の接続口を示す番号、になります。
クライアントからサーバーに接続する時、サーバーが1台だったとしても、接続口は複数存在します。
その番号は先述のプロトコルごとに決まっています。
例えば、HTTPでは80番、HTTPSでは443番、といった具合です。
これらを決めてあげることで、通信を受けとった機器は、どういった通信を行うのかが分別でき、適切に処理することができます。

まとめ

上記項目について、私の理解の範囲内で説明しました。いずれもWeb界隈では当然のように出てきますので、「Apple」と聞いたら「りんご」と脳内で自動変換されるよう、理解しておきたいものです。もしご指摘等ございましたら、ぜひコメントで教えていただけると勉強になります。

AWS SAA-C03に合格しました

はじめに

勉強前の私のレベルです。

使用教材と合格までの道のり

以下を使用しました。

  1. 書籍: 徹底攻略 AWS認定 ソリューションアーキテクト – アソシエイト教科書
  2. Udemy講座: 【SAA-C03版】これだけでOK! AWS 認定ソリューションアーキテクト – アソシエイト試験突破講座

1.の書籍は試験だけでなく、AWSの外観を掴むのに役立ちました。読むのにかかった時間は30hくらいですかね。同じサービスでも、違う観点で再登場し説明してくれますので、分量の割にサクサク読めました。

2.のUdemy講座は、1.よりも詳細なのですが、何よりハンズオン形式で実際にAWSに触れるので、 知識としてだけでなくイメージが湧くようになります。ただ、量が多いです...。動画再生だけでも50h弱あるのですが、内容が細かいので停止して読み込んだり、ハンズオンの部分でも操作中は停止したり...。トータルでどのくらいかかったか把握できておりませんが、100h以上はかけたんじゃないかな、と思ってます。

試験問題の対策は、1.に1回分、2.の最後に3回分の模擬試験が付いてますので、「解く」<->「間違いを見直す」を繰り返しました。これだけで何とか1発合格できました。

おわりに

新しいことを勉強すると、自己肯定感を高めてくれます。その中でも、資格取得というのは「合格」というわかりやすい結果を与えてくれるので、より強い効果があります。

ただ、「資格」は所詮「資格」でしかないです。「何ができるのか?」「どんな価値を生み出せるのか?」という目線を失ってしまっては意味がありません。資格の取得が目的化してしまわないよう注意しながら、これからも新しい勉強を楽しんでいきたいですね。