はじめに
こんにちは。
2026年もうそろそろで、4月終わりますね。
4月終われば、もう今年も3分の1が終わるんですよ...あっと言う間ですねぇ
実は人間の記憶は儚いものです。勉強したこと・学んだこと、すぐに忘れちゃいます。
（でもストーリー仕立てな出来事は忘れづらいようです。だからこそ挫折や失敗で落ち込んだ経験てその人の魅力になるんだなぁと思ったり）
ご存じの方も多めだと思います。実は効果的な復習方法があって、ドイツのエビングハウスさんが提唱した理論で「24時間以内・3日後・1週間後・1か月後」というシンプルな復習サイクルを取り入れるだけで、学習の効率は大きく変わるようです。（エビングハウスの忘却曲線）
ということで、これから1か月の復習がてら、月ごとに学んだことをブログにてアウトプットしていこうと思っています。目指す形は
未来の自分のモチベに繋がるかつ、他のエンジニアさんのモチベにも繋がるブログです。
ご覧いただければ幸いです。コメントなどくれると大変幸いです。
まずは1か月間でやったことを大きく振り返ります。
26年1月の1か月で行ったこと（学習したこと）は以下内容です。
・HTML/CSS/JS/Grid などクライアントサイド言語の読解,コーディング学習
・使用ツール慣れのため使用ツールの便利機能を深堀
・purePHP、Laravelにてそれぞれ学習サイト見て模倣しながら簡易的Webアプリ開発
（タスク管理ツール/名前管理アプリ）
・基本的なファイル操作などのLinuxコマンド/alisanコマンド/gitコマンド学習
・Divtoolsの使い方を把握
全体を通してこれからの学習のための基盤を整えた1か月だと思います。
VSCodeの拡張機能やSlack、エクスプローラー、Chromeの使い方を改めて調べて便利機能は積極的に吸収・学習できたと思います。
（タググループとか便利です。）
ちなみに個人的には以下サイトで紹介されているVSCode拡張機能はかなり学習効率あがると思うので良ければ見てみてください。
参考：https://qiita.com/KNR109/items/5f933df1292564e6dc70
また、私が言語学習の際に用いた学習サイトは無料のCBCというサイトです。
若干、言語のバージョン古かったり、Dockerなどではなくxampp用いているので注意が必要です。ただ手順通りの作業で成果物を作れる点は魅力かと思います。
参考：https://cbc-study.com/
次に1か月を通して分かったことをまとめます。
1か月で学べたこと、分かったことは大きくまとめると以下内容です。
・クライアントサイド言語について
HTML/CSSは読めるようになったと思う。ただ、希望の構成に自身ではまだ書けない。
特にCSSの配置関連、flex系プロパティに対して想定通りの挙動にならないことが複数回あり、若干苦手意識がある。
また、HTMLのタグやCSSプロパティ用いてUX向上、SEO対策も出来ることは理解できたが、そこまで十分に考慮されたフロントエンドはまだまだ勉強中。
Grid調べながらだと使えるようになった。視認性が高く便利なツールと把握
ただ、お手本を模倣するような操作しかしていないので、これからElementパネル見ながらオリジナルフロントエンドをGrid用いてつくる経験が必要だと感じています。
・Linuxコマンドについて
代表的なコマンドは網羅的に把握できたが、ノールックでまだ書けない。
またGitBushにて便利なカットキーがあることは把握したがそれらを用いた操作もまだ慣れていない。
・PHPに関して
セッション変数の概要は理解できたが、まだ使用は出来ていない。UXの向上に繋がると思うのでこれも取り入れた学習を手隙の際に行いたい。
加えて、出力関数echo prin print_r などの切り分けが瞬時に出来ない。
・その他使用ツールに関して
この期間で特に、Slack、エクスプローラー、VSCode、chromeの使用についてはそれなりに慣れたと思う。日常的にカットキー使いながら操作が出来る状態。
サクラエディタ、Notion、A5などはまだ慣れるため意識的に使う必要があると感じた。
全ツール併せて使えそうな頻出カットキーを合計194個Notion用いてまとめ、それとなく把握。
個人的にはこの１か月「思ったよりも出来るようになったこと多かったな」という印象です。
恐らくですがこの1か月を通して、まだまだだなと感じたところ（意図したフロントエンドの作成やLinuxコマンドなど）は慣れていないだけで時間費やせば解決できそうな気がしています。
中でも使用場面が現場では多くなっていくので、Linuxコマンドが特に優先順位的には高めな気がしています。近いうちに学習サイトや日常操作通じて慣れていこうと思います。
（おすすめサイトなどあれば是非教えてください！）
また私が高頻度で使うと判断したカットキーはNotion用いて整理しました。
全部で194個で、該当ツールはchrome、VSCode、エクスプローラー、A5、Exel、GitBushなどです。レスポンシブデザイン対応で使いやすいと思うのでリンク共有します。
皆様の学習の一助になれば幸いです。
リンク：https://coconut-citrine-5f6.notion.site/301bc5c1d9b88093af3adbabc08717da
あと、以下のHTMLのタグとCSSプロパティは慣れていないので早いところ吸収したいです。
今年中にはSEO、UX意識したフロントエンドを書けるようになりたいと思います
慣れたいHTMLタグ19選
【ヘッダー】
1.<meta>
文字コード・ページ説明・OGP情報などをブラウザや検索エンジンに伝えるタグ。ページには表示されない。
例）<meta charset="UTF-8">
2.<script>
JavaScriptを読み込む・直接記述するタグ。</body>直前 または defer属性をつけるのが定石。
例）<script src="main.js" defer></script>
3.<hr>：水平線（区切り線）。セクションの視覚的な区切りに使う。
4.<blockquote>
引用文を示す。ブラウザはデフォルトでインデント表示する。
5.<address>
連絡先情報（住所・メール・SNSなど）をマークアップする。
6.<noscript>
JSが無効な環境にだけ表示されるフォールバックコンテンツを書く。
【フォント】
7.<sub>
下付き文字。化学式（H₂O）や数式などで使う。
8.<sup>
上付き文字。累乗（x²）や脚注番号などに使う。
9.<em>
意味的な強調。ブラウザはイタリック表示。読み上げでも変化する。
10.<strong>
より強い強調。デフォルト太字。<b>と違い意味的な重要性を持つ。
11.<code>
コード・コマンドをインラインで示す。等幅フォントで表示される。
【リスト】
12.<ol>
番号付きリスト。手順・ランキングなど順序に意味があるときに使う。
<ol><li>ステップ1</li></ol>
13.<dl>
定義リスト。用語と説明のペアを列挙するときに使う。
<dl><dt>用語</dt><dd>説明</dd></dl>
14.<dt>
<dl>の中で「用語（term）」を表すタグ。
15.<dd>
<dt>に対応する「説明（description）」を記述するタグ。
【フォーラム】
16.<input>
テキスト・チェックボックスなど様々な入力欄。type属性で挙動が変わる。
<input type="text" name="username">
17.<select>
ドロップダウンの選択欄。中に<option>を並べて選択肢を作る。
<select name="pref">...</select>
18.<option>
<select>の選択肢を定義する。value属性で送信値を指定する。
<option value="kyoto">京都</option>
19.<textarea>
複数行のテキスト入力欄。rows/cols属性でサイズを指定できる。
<textarea rows="4" name="message"></textarea>
慣れたいCSSプロパティ9選
【ボックスモデル】
1.box-sizing
widthにpaddingやborderを含めるか決める。border-boxが実務の標準。
box-sizing: border-box;
2.border
枠線の太さ・スタイル・色をまとめて指定。
border: 1px solid #e5e5e5;
【レイアウト】
3.display
要素の表示形式を決める。flex(超重要)・grid・block・none が特に重要。
4.flexbox 系
justify-content(横配置)・align-items(縦配置)・gap(間隔指定) の3つを最優先で覚える。(超重要)
5.position
要素の配置方法を指定。relative・absolute・fixed・sticky が頻出。
position: absolute; top: 0; right: 0;
6.overflow
はみ出したコンテンツの扱い。hidden でクリッピング、scroll でスクロールバー。
overflow: hidden;
【テキスト】
7.text-align
テキストの水平方向の揃え方を指定。left・center・right・justify。
8.text-decoration
下線・打ち消し線など。リンクのアンダーライン消しでよく使う。
text-decoration: none;
【見た目・その他】
9.transition
プロパティ変化にアニメーションをつける。ホバーエフェクトに必須。
transition: all 0.2s ease;
1月は年始の月なので、2027年1月見返した際に
「え？めっちゃ1年で成長してるじゃん俺」てなるよう引き続き学習頑張ります。
以上が私の1か月の学習振り返りです。
閲覧頂きありがとうございました。
それではまた。