Open30

勉強ログ

こにおこにお

今まで、そしてこれから勉強することを日記のようにつけてあとから振り返れるようしたかったので作りました。
その日の終わりに毎日更新しようと思います、と書いたけど読んだものなどは逐一ここに書いていこうと思いました。

こにおこにお

2020年8月から12月

まず去年の段階でゲーム用ツールを開発した際に勉強したことのまとめ。

HTML&CSS

  • 高校での情報の授業
    (なんとなく<html>こんなタグで囲ってダサいホームページを作ったなあという遠い記憶...CSSなんてもちろん何ソレ)
  • Progate HTML&CSSコース
  • サルワカ Webデザイン入門
  • SVGの埋め込み方等行き詰ったときは都度Qiitaや技術ブログに何度も助けられました

JavaScript

jQuery(JavaScript用ライブラリ)

Progate jQueryコース 初級編(上記のソースコードを読めるだけの最低限の知識をつけた)
https://note.com/rdlabo/n/ndfe07e0c0bcb

まだjQueryのDXは「すごい!!」と歓声があがるようなものでしょうか。

とてもいい記事だと思いました、1個目のツールでは何もわからずjQueryを使ってましたが2個目では意識して純粋なJavaScript(ジョークでVanilla JSとも言うようですね)だけで書きました。

GitHub

こにおこにお

2021年9/1~9/22

今回新しくWebサービスを開発しようと思い立っての勉強を実際に開始したのがたしか9月に入ってからで、それからこつこつ勉強してきて今日(9/23)あとから振り返れるようにこのスクラップに日記的にまとめようと思い立ったんですが、その間の記録も覚えてる限りここに記します。

影響を受けた人たちのこと

catnoseさん

https://saruwakakun.com
https://note.com/catnose/n/n0246ada32871

Webメディアにとって、デザインは重要な要素だ。しかし、デザインを設計するときには、「おしゃれさ」を優先してユーザービリティを損なうことがないように気をつけなければならない。ユーザーからすると「おしゃれに見えるかどうか」よりも「快適に過ごせること」の方が重要なのだ。

とても本質的なことが書かれていると思う。

勝又健太さん

https://www.amazon.co.jp/dp/4408339334/ref=cm_sw_r_tw_dp_JF6ZXX9Z77W6GPQ0MA5M
YouTubeのvideoIDが不正ですhttps://www.youtube.com/channel/UC_HLK-ksslL-Z_2wiIZDlMg

mizchiさん

実は以前(おそらく2個目のツールを作っていた時)出会っていた

https://zenn.dev/mizchi/articles/3789a101dae388d98159

再会(失礼)

https://zenn.dev/mizchi/articles/d33a4174cca886

mizchi教、入信

YouTubeのvideoIDが不正ですhttps://youtu.be/JUz_QUu8Mus?t=884

「フロンドエンドってのは、結構何がベストプラクティスかっていうのがずーっと試行錯誤されてきたんですけど、Next.jsにある程度結実したと僕は思ってて...」

読んだ記事

Ruby/Rails

https://blog.unasuke.com/2020/i-have-to-learn-those-things-in-the-future/
https://qiita.com/klriutsa/items/86ac5e94ec99c0d95b61
https://zenn.dev/kenzan100/articles/0f9b100655a4bf
https://qiita.com/nazomikan/items/eab3352dbd5e2b79724b

JavaScript

https://min.togetter.com/Hqz7ufB
https://zenn.dev/mizchi/articles/3789a101dae388d98159

React/Next.js

https://qiita.com/Yuki_Oshima/items/5c0dfd8f7af8fb76af8f
https://qiita.com/jagaapple/items/faf125e28f8c2860269c

Fullstack Next.js/Blitz/Prisma

https://zenn.dev/mizchi/articles/cbe81299e145491676f8
https://zenn.dev/mizchi/articles/b53f539ade1f42
https://zenn.dev/katsumanarisawa/articles/918dae1a8248ac

サービス構成

https://zenn.dev/catnose99/articles/zenn-dev-stack

調べもの

https://teratail.com/questions/258497

パラダイム

https://qiita.com/Yametaro/items/3c27305072464e1d6230
https://qiita.com/mizchi/items/4d25bc26def1719d52e6
https://zenn.dev/mizchi/books/0c55c230f5cc754c38b9

その他

https://gendai.ismedia.jp/articles/-/87382
https://gendai.ismedia.jp/articles/-/87384

読んだ書籍


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


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

YouTube

https://youtu.be/DTpGfpLybr0
YouTubeのvideoIDが不正ですhttps://youtu.be/JUz_QUu8Mus?t=884
https://youtu.be/Z42VGdlYkcE
YouTubeのvideoIDが不正ですhttps://www.youtube.com/channel/UC_HLK-ksslL-Z_2wiIZDlMg

Progate

https://prog-8.com/lessons/html/dojo/1
https://prog-8.com/courses/ruby
https://prog-8.com/courses/rails5
https://prog-8.com/courses/commandline

こにおこにお

2021/09/23

書きながら思ったけどスクラップの順番を後からでも入れ替える機能が欲しい。

進捗

https://jsprimer.net/intro
https://jsprimer.net/intro/authors/
https://jsprimer.net/intro/preparation/
https://jsprimer.net/intro/feedback/
https://jsprimer.net/basic/introduction/
https://jsprimer.net/basic/comments/
https://jsprimer.net/basic/variables/

読んだもの

https://railsguides.jp/api_app.html
https://yshibata.blog.ss-blog.jp/2015-12-23
https://yshibata.blog.ss-blog.jp/2018-06-09
https://zenn.dev/zenn/articles/markdown-guide
https://qiita.com/Yametaro/items/a04032349c46dddf8cda
https://dictionary.sanseido-publ.co.jp/column/第15回-パラダイム
https://jaco.udcp.info/entry/2020/12/10/080000
https://www.nkweb.work/2020/02/06/95/
https://youtu.be/zh-4M5blbiI
和田アキ子が何年か前に流行った「当時の今風」の四つ打ロックを歌っているっていうそれだけなのに新しさを感じてしまった、それほど歌手としての和田アキ子が世代としてピンとこないってことだと思う、MVで登場してほしかった

こにおこにお

2021/9/24

進捗

https://jsprimer.net/basic/read-eval-print/#syntax-error
https://jsprimer.net/basic/data-type/#template-literal
https://jsprimer.net/basic/operator/
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 系のパッケージを管理するツール

読んだ記事

https://www.javadrive.jp/javascript/console/index1.html
https://e-words.jp/w/REPL.html
https://e-words.jp/w/コンソール.html
https://web.archive.org/web/20181002182121/nhk.or.jp/kaisetsu-blog/400/261341.html
いいねにハートマークが使われるようになったのはいつ頃なんだろう
https://e-words.jp/w/シンタックス.html
https://ja.wikipedia.org/wiki/サトシ・ナカモト
https://qiita.com/anqooqie/items/46c2b28eb50c81b151f2
https://zenn.dev/naoki_mochizuki/articles/46928ccb420ee733f78f
https://efcl.info/2020/04/27/jsprimer/
https://tech-lab.sios.jp/archives/18811
https://jp.quora.com/Next-js-Nuxt-jsが次世代のRailsになるという話についてどう思いま

こにおこにお

2021/9/25

進捗

Progate Ruby on Rails VIII 11.「アクション側で共通の変数を定義しよう」~15.「ユーザーの編集を制限しよう(アクション)」
https://jsprimer.net/basic/implicit-coercion/

覚えた単語

単語 別の言語での言い方など 意味
yield 他のものに取って代わられる
エンドポイント end point ソフトウェアの分野では、あるプログラムがAPIなどの形で外部に公開している機能の所在を示す識別名やネットワーク上のアドレス、URL/URIなどのことをエンドポイントということがある。
エッジ edge 一般には「ふち」や「端」、「刃物の刃」などの意味。IoTの分野では、端末と端末側のネットワークで収集したデータを回線に送り出すポイント(ネットワークの端末)を「エッジ」という。例えば、エッジコンピューティングでは、センサや測定器が採取したデータをエッジ(データを送り出すポイント)に配置したコンピュータで解析。遠隔地には必要なデータだけを送信することで、ネットワークの負担を軽減することができる。
斜陽 西に傾いた太陽

インプット

https://ja.stackoverflow.com/questions/60000/apiはなぜ-叩く-のですか
https://qiita.com/alfa/items/3a23f32fd905e3ded0d8
https://youtu.be/U9nmGLZUGR4

こにおこにお

2021/9/26

進捗

https://github.com/koniooo/IdentityV-SurvivalTool/tree/sub
気づいたら1個目に作ったツールを公開してからちょうど1年経ってたのでGitとGitHubとVSCodeに慣れるのも兼ねていっちょ脱jQuery化でもするか、と思って取り掛かってたけど土台無理ゲーなことに気づいた。
3時間くらいぽちぽちやってたけど$(jQueryで書かれている場所の証)でソースコードを検索したら200を超えてて流石に人力では非生産的すぎる、と思い諦めました...
https://prog-8.com/lessons/git/study/1
https://prog-8.com/lessons/commandline/study/1
https://www.udemy.com/course/intro_git/
Udemy初めて登録したけどいろんな講座があるんだなあ、おもしろそう

覚えた単語

単語 意味 別の言い方など
concatenate 連結させる
omit 除く、省略する
recursive 再帰的な
repository 貯蔵庫、倉庫
push ⇔ pull
modify 修正する、変更する
MOOC Massive Open Online Course インターネット上で誰もが無料で受講できる大規模な開かれた講義のこと
hook 留め金、鉤、釣り針
フォールバック fallback 通常使用する方式や系統が正常に機能しなくなったときに、機能や性能を制限したり別の方式や系統に切り替えるなどして、限定的ながら使用可能な状態を維持すること
オーバーヘッド 本来の処理に加えて、余分にかかる負荷のこと
デプロイ 開発したソフトウェアを実際の運用環境に配置・展開して実用に供すること
OGP Open Graph Protocol Webページの情報を検索エンジンなどのプログラムが読み込めるようにするためにHTMLに付加する記述方式

インプット

https://www.higopage.com/wp/2020/12/ring-fit-adventure6/
気が遠いけどがんばろう
https://ja.wikipedia.org/wiki/ルビク・エルネー
https://qiita.com/OTAGRAMER/items/0feab9fbf02e07a44915

https://backlog.com/ja/git-tutorial/pull-request/01/

「プルリクエストは、Git自身の機能ではなくGitHubが最初に提供した機能です。」

https://zenn.dev/akino/articles/78479998efef55
https://qiita.com/thesugar/items/47ec3d243d00ddd0b4ed

こにおこにお

2021/9/27

進捗

https://github.com/koniooo/IdentityV-SurvivalTool
結局1個発見した明らかなバグとデフォルトでミュートがオンになってるんだけど、それをオフにしたときの音がうるさすぎるからそれだけ修正してこの1年前に作ったプログラムの修正というささやかなプロジェクトは幕を閉じましたzzz

インプット


関白宣言みたい()
https://qiita.com/c6tower/items/fe2aa4ecb78bef69928f
https://bioscryptome.t-ohashi.info/git/naming/
https://havelog.aho.mu/develop/git/e513-git_branch_model.html
https://qiita.com/katsunory/items/252c5fd2f70480af9bbb

こにおこにお

2021/9/28

進捗

https://jsprimer.net/basic/function-declaration/

Arrow Functionで問題ない場合はArrow Functionで書き、そうでない場合はfunctionキーワードを使うことを推奨します。

覚えた単語

単語 別の言い方 意味
コールバック関数 コンピュータプログラム中で、ある関数などを呼び出す際に引数などとして引き渡される別の関数のこと。呼び出し側の用意した関数などを、呼び出し先のコードが「呼び出し返す」(callback)ように登録する
メソッド オブジェクトのプロパティである関数
こにおこにお

10/4

昨日までいろいろと別の作業してその余韻にとらわれてたりへこんだりしていたが今日から心機一転がんばる。

進捗

やっと作業ディレクトリを作った!

That's one small step for a man, one giant leap for mankind.

インプット

https://code-kitchen.dev/html/table/

こにおこにお

11/17

コンポーネントツリーとは props が流れ落ちる滝なのだと想像すると、各コンポーネントの state とは任意の場所で合流してくる追加の水源であり、それらもまた下に流れ落ちていくものなのです。

こにおこにお

11/20

進捗

https://jsprimer.net/basic/wrapper-object/#reffn_1

「JavaScriptはすべてがオブジェクトである」と言われることがあります。 プリミティブ型はオブジェクトではありませんが、プリミティブ型に対応したラッパーオブジェクトが用意されています(nullとundefinedを除く)。 そのため、「すべてがオブジェクトのように見える」というのが正しい認識となるでしょう。

http://webcre8.jp/think/html-attribute-title.html
https://ja.reactjs.org/docs/lifting-state-up.html
https://ja.reactjs.org/docs/thinking-in-react.html

こにおこにお

12/4

https://twitter.com/drop_safe
ここに日記風に書いていくのはやはりどうしても想定されたスクラップの使い方としてもそぐわなくて使いにくいのでTwitterに移行します。