勉強ログ
今まで、そしてこれから勉強することを日記のようにつけてあとから振り返れるようしたかったので作りました。
その日の終わりに毎日更新しようと思います、と書いたけど読んだものなどは逐一ここに書いていこうと思いました。
2020年8月から12月
まず去年の段階でゲーム用ツールを開発した際に勉強したことのまとめ。
HTML&CSS
- 高校での情報の授業
(なんとなく<html>こんなタグで囲ってダサいホームページを作ったなあという遠い記憶...CSSなんてもちろん何ソレ) - Progate HTML&CSSコース
- サルワカ Webデザイン入門
- SVGの埋め込み方等行き詰ったときは都度Qiitaや技術ブログに何度も助けられました
JavaScript
- Progate JavaScriptコース
- のぴさんのGitHub上のソースコード(これをもともと使っててもっとこんな機能があればいいのに、というのが出発点だった)
- DOM操作の仕方はググったり等
jQuery(JavaScript用ライブラリ)
Progate jQueryコース 初級編(上記のソースコードを読めるだけの最低限の知識をつけた)
まだjQueryのDXは「すごい!!」と歓声があがるようなものでしょうか。
とてもいい記事だと思いました、1個目のツールでは何もわからずjQueryを使ってましたが2個目では意識して純粋なJavaScript(ジョークでVanilla JSとも言うようですね)だけで書きました。
GitHub
2021年9/1~9/22
今回新しくWebサービスを開発しようと思い立っての勉強を実際に開始したのがたしか9月に入ってからで、それからこつこつ勉強してきて今日(9/23)あとから振り返れるようにこのスクラップに日記的にまとめようと思い立ったんですが、その間の記録も覚えてる限りここに記します。
影響を受けた人たちのこと
catnoseさん
Webメディアにとって、デザインは重要な要素だ。しかし、デザインを設計するときには、「おしゃれさ」を優先してユーザービリティを損なうことがないように気をつけなければならない。ユーザーからすると「おしゃれに見えるかどうか」よりも「快適に過ごせること」の方が重要なのだ。
とても本質的なことが書かれていると思う。
勝又健太さん
YouTubeのvideoIDが不正です
mizchiさん
実は以前(おそらく2個目のツールを作っていた時)出会っていた
再会(失礼)
mizchi教、入信
YouTubeのvideoIDが不正です
「フロンドエンドってのは、結構何がベストプラクティスかっていうのがずーっと試行錯誤されてきたんですけど、Next.jsにある程度結実したと僕は思ってて...」
読んだ記事
Ruby/Rails
JavaScript
React/Next.js
Fullstack Next.js/Blitz/Prisma
サービス構成
調べもの
パラダイム
その他
読んだ書籍

イラスト図解式 この一冊で全部わかるWeb技術の基本

イラスト図解式 この一冊で全部わかるWeb技術の基本
YouTube
YouTubeのvideoIDが不正です YouTubeのvideoIDが不正です
Progate
2021/09/23
書きながら思ったけどスクラップの順番を後からでも入れ替える機能が欲しい。
進捗
読んだもの
和田アキ子が何年か前に流行った「当時の今風」の四つ打ロックを歌っているっていうそれだけなのに新しさを感じてしまった、それほど歌手としての和田アキ子が世代としてピンとこないってことだと思う、MVで登場してほしかった
2021/9/24
進捗
Progate Ruby on Rails 学習コースVIII 10. ユーザー名を表示しよう
覚えた単語
| 単語 | 別の言語での言い方など | 意味 |
|---|---|---|
| evaluate | 評価する | |
| REPL | Read-Eval-Print Loop | プログラミング言語の実行環境の一つで、利用者が入力欄にキーボードなどから式や文を一行入力すると、即座に解釈・実行して結果を返し、再び入力可能になるもの。インタプリタの一種。 |
| console | もともとパイプオルガンの演奏台(鍵盤・ペダル・ストップなどの部分)の意味 | |
| parse | 構文解析する | |
| token | しるし、象徴 | |
| 識別子 | ID, identifier | 様々な対象から特定の一つを識別、同定するのに用いられる名前や符号、数字などのこと |
| mutate | 変化する | |
| リテラル | literal | コンピュータプログラムのソースコードなどの中に、特定のデータ型の値を直に記載したもの。また、そのように値をコードに書き入れるために定められている書式。 |
| 正規表現 | regular expression, RegExp | ある特定のパターンを持つ文字列を指定する表記法の一つ。文字列の検索や置換、抽出などを行う際の対象の指定などのために用いられる。 |
| construct | 構築する | |
| primitive | 原始的な | |
| npm | Node Package Manager | JavaScript 系のパッケージを管理するツール |
読んだ記事
いいねにハートマークが使われるようになったのはいつ頃なんだろう
2021/9/25
進捗
Progate Ruby on Rails VIII 11.「アクション側で共通の変数を定義しよう」~15.「ユーザーの編集を制限しよう(アクション)」
覚えた単語
| 単語 | 別の言語での言い方など | 意味 |
|---|---|---|
| yield | 他のものに取って代わられる | |
| エンドポイント | end point | ソフトウェアの分野では、あるプログラムがAPIなどの形で外部に公開している機能の所在を示す識別名やネットワーク上のアドレス、URL/URIなどのことをエンドポイントということがある。 |
| エッジ | edge | 一般には「ふち」や「端」、「刃物の刃」などの意味。IoTの分野では、端末と端末側のネットワークで収集したデータを回線に送り出すポイント(ネットワークの端末)を「エッジ」という。例えば、エッジコンピューティングでは、センサや測定器が採取したデータをエッジ(データを送り出すポイント)に配置したコンピュータで解析。遠隔地には必要なデータだけを送信することで、ネットワークの負担を軽減することができる。 |
| 斜陽 | 西に傾いた太陽 |
インプット
2021/9/26
進捗
気づいたら1個目に作ったツールを公開してからちょうど1年経ってたのでGitとGitHubとVSCodeに慣れるのも兼ねていっちょ脱jQuery化でもするか、と思って取り掛かってたけど土台無理ゲーなことに気づいた。
3時間くらいぽちぽちやってたけど$(jQueryで書かれている場所の証)でソースコードを検索したら200を超えてて流石に人力では非生産的すぎる、と思い諦めました...
Udemy初めて登録したけどいろんな講座があるんだなあ、おもしろそう
覚えた単語
| 単語 | 意味 | 別の言い方など |
|---|---|---|
| concatenate | 連結させる | |
| omit | 除く、省略する | |
| recursive | 再帰的な | |
| repository | 貯蔵庫、倉庫 | |
| push ⇔ pull | ||
| modify | 修正する、変更する | |
| MOOC | Massive Open Online Course | インターネット上で誰もが無料で受講できる大規模な開かれた講義のこと |
| hook | 留め金、鉤、釣り針 | |
| フォールバック | fallback | 通常使用する方式や系統が正常に機能しなくなったときに、機能や性能を制限したり別の方式や系統に切り替えるなどして、限定的ながら使用可能な状態を維持すること |
| オーバーヘッド | 本来の処理に加えて、余分にかかる負荷のこと | |
| デプロイ | 開発したソフトウェアを実際の運用環境に配置・展開して実用に供すること | |
| OGP | Open Graph Protocol | Webページの情報を検索エンジンなどのプログラムが読み込めるようにするためにHTMLに付加する記述方式 |
インプット
気が遠いけどがんばろう
「プルリクエストは、Git自身の機能ではなくGitHubが最初に提供した機能です。」
2021/9/27
進捗
結局1個発見した明らかなバグとデフォルトでミュートがオンになってるんだけど、それをオフにしたときの音がうるさすぎるからそれだけ修正してこの1年前に作ったプログラムの修正というささやかなプロジェクトは幕を閉じましたzzz
インプット

関白宣言みたい()
2021/9/28
進捗
Arrow Functionで問題ない場合はArrow Functionで書き、そうでない場合はfunctionキーワードを使うことを推奨します。
覚えた単語
| 単語 | 別の言い方 | 意味 |
|---|---|---|
| コールバック関数 | コンピュータプログラム中で、ある関数などを呼び出す際に引数などとして引き渡される別の関数のこと。呼び出し側の用意した関数などを、呼び出し先のコードが「呼び出し返す」(callback)ように登録する | |
| メソッド | オブジェクトのプロパティである関数 |
2021/9/29
進捗
覚えた単語
インプット
9/30
進捗
10/4
昨日までいろいろと別の作業してその余韻にとらわれてたりへこんだりしていたが今日から心機一転がんばる。
進捗
やっと作業ディレクトリを作った!
That's one small step for a man, one giant leap for mankind.
インプット
10/9
10/27(Wed)
10/29
11/1
進捗
11/4
進捗
input
11/7
input
aタグの中にインタラクティブコンテンツを入れてはいけない
11/15
進捗
11/15
進捗
input
11/16
進捗
Node.jsインストールした!
input
誤解されることが多いのですが、Node.jsはWebサーバでもなければRailsやDjangoのようなWebフレームワークでもありません。JavaScript実行環境です。
条件式 ? Trueのとき処理する式 : Falseのとき処理する式;
11/17
コンポーネントツリーとは props が流れ落ちる滝なのだと想像すると、各コンポーネントの state とは任意の場所で合流してくる追加の水源であり、それらもまた下に流れ落ちていくものなのです。
11/20
進捗
「JavaScriptはすべてがオブジェクトである」と言われることがあります。 プリミティブ型はオブジェクトではありませんが、プリミティブ型に対応したラッパーオブジェクトが用意されています(nullとundefinedを除く)。 そのため、「すべてがオブジェクトのように見える」というのが正しい認識となるでしょう。
11/24
進捗
create-react-appした!!
11/29
進捗
11/30
12/01
英語読むの頭のエネルギー使う
under the hood 機械の中
12/02
12/3
12/4
ここに日記風に書いていくのはやはりどうしても想定されたスクラップの使い方としてもそぐわなくて使いにくいのでTwitterに移行します。
