ちょっとした興味による観察記録です。いわばただの勉強日記みたいなものです。

自分用のQiita記事を、自分が適切な時系列で追えるようにという意味もあります。散りばめた勉強の痕跡を一本にまとめ上げるための幹という感じです。その性質上、枝を伸ばしては切り落とすようなことを繰り返すため、無駄に記事が増えたりいつのまにか消えて他の記事に統合されたりすると思います。

勉強中の関連記事まとめ
自分用の勉強記事をまとめた目次　~擬似知識体系~

#初期スキル

###HP制作　（2008年頃）

はじめてHTMLというものを使ってレンタルサーバーにHPを設置。基本的な作法など無視して、コピペだけでとりあえず動作するものを作成。ブログ形式でない静的HTMLを全て手動でコーディングするスタイル。

###プログラミング　（2010年頃）

C言語、OpenGL、Perl、jsなどを触ってみる。最初に作ったHPにちょっとした便利機能を実装できないかという試みで入門してみるが、さっぱり理解できずに挫折。OpenGLでテトリス的なものを試作するもブロックが消えず頓挫。

###ブログ制作　（2012年頃）

CMSというものを知り、WordPressを導入。独自テーマを作成し、PHPによるブログシステムを1から自作実装。とはいえググってコピペがほとんどで、PHPを習得したとは言い難い。この頃WEBアプリにも挑戦しており、Node.jsの難しさに挫折経験あり。

###静的HTML導入　（2015年頃）

WordPressによるブログの動作が遅いため、静的サイトジェネレーターの導入を試みるが、ターミナルを使っていろいろインストールして環境構築する段階で挫折。原因はシェルやコマンドなどの知識不足。仕方ないので手書きHTMLと<include>を使ってCMS的な物を自作。少しサイトデザインを変えるだけで全てのHTMLファイルを手動編集するという気の遠くなる管理方式をとっていた。

###静的HTMLジェネレーター導入　（2017年頃）

あまりにも手間がかかって嫌になったので遂にHTMLジェネレーターを導入。このときNode.js、Express.js、Firebase、AWSなどでWEBアプリとして動作するようなものも検討したが難しすぎて却下。そしてジェネレーターの名のつくものを一通りインストールしていき、なんとか成功したものを採用した結果、Rubyによるコーディングが必要なJekyllとGitHubPagesに決定。Rubyを1から勉強し直し、なんとかブログ形式のサイトを構築するが、RubyというかJekyllの限界もあってカテゴリやタグなどのシステムの実装は頓挫。これ以降はサイト構築にほぼ無気力になる。

###WEBアプリ勉強（2019年頃）

特に目的もなくRubyよりも入門しやすそうなJavaScriptをProgateなどで遊び半分に勉強していた。そのためか久しぶりにNode.jsについて調べたら今後どのような勉強が必要かがぼんやりと見えた。そうしてNode.jsの習得という目標地点を設定し、それに必要な知識をかき集めて体系化することで覚えようということでQiita記事として記録していくことにした。

#最初に取り掛かった勉強方法

あるエンジニアがオススメしていたNode.jsフレームワークをとりあえず採用。ExpressやVueなどいくつかあったが、その中から今が旬のNext.jsやReact.jsを採用。特に目的はなく、そのエンジニアがこれを習得できれば仕事があるという話をしていたので、次につながる可能性がある方が勉強しがいがあるという程度の動機。

###Next.jsをググってみる　（2019.10.30）

最初にやったことはNext.jsの情報収集。とりあえず公式チュートリアルを実践。インストールに必要なnpmなどはすでに見様見真似で入れていたのですぐに始められた。しかしルーティングあたりまで進むともはやただのコピペマシンと成り果て、全く知識に定着していなかったため中断。

Next.js　公式チュートリアル

###Node.jsをググってみる　（2019.11.01）

Next.jsの根元にあるのはNode.jsの知識だと考え、次はNode.jsの公式チュートリアルを実践。node app.jsでHello Worldはできたが、ググってみたところそれ以上の開発には基本的には何かしらのフレームワークを使用するものが多かった。当初の目的はNext.jsの習得だったが、解説記事の多さや過去に触ったことがあったことからExpress.jsを再度勉強することに。

参考文献
Node.js　公式チュートリアル

###Express.jsをググってみる　（2019.11.03）

とりあえずいつも通り公式チュートリアルを実践。Hello Worldまではすぐにできたが、それ以降の開発を進めるにはやはりjsコードが読めなくてはいけない。入門者向けのアプリ制作の解説も豊富に見つかったが、それ以降はmongoDBなどのデータベースの知識も必要となるため、これ以上学習範囲を広げるわけにはいかなかった。

WEBアプリのアーキテクチャの知識も必要だが、それ以上にJavaScriptの基礎知識が欠如していた。JavaScriptの基礎はすでに忘却され、どれくらいの範囲の学習が必要か程度までしか把握していない。そのためExpressのサンプルコードにあるapp.get()すらどういう動作をしているのか分からない。

参考文献
Express.js　公式チュートリアル

###今後学習が必要な範囲をリストアップ　（2019.11.03）

しばらくはExpress.jsのコードが読めるようになるためにJavaScriptのコーディングを学習しなおすべきだと判断。それと同時に今後必要になる知識も見通しておくことにした。

Node.jsのフレームワークはいくつかあるが、それぞれどのような進化の分岐をしてきたのか、どういった用途で採用するものなのか知っておいた方が良いので、一通り触りだけでも習得しておくこと。データーベースの扱いはmongoDBといったライブラリの知識に加え、データベースそのものの知識が必要なため、SQLやらRailsやらについて知っておくべき。昔からちょくちょく目にしていたApacheやらJSONやらの意味の理解と、WEBアプリ制作環境としてGitやGitHubの知識も必要。

そういった推測の結果、学習に着手したものからQiita記事を書き、それぞれの記事を相互リンクして擬似知識体系を構築し、その精度を高めていくという形で学習していくことにした。下のリンクはこの時点で書いた記事。ある程度まで体系化して管理し、学習するたびに追記していくというスタイルを取る。

管理システム
　Git
　npm
　nvm
　yarn（勉強予定）
　Homebrew（勉強予定）

データ定義
　JSON（勉強予定）
　YAML（勉強予定）
　XML（勉強予定）

フレームワーク
　Node.js
　React.js
　Next.js
　Nuxt.js（勉強予定）
　Express.js
　jQuery（勉強予定）
　Vue.js（勉強予定）

WEBサーバー
　Apache（勉強予定）

データベース
　SQL（勉強予定）
　mongoDB（勉強予定）
　Mongoose（勉強予定）
　Rails（勉強予定）
　SSL（勉強予定）

まとめ
　入門者のためのNode.js関連用語の意味と体系化

#JavaScriptの勉強

まずは信用できる教材を選び、その知識体系を習得するつもりで読み込みながら実践練習するという方針をとる。採用した教材は『パーフェクトJavaScript』という本。これは2012年頃にExpressの勉強をするために購入して眠らせていたもの。まずはこの本のコーディングについての項目を覚えるところから始める。

参考文献
『パーフェクトJavaScript』

###JavaScriptの言語仕様の勉強　（2019.11.05）

『パーフェクトJavaScript』の基本的なコーディングに関する範囲である1~7章を読みながら実践練習。言語仕様やら型やらプロパティやらオブジェクトやら基本的な部分を復讐していたが、基本の全てをこのときにまとめて覚えようとしてもなかなか目的意識が持てないので、一通り目を通して内容を把握しておき、今後悩むたびに本を開いてリファレンスとして使える準備を整えたといったところで一旦中断することにした。

要は今なExpressのコードを解読できればそれでいい。JavaScriptの基本構文を覚えるのと同じくらいメソッドの書き方が重要で、app.get()などのメソッドは星の数ほどあるので一気に勉強で覚えることは不可能。実際にEspressで使われているものから逆算して勉強した方が早い。

関連記事
What's "JavaScript" ?

###Express.jsのサンプルコード解読　（2019.11.06）

まずはExpress公式サイトのHello Worldのサンプルコードの意味を読み解くところからやってみた。app.get()やapp.listen()の意味をフワッと察した。

.zsh

mkdir test
cd test
npm init
npm install express
vi app.js  //サンプルコードコピペ
node app.js

さらにはexpress-generatorで生成したテンプレートのサンプルコードも読み解こうとしてみた。こっちはHello Worldのコードに比べてかなり実用的で複雑になっていたので、ちょっとやそっとじゃ解読できなかった。

.zsh

express test
cd test
npm install
npm start

そこでテンプレート生成の初期状態のファイル構成の意味から勉強していくことにした。これを理解していないとapp.get()などのパスやファイル名がどれを指しているのか分からない。requireで何を読み込んでいるのかも分からない。route/のjsファイルとviews/のjadeファイルの使い分けが分からない。といった問題の解決に努めた。express-generatorで生成したファイルを編集してみてポート3000表示してでどういう変化があったかなど実験。

app.js
package.json
node_modules/
bin/
public/
route/
views/

関連記事
What's "Express.js" ?
Node.js勉強中に出会ったJavaScriptコードたち解読

###express-generatorのテンプレートを1行ずつ解読　（2019.11.07）

とにかくExpressのコードが読めるようになりたいので、真っ向から解読していくことにした。express-generatorで生成したサンプルコードを1行ずつクドクドと解説するQiita記事を書いてみる。実を言うと入門時にはこういう解説記事に出会いたいと思っていたが、完全初心者向けの一切の端折りなしの記事にはなかなかお目にかかれないので自分で書くことに。

やってみたら割と疑問解決率が高く、学習の進捗も順調に得られている実感もあったので、今後は解読したいコードを1行ずつ翻訳する記事を書くという方針を取ることにした。下の関連記事はexpress-generatorで生成したサンプルコードを解読するために丸一日かけて書いた記事。

関連記事
express-generatorで生成したapp.js のコードを1行ずつ解読

###ドットインストールで人の作業画面から学ぶ　（2019.11.09）

検索で得られるテキストの教材を読み解くのも勉強になるが、テキストベースだとどうしても端折られた部分で置いてけぼりを喰らうことがある。ドットインストールのExpress講座を見て見ると、動画ベースで解説しているから性質上は端折れないので詰むことはなかった。

ドットーンストールのExpress講座は、公式チュートリアルやexpress-generatorのサンプルコードを使わず、1行ずつ手書きしながら解説してくれるので、コードそのものの意味を理解しながら見ることができる。例えばapp.useで読み込むものをミドルウェアと呼ぶとか、express-generatorのサンプルコードではapp.jsとindex.jsに別れてたのをドットインストールではapp.jsにまとめて書くので全体を把握しやすいとか、いろいろ気付ける。

やっとアプリの動作を意識しながらコーディングの勉強ができると安心した。テンプレートを編集するより、1からコーディングして必要最低限で動作させるというのが簡単でいい。それもこれまでの迷走のおかげでドットインストールが有効だと気づけた感じがする。いろいろな勉強方を模索しては中断し、を繰り返したため、消去法でドットインストールは見るべき教材だと判断できた。とりあえずExpress講座の全21回をやってみた後で自作アプリの仕様を考えて実践してみようと思う。

やっぱり初心者の最大のハードルは教材選びだと再認識した。

参考文献
Express入門（全21回） - ドットインストール

###ドットインストールを地道にやる　（2019.11.11）

ドットインストールで学ぶ上で効果的だと感じたのは、コーディングの手順を端折りなしで見られることの他に、そのコードでサーバーを起動した際の動作を動画で確認できること。それによってここで解説されているコードで実装できる機能が自分が欲しているものかどうかということを確認できる。これはモチベーションに大きく関わる。基礎は全て理解しておくべきではあるけど、例えばブログ機能や記事一覧の表示の実装などのような、習得できれば即戦力となる知識であることを知った上で基礎から固める方が挫折しにくい。

注意点は、ドットインストールの講座は情報が古く、Expressのミドルウェアについてはnpmでインストールする方式に変更されているところが多い。ドットインストールの講座の追加情報の注意書きや、外部サイトの間違いの指摘などを参考にしながら学習していかなくてはならない。そこに気づかずに学習していたので、ミドルウェアが見つからないエラーが原因でサーバーが起動しなかったときは、ターミナルのエラーメッセージをググりながら解決するのに手間がかかった。

結局はドットインストールで使っているExpress.jsのバージョンが古いため、講座で書かれたコードは模範解答とはならず、自分でコードをアレンジして正解にたどり着かなくてはならないため、そこでしばらく詰むことになった。何が原因なのかは分からないので、JavaScriptの作法を位置から学び直したり、現状のコードをじっくり分析して原因になってそうな部分を修正して実験したりしなければならない。これで１日費やしている。いい経験値になるという捉え方もできるが、まだ初心者なのでとりあえずは完成品を動かすとこまで行きたいのだが。

ちなみに、Expressを学びながら、作業効率の向上を狙ってドットインストールのvim講座もやった。外部エディタを使わなくて済むのでPC画面がすっきりして良い。

参考文献
ドットインストール Express入門 Express 4.x でやる時のちがいまとめ。
Express 4.x でmethod-overrideでput / delete メソッドを使いたいにハマる。
vimのコマンドと設定のメモ

###ドットインストールのExpress講座#19でハマる　（2019.11.12）

Expressで作るブログアプリの記事の更新/削除を処理するメソッドmethod-overrideが認識されなくて詰んで1日を費やした話。ドットインストールで扱っているExpress.jsのverが古いから記述方法に違いがあるのは仕方ないけど、その違いを理解するにはどこが変更されているのかを予測してピンポイントに勉強しないと答えが見つからないことが多い。そうなると虱潰しにコード1行ずつ見ていく手間が発生してしまう。このときもapp.useでmethod-overrideを呼び出す記述が怪しいということを見落としていたのでコード1行ずつ検証してしまった。

上はソースを並べて見てる図。これをやってやっとapp.useのやり方を調べようというところに辿り着いた。調べたら一発で答えを見つけた（参考文献参照）。書かれてる通りにコード修正したら、見事に記事の更新/削除の処理がされた。この記事の筆者の調査力を見習おう。外部モジュールを扱うときは、そのモジュールを提供している公式サイトの最新情報を必ず確認すべき。これ教訓。

同じ筆者の記事のおかげで、無事ドットインストールのExpress入門講座を一通り実践できた。次からはこの必要最低限のブログアプリに任意の機能を実装していき、立派な自作ブログのシステムまで育てる勉強が始まる。

そう、この状態を作りたかった。プログラミングを勉強する上で、自分の作りたいものの土台までを自分で構築し、その上に欲しい機能をかいつまんで勉強しながら実装していくという学習環境が欲しかった。なぜなら楽しく、かつ実用的だから。いままではこの段階まで到達できなかったのが挫折の原因。

以前Rubyを使った静的HTMLジェネレーターのJekyllを使っている時にCMSの構築はできていたのだが、タグやカテゴリ一覧などの細かい機能で自由度が低かったため自作ブログには不向きと判断した。それに対しJavaScriptベースのNode.jsでCMS自作はワクワクする。それなら初めからJavaScriptを勉強すればいいというわけでもなく、初心者がjs入門するにはjsでできることが多すぎてどのルートに進めばいい教材で勉強ができるかというので迷う。入門あるあるだけど、ここの迷いの解消は具体的にどう対策すればいいのだろう。

参考文献
Express入門#19　記事を更新/削除してみよう - ドットインストール
 Express 4.x でmethod-overrideでput / delete メソッドを使いたいにハマる。
method-override GitHub

###Expressでブログ作る前にGitの勉強　（2019.11.15）

前回に引き続いてExpressでCMS自作の予定だったが、いずれ使うことになるであろうGitの方をサクッと入門しておこうと。ドットインストールのGit講座を言われるがままに履修。こういう管理システムの習得は、メインの勉強に直接関係なくともやっておくべきだと感じた。例えばExpressの勉強でファイルのアップロードのコマンドをミスっていたらどうでもいいことで詰んでしまう。そういう余計な苦しみを予め排除しておくこともたまには必要。ゲームの説明書をじっくり読んでおくようなもの。

gitシステムの内部でバージョンの状態がどうなっているのかを理解するのに割とてこずって3日間もはまってしまった。これでようやくExpres.jsでのCMS制作に取り掛かれる。

参考文献
git入門 - ドットインストール

関連記事
What's "Git" ?

###やっとJavaScriptの基礎を学ぶ精神状態に　（2019.11.19）

これまでWEBアプリを作るとう目的で勉強を進めて、少しずつ根本スキルに掘り下げる「掘り下げ式」という形で軌道修正してきた。例えば、最初に採用しようとしたNext.js、そのベースになっているReact.js、そういう技術の発端であるNode.js、それを使いやすくしたExpress.js、そういったjsフレームワークのコードを読むためのJavaScriptの基礎、という流れになっている。Express.jsのチュートリアルや講座を見ても、ある程度までは文法を勉強できるが、いちいち1行ずつググって意味を調べるのは非効率と考え、やっぱり1から体系的に勉強する「積み上げ式」に転向。

普通に考えればJavaScript入門したいなら基礎からやれという話だが、モチベーション的にそれができないから難しい。何かを作りたいと思い立ち、それに必要なスキルをかいつまんで学び、少しずつ関連づけて知識にしていく、という一般的なイメージがある。しかし、最後の「少しずつ関連付ける」工程では、一つ前の「スキルをかいつまんで学ぶ」ときの答えと比較しながら体系化するし、それが何に応用できるかという視野は「何かを作りたい」という目的によって維持している。つまり**「掘り下げ式」も「積み上げ式」も表裏一体で、結局はやってみないと何をすべきか分からないという状態**から抜け出せない。

実際に、いろいろ迷走したおかげで「Express.jsで何を作ろうとしたときにどこで挫折したため何が足りないか」が分かって「JavaScriptの基本文法が分かればググる手間が結構省けるし自分でコードをアレンジできるようになる」というイメージを掴めたので基礎勉強のモチベーションが確保できた。この迷走しないと理解できない部分を最初から理解できればすごく楽なのにとつくづく思う。

というわけでこの4日間はドットインストールのJavaScript入門講座を一通りやった。やってみると、Express.js勉強中に疑問だった書き方の意味を推測できる感覚があって、「あぁ、基礎大事だなぁ...。」という腑に落ちるかんじがあった。ちなみに、以前ProgateでJavaScript講座やったときより明確なイメージが掴めて、おそらくProgateのようなスライド式より、動画で飛ばしたり戻したり音声で聞いたりする方が、思考の選択肢が多くて理解しやすいのだと思った。強いて言えば、開発環境はやはり自分で用意しないと現実味がないというか、Progateで用意されたブラウザ上のエディタでは終始ナビゲートしてくれるのはいいが、模範解答以外のコードが書けないからマニュアル人間になってしまうのが記憶に定着しない原因だと予想。ある個人が何かを勉強する際、講師の考える知識体系をそのまま押し付けても身に付きにくいため、その体系を崩したり並び替えたりできる環境で見聞きするのがいいのかもしれない。このあたりの勉強に必要な実践や復習などの効率的な試行錯誤はもっと科学的根拠が解明されていた気がする。

ちょっと思いついたメモを残しておくと、JavaScriptの構文の意味を説明されるより、そのコードを書き上げるまでの思考をおった方が勉強になる、その思考に論理的な飛躍がなければなおさら並び替えがしやすくていい。そして記憶に定着していなくとも、外部記録として閲覧しているとしても、思考や論理の履歴をさらっと見直せる環境があると「暗記」する手間を先延ばしにできる。スライドを「ページ送り」で見るより「2画面別スクロール」で見る的な。もしくは読書術に似ていて、目次で興味のあるところから掻い摘んで読んだり、興味のあるところだけ読んだりして、後から穴埋めして知識をつなげていくとか。例えば、ドットインストールの「オブジェクト編」の目次でsetTimeoutの回があって先に掻い摘んでみたりして、前回と関連性がありそうだからそれを確かめるために遡るとか。

参考文献
はじめてのJavaScript (全11回)
詳解JavaScript 基礎文法編 (全26回)
詳解JavaScript オブジェクト編 (全23回)
詳解JavaScript DOM編 (全15回)

###Next.jsで自分のサイトを再設計し始める　（2019.11.20）

JavaScriptの基礎勉強もそこそこ進めたが、遂に飽きが来て理解が捗らなくなった。そこでどうすべきか考えたところ、「飽きた」＝「興味がない範囲」＝「記憶に定着しない」ということでこれ以上の勉強は不毛だと判断。こういう時は現状の知識で作れるものを作ってみるというのが良いかもしれない。今勉強しているのは、本来の目的であったNext.jsでの開発に一度挫折して原点回帰してたからだが、それを再会することにした。やはり最先端に触れるのは楽しいし、本来の目的なので進捗の達成感や知識欲の満足感がすごい。しばらくは詰むまで実制作作業に勤しむことに。

いわゆるアウトプットとインプット。
そしてそれを切り替えるタイミングの仮説。

　　　詰んだら掘下式学習
創作　　⇄⇄⇄⇄⇄⇄⇄　　基礎学習
　　　飽きるまで積上式学習
— お絵描きホーホー論🔶透視図法オタク🔶 (@oekaki_hoho_ron) November 20, 2019

###Next.jsで詰んでReact.jsの学習に掘り下げて学習　（2019.11.22）

JavaScriptの基礎勉強に飽きてNext.jsを使ったCMS制作に着手したが、Next.jsの「コンポーネント」の使い方の応用あたりからは公式サイトのチュートリアルのGoogle翻訳では意味不だったので、一旦Next.jsの元となっているReact.jsに掘り下げて学習することにした。

ドットインストールにReact入門があったのでそれを進めていくが、stateの設定あたりから動画の解説が脳を素通りし始めたので中断。もっと丁寧に整理された教材はないかと考えたところ、そのレベルであればProgateが適切と判断。まずはProgateのReact講座をやってからドットインストールに挑戦、そして公式チュートリアルやドキュメントを見た後でNext.jsを使ってみるという流れを想定してみた。

目的から基礎に原点回帰する「掘り下げ式学習」と、基礎をコツコツ学習していく「積み上げ式学習」を行き来するやり方を実践しているが、どこまで掘り下げるか、どこまで積み上げるか、というバランスが遠回りや迷走しないためには大事。積み上げ式は飽きたら中断して本来の目的の作業に戻るか、前回詰んだポイントへ戻るというように、止めるタイミングと戻る地点は決めている。掘り下げ式は現状レベルで理解が困難になったらとりあえず一階層下げて基礎勉強をしてみるという感じで、止めるタイミングと掘り下げるレベルを決めている。一階層下でも難しかったらさらに一階層下へ。

今回の例で言えば、Next.jsをやるにあたってその基礎になっているNode.jsまで掘り下げたが、それが難しかったので一気にJavaScriptまで掘り下げたが、確かにJacaScriptの基礎は必要ではあったがあまりにも基礎的すぎてNext.jsまで道のりが遠すぎて飽きてしまったので改めてNext.jsから掘り下げるレベルを探ってみたところ、やはりNext.jsのチュートリアルには解読できないブラックボックスがあったので一階層下のReact.jsのチュートリアルを見たけど意味不明、もっと優しいReact.js入門講座としてドットインストールを選んだがまだ難しい、もっと簡単にしてProgate。

このように振り子運動のように少しずつ振れ幅を狭めて学習地点を特定していく。それで難しいようであればまた学習範囲（振り子の振れ幅）を広げて少しずつ収束させていく。つまり、掘り下げ式学習をやるときに戻るポイントをピンポイントに決められるのであればそれでいいが、本当に基礎知識が欠落している時はポイント設定に失敗する可能性が高いため、振り子のようにある程度の外堀りから埋めていくような掘り下げ方をした方がいいということ。掘り下げ地点の周辺知識を漁るように学習していくと、掘り下げた先のレベルで詰んだとき事前に埋めておいた外堀りを逆に掘り下げるだけなのですでに方向性が見えていることになる。

参考文献
React学習コース - Progate
React入門 - ドットインストール
 React.js　公式チュートリアル
 Next.js 公式チュートリアル

###掘り下げ式学習とビジュアライズの重要性に気づいた　（2019.11.24）

ProgateのReact入門をやってて感じたが、おそらく最初にこの講座に手をつけていたらさっぱり頭に入らなかったと思う。しかし実際は時間をかけてジワジワと理解が進んでいる。これは「掘り下げ式学習」としてReact.js周辺を満遍なく迷走してきたため、学習中に「これ意味不！」となったときにチラ見しといた周辺知識で仮説を立ててイメージを膨らませられたからだと思う。

例えば、公式チュートリアルのように絶対的に正しいが（翻訳したため）日本語がおかしい解説で悩んだときに言語化しきれなかった部分が、次の学習で補填すべきポイントとなる。コンポーネントの用途や用法については下手な倒置法のような言い回しになっていて、コードを読んでもデータの経路がイマイチ理解できなかった。そういった要補填ポイントを経験していたためにドットインストールのReact入門講座には知りたいことが書いてないと判断できたし、ProgateのReact学習コースの目次を見ただけで当たりだと判断できた。

おそらくReact.js入門して以来、何が分からなくて詰んでいたかというと、importやらexportやらreturnやらでどのデータをどうやって呼び出してどこに渡されているのかのイメージが固まっていなかったこと。様々な解説を読みながら順を追えば分かるが、いざ思い返してみると記憶を辿れない程度にしかイメージを持てていなかった。Progateの解説スライドではコードと図解を照らし合わせながらデータの流れを解説していて分かりやすかった。

とすると、掘り下げ式学習で周辺知識までの外堀りを掘っておくことは、もしかしたらある程度の範囲の関係性を把握したかった、つまりコードの意味やデータの流れを関連付けたかったのではないかと思う。未知の理論を理解するにはビジュアライズするのが手っ取り早いが、そういった明確なイメージが浮かぶには外堀りで囲むことで余計な情報をシャットアウトして、その分野の特徴をまず把握しなくてはならない。例えば、React.jsであれば「コンポーネントベース」という公式の売り文句は真っ先に理解しなくてはならない（さっき思い出した）。その「コンポーネント」の使い方が理解できてからは学習がスムーズに進み始めた。React.jsの学習過程での外堀りの範囲の決定方法は以下の通り。

最初にNext.js公式チュートリアルでの詰み　→　コンポーネントのデータの流れが複雑（課題設定）
次にReact.js公式チュートリアルの見送り　→　専門用語多すぎて不向き
ドットインストールReact入門の中断　→　コーディング手順がメインで体系化しにくい
ProgateのReact学習コースの目次への着目　→　コンポーネントの解説が充実していた
コンポーネントのイメージが掴めたので専門用語を意識する余裕が生まれた　→　積み上げ式学習が可能となる

掘り下げ式学習の目的は、課題の答えの埋まっている地点を含め広範囲に掘り下げ、課題の答えを理解するのに必要な周辺知識から順に回収していく。そして課題の答えに辿り着いたときには確実に知識量が増えているため、それを土台にピラミッドのように外堀りの範囲を狭めながら積み上げ式学習に転じる。掘り下げた穴を周辺知識で埋め直すイメージ。周辺にどんな土が埋まっているのかを確認した後、元の状態に戻すことができたら理解できたと見なせる。理解できてなければ元の状態にたどり着けない。そして積み上げた先には実践が待っている。実践に詰んだらまた掘り下げ。という流れ。有り体に言えばトライアンドエラーということになるかも。

積み上げ式学習は、理論の理解が目的であるが、実践中に設定した課題と掘り下げ地点の答えとの関連性をビジュアライズできるかどうかが特に重要。イメージが掴みにくければアナロジーで構わない。プログラミングは特に言語でひたすら記述するものなので、人間にとって優しい図解に起こさないと記憶に定着しにくいと思われる。

参考文献
Next.js公式チュートリアル
 React.js公式ドキュメント
 React入門 - ドットインストール
 React学習コース - Progate

###React.js公式ドキュメントが少し読めてきた　（2019.11.28）

React.jsの公式ドキュメントのコンポーネントとpropsの項目を読んでいて初めて気づいた。render()やコンストラクタやif文という根本的な知識にフォーカスできるようになってきた。周辺知識を広げておくことで、本筋とは遠いところもしくは深いところにあった根本知識まで手が届くようになった。手が届けばそれの理解を深めて土台を固めることができ、強固な知識体系を構築できる。

###JavaScriptの言語仕様にやっと興味湧いてきた　（2019.12.01）

初心者にありがちな迷走が何か分かった。掘り下げ式学習も、積み上げ式学習も、真似で学ぶチュートリアルも、仕様を理解するドキュメントも、どれが最初かという話より以前の重要項目があった。初心者が理解できない原因は情報量が多すぎるから。まずは情報量を削ぎ落として、そして言語の仕様や、アプリのアーキテクチャ、データの経路などをビジュアライズするのがいいと気づいた。つまり、コードの処理の中身をイメージできていないから何も理解できなかったということ。初心者が真っ先に理解すべきは言語の仕様のビジュアライズ、アプリのアーキテクチャのビジュアライズだった。

初めてJavaScriptを学んでいると、どうしてもコードがエラーを起こさず動作するとこまでやらないと安心できない。それは当然で、もしコードにバグがあるの動作確認せず分析して理解してしまうと、誤解のまま覚えてしまう。だから初心者はJavaScriptの仕様を理解するより先にHello Worldをやるし、簡易アプリのチュートリアルに手を出す。しかし必ず途中で詰む。なぜならJavaScriptの仕様を知らないため、プロトタイプベースやプロトタイプチェーンやコンストラクタなどの意味を知らず、コードの動作のパターンで覚えようとするが、そういった手順だけで覚えた知識は応用が利きにくい。例えば、constructorで定義するオブジェクトの指定にはthisを付けると覚えても、ではthisを付けなくていい場面はいつなのかと言われると分からないため、コードにエラーが出た時にthisの有無が原因であるかどうかを検証できない。つまり自分でコードを考えて書く能力が付かないということ。

覚えることが多いと忘れてしまうため情報量を減らす学習方法が重要。たとえば、React.jsを学んでいるとpropsやstateなどでオブジェクトデータの受け渡しや上書きや生成などの処理を理解しなくてはならなくなる。そのときに実際にデータの流れを応用にReactのコードを読むより、JavaScriptのプロトタイプベースという仕様を理解しておいた方が早い。英会話を勉強するときだって、単語や熟語ばかり覚えても片言英語にしかならないため、まずは基本文法や品詞という仕様から覚える。英語における主述の文法や接続語や分詞形などは、JavaScriptにおけるプロトタイプやコンストラクタと同じくらい根幹にある概念といえる。

とは言え、英語入門したときにいきなり文法や品詞の説明を読んだだけで理解はできない。「I like tennis」や「This is a pen」では全て理解できず、もっと複雑な修飾語や時制を盛り込んだ例文で言語仕様のイメージ（エピソード記憶かも）を掴む工程が必須。JavaScriptでもReactなどの公式チュートリアルで挫折する経験がないと言語仕様に興味が持てないのは、処理のイメージを掴む工程として必須なのかもしれない。もっと簡単なたとえをするなら、ヒグマの恐ろしさの実話を聞かされても危機感は沸かないが、動物園で鉄格子一枚向こうのヒグマを見たら相手の戦闘力（ヒグマの仕様）を体感できる的な。ヒグマに食われる夢を見ても危機感は根付くかも。自動車の運転でも分かりやすいかも。慣れないドライバーが東京都内を運転するのは至難の技で、交通ルールを覚えていても目的地までの道のりが分からなければそっちが心配で運転ミスや躊躇が発生するため、まずは地図を確認して車線の複雑さや交通量から危険予測（都内の交通の仕様の理解）すべき。プログラミングでは「やろうとしたけどできなかった」という危機感やハードルの高さの体感が必要だったのかもしれない。

結論としては、実体験からくる危機感や難易度の体感が、掘り下げ式学習の切実さと、積み上げ式学習の目的意識を構築するため、一度は本当にやりたいことに挑戦して失敗してくるところがスタート地点ということ。よって、Next.jsで自作ブログを作りたい僕としては、Next.jsやReact.jsやExpress.jsの公式チュートリアルで全敗したため、それらのコードを読めるようになるためにJavaScriptの言語仕様のビジュアライズが次の課題にしようと思う。

下記の参考文献は、非常に分かりやすく文章化してくれている。公式チュートリアルなどは日本語が微妙だったり最小限の説明しかなかったりで、初心者が興味を抱いたり想像を膨らませたりといった段階に至れない問題があった。しかしこのブログの説明は、ほぼ何も考えずに読み進めてもイメージが湧いてくるほど説明がうまい。そうそう、そういう言語化がしたかった、という感じ。ファンになった。

参考文献
正真正銘のReactだけの不純物なしでReact入門

###Next.jsでブログ → React.jsでポートフォリオに路線変更　（2019.12.02）

ここ最近の目標は自分のサイトを「Next.jsのCMS」に置き換えるための勉強で、それとほぼ同じ勉強ができそうな「React.jsのみでポートフォリオサイト作成」というテーマに挑んでみた。

Next.jsはReact.jsをベースにしているだけあって、ほぼ同じことしかしていない。ただNext.jsのチュートリアルでは動的ルーティングや、ページリロードしたときにURLを見失う仕様を解消するためにルートマスキングやらカスタムサーバやらをいじるためにExpress.jsの知識が必要になったりで、そこそこ応用編につっこんだ内容になってくる。すると、クライアントサイドのコーディングの知識だけでなくサーバサイドの知識が必要になり、結構な難易度になる。そのまま学習を続けるにはギャンブル要素が大きい。

参考文献
Next.jsチュートリアル翻訳（「カスタムサーバを作る」の項目）

React.jsを使えばコンポーネントに分けてサイトレイアウトを管理できるし、propsを活用すれば動的なUIも実装できる。しかし、やはりJavaScriptの文法を読み解くのに時間がかかるし、手本のコードがJavaScript標準のメソッドなのか独自に定義したものなのかの判断持つかない。そろそろこの弊害をどうにか解消しておくべきだと思った。

ここでいう「標準の」が意味するのは、ライブラリやフレームワークにおいて、という意味もあるが、それ以前にWebアプリ技術において常識の処理なのかどうかという意味もある。例えば、サーバとクライアントの通信にはGETやPOSTや、よく関数の引数にはいっている（req, res)などはJavaScriptに限らずWebプログラミングでは必須知識といえる類のもの。その知識さえ持ち合わせていないため、コードが何の処理をしようとしているのかをコードの表面上でしか読もうとしないことが、コードを難解なものと感じる原因となっている。もしここで「通信するためには必須のメソッドだから」という心構えがあればスムーズに読み解けるかもしれない。

参考文献
Reactでポートフォリオサイトを作ってみた大学生の話
 YAMADA KENTARO ポートフォリオ

###Webアプリケーションの基礎を学ぶ　（2019.12.04）

前回の続きで、Webアプリに関する通信技術について勉強しておこうという方針。これについては実践練習というのは現実的でないので、専門書を地道に読み進めるのがいいと考えた。

これは過去にNode.jsを勉強しようとしていた頃に買っておきながら活用法が分からずにいた「プロになるためのWeb技術入門」という本で知識を賄うことにした。昔はNode.jsのコーディングのために買ってみたものの、コーディングにはほぼ触れず根幹の技術について解説しているだけだったので知識を取り込めなかったが、今となればまさに欲しい知識てんこ盛りだった。やはり基礎勉強には必要に駆られたモチベーションが必要らしい。興味ともいう。

この本で学べることはHTTPの基礎、ネットワークのハードとソフト、クライアントとサーバの間のデータのやりとり、あたり。これを理解しておけばNode.jsでサーバ関連のコードをみたときにイメージが浮かぶようになる。そのレベルに到達するのが目標。この本はとりあえずじっくり読み進めながら、コーディングについては並行して練習を続けるつもりでいる。

参考文献
プロになるためのWeb技術入門 - Amazon

###自作テトリス for HTML5 / JavaScript　（2019.12.06）

JavaScriptのコードを読み解くときに最もカロリーを消費するのは、人間の目に見えないところにあるデータにアクセスする処理をするときだと思う。例えば、配列データを網羅するように処理するfor文が含まれるコードを読むのが苦手だという自覚があった。これは理解するしない以前に、単純に読み解く訓練をしないといけない。それに愚直にコードを書いて処理を追加するより、関数やクラスを定義してコード量をへらして可読性を高めることにも慣れておきたい。

そこで最適な勉強方法として「自作テトリス」に挑戦してみようと考えた。ブラウザゲームはサーバと通信する必要のない仕様であれば完全にクライアントサイドのコーディングに集中できるし、様々な細かいゲームアルゴリズムを考えるのはそれこそfor文や関数の扱いを実践練習するいい機会となる。テトリスのブロック描画は配列で管理するので最適。

とはいえ0から作るには時間がかかるし、そもそも第一歩目に何をすべきか全く分からなかった。過去にC言語で作ろうとしたとはいえ、ほぼ無理解のコピペだったし。そこで土台となるコードを探してきて、とりあえずコピペ直後に正しく動作したもののクローンを使って作ることにした。採用したのは、224行で必要最低限の機能を備えたテトリスと紹介されていたコード。テトリスに必要なアルゴリズムは一通り実装されていたので、それを読み解くことで基礎を学ぶことができる。

UIの描画はCanvasでやっていたのでとりあえずはデザインを整え、それからアルゴリズムの意味を理解するだけで丸一日潰れたが、for文でxy配列をパースするイメージが掴めたので、これはいい勉強になった。あとはゲーム性を向上させるためにスコアシステムを実装して一旦の完成とした。

↑プレイしてみる

今後はReact.js勉強に戻りつつ、トレーニングとしてテトリスのコード育成をしていく。一応今後のアップデート予定項目はGitHubのページにメモしているので、ひとつずつチェックマークつけていけばいい。未実装のアルゴリズムやバグ修正も残っっているし、ゆくゆくはTwitter認証などを実装してランキングをデータベースに保管したり、可能なら通信対戦システムを実装しようと試行錯誤することで、Webアプリプログラミングに活かせると考えている。

参考文献
canvas-tetris - GitHub
テトリス for HTML5 / JavaScript - GitHub

###難敵mongoDBに破れる　（2019.12.15）

テトリスを作ることでJavaScriptのアルゴリズムを練習する環境は手に入った。そして並行して『プロになるためのWeb技術入門』を読み進めていたため、Webアプリ開発に必要な基礎知識は少しずつ蓄積してきた。HTTP通信でログイン認証するためにユーザ情報をセッションIDでCookieに記述して渡すなど、Node.jsでコーディングする際に何のデータがどこにあってどう引っ張ってくるのかをイメージするために役立つ情報となる。とりあえずしばらくはこういったコーディング以前の基礎知識を蓄えることが最善だと考えている。

それはそれでやっていくとして、今一度Node.js開発の方に着手しようと思った。改めてどこで手詰まりになるかを確かめるために自分のHPをNext.jsに置き換える作業に取り掛かる。やはり以前と同じ投稿記事ページでリロードしたらルーティングが切れるエラーは健在。それを解消するためにExpress.jsのルーティングを復習して動的ルートの設定を調べ、その方法でNext.jsでもルーティングできそうと思ったが果たしてそんな付け焼き刃のような恐る恐るやっただけの設定でいいのだろうかと疑問。そんなこんなで、Express.jsで簡単なアプリ作成をやってからNext.jsをやろうと決断。

ちなみにNode.jsのフレームワークの違いは大体わかってきた。Express.jsはサーバ構築、Next.js は React.js のUI設計を土台としたコンポーネントの活用。まずExpress.jsでアプリを作るにあたり、取り組む課題は3つ。

Webサーバ構築 & 動的ルーティング
データベース構築 & ユーザ情報管理
GitHub Pagesではなくちゃんとしたサーバに実装（AWS・Firebaseなど）

1つ目はapp.get('/', function())などで設定できそう。3つ目はアプリが完成するまでは実践できない。問題は2つ目で、とりあえずはmongoDBで簡単なユーザ情報管理を実装してみようと考えていた。例えば並行作業でやってるテトリスにプレイヤーのスコアを取得してランキング的な機能を考えている。しかしmongoDBは最近アップデートして仕様が微妙に変わったらしく、ググって手に入るハウツーのほとんどが通用しない。一応mongoDBが動いている様子あるが、これがアプリ上で正しく動作するのか不安すぎる。

ここで問題になっているのはmongoDBの環境構築。まずnpmでインストールするmongoDBと、PCにインストールするmongodコマンドとがあって、その辺りがよくわからん。とくにmongodコマンドのバイナリデータにパスを通して...とか意味わからん。つまりMacにmongoDBをインストールするためのUNIX環境の知識が足りない。mongodb.conf的なファイルの扱いがわからない。これが最新の課題。

よって昔買って放置しておいた『MacOSユーザのためのUNIX入門』という古い本を読み直してみることに。ターミナルを使いこなせるようコマンドを覚えたり、重要なデータが入っているディレクトリの操作の作法を覚えたり、シェルや正規表現を覚えたりというのが目的。達成課題は、mongoDBコマンドを正しくインストールすること、mongoDBの動作プロセスを監視するコマンドを使いこなすこと、エラーの原因（プロセス重複など）を特定するための正規表現を覚えること、それによってmongoDB公式ドキュメントの最新ではあるが端折られた解説の意味を理解して実践できるようになること。そこまでできたらExpress.jsアプリにmongoDBを実装できて、その経験を土台にNext.jsのルーティングにも自信を持って立ち向かえると思う。

参考文献
MacOSユーザのためのUNIX入門

しばらくは下記の3つのミッションからの積み上げ式学習を経て、Express.js、Next.jsとステップアップ。12月に入ってからは掘り下げ式学習を十分やり尽くせたので、あとは何を積み上げれば当初の目的を達成できそうか見えてきた感じ。

『プロになるためのWeb技術入門』
『MacOSユーザのためのUNIX入門』
テトリス制作

↓

Express.jsアプリ試作

↓

自分のHPをNext.jsに置き換え

###mongoDBは凍結、そしてNext.jsの動的ルーティングは理解　（2019.12.26）

『MacOSユーザのためのUNIX入門』を読破して手に入った知識はmongodコマンドなどのインストールに仕組みなど。インストールしたつもりでもnot foundになった場合はbinファイルをインストールしたディレクトリが違うんだろうな、くらいは分かるようになったので収穫はあったと言える。しかし、そうしている間にmongoDBの優先度が低い気がしてきて方針変更。mongoDBは一旦忘れることにした。

優先度が変わったきっかけはNext.jsの動的ルーティングの理解が進んで、そちらの方が当初の目的である「Next.jsで自分のサイトを置き換え」を実現できそうだったから。ついこの間まで参考にしていた情報が実はNext.jsの古いバージョンのものだったらしく、現在のNext.js 9 では標準機能で実装できるとか。ちなみに動的ルーティングの何につまづいていたかと言うと、Next.jsはシングルページアプリのフレームワークで、ページ遷移の際にhtmlファイルを読み込むのではなくデータを読み込むだけで実際のページ遷移すなわちページ読み込みはせず、リアルタイムでページ内容を書き換えることで普通のサイトのような動作を再現するため、ページのデータのみを読み込んで書き出したページでリロードすると実際には存在しないファイルパス（URL）であるため404エラーが発生するのを回避できないというもの。これまでは<a>タグにhref属性とas属性を指定することでファイルパスとURLを区別したり、Express.jsでカスタムサーバを立ててHTTPリクエストを管理したりすることで動的ルーティングを実装する方法しか知らなかったが、どうやら[pid].jsのようなファイル名のものを用意することであれこれして実現できると今更知った。

先日まで掲げていた課題は以下の3つだった。

Webサーバ構築 & 動的ルーティング
データベース構築 & ユーザ情報管理
GitHub Pagesではなくちゃんとしたサーバに実装（AWS・Firebaseなど）

現時点で、1の動的ルーティングはひとまずクリア、2のデータベースは優先度の低さゆえに保留、3についてはそのうち。といいうことでNext.js開発の詰みポイントをクリアできたためしばらくはNext.jsに集中せざるをえなくなった。動的ルーティングの仕組みがわかったところで、ブログとしての機能を充実させるには、

カテゴリーやタグ機能
新着記事一覧のページネーションなど
サイト内検索
可能ならCMS的なダッシュボード
css編集

などなど、やることは尽きない。今はNext.jsベースのGatsby.jsで提供されているテーマのアルゴリズムを分析したりして自作ブログの機能を構築しているところ。こういうところでも掘り下げ式学習と積み上げ式学習を繰り返すらしい。

Gatsby公式サイト

###Gatsby.jsを手本にReact.jsの仕様を学習　（2019.12.27）

本格的にNext.js開発をやるためにGatsbyのテーマのサンプルコードを読んで、知らない書き方の部分をググって翻訳していく作業を始めた。意外なことにこのやり方の方が公式ドキュメントで学ぶよりも周辺知識が回収できて知識体系の全体像が浮き上がってくる。公式ドキュメントで学習してるときはなんとなく書いていたコンポーネントの構文が、実はFunctional Componentという名前のついた書き方だったということに気付いたり（←これ結構すっきりした）、Reactコンポーネントのライフサイクルという用語をなんとなくのイメージで分かった気にならず徹底解剖した方が今後のググりの精度も高くなるとか、今までは重要性が分からなかったことが眼中に入り始めた。

// 普通のクラス継承での書き方
class Layout extends React.Component {
  render() {
    return(
      <>
        { this.props.a }
      </>
    )
  }
}

// Functional Componentでの書き方
const Layout = (props) =>(
  <>
    { props.a }
  </>
)

Reactの理解が深まるにつれてJavaScriptの周辺知識も固まっていく。というか、Reactという実例をモチーフにJavaScriptの基礎学習を進めている感じになっている。JavaScriptだけを勉強しているときにClass継承を考えたり、thisの挙動を追ったり、コンストラクタの使い方を考えたり、などをやってもその仕様を暗記するしかないため理解にまでは及ばない。しかしReactのライフサイクルの中身を見ながら上記の項目を考えると明確にビジュアライズできる。とりあえず思いついた項目をググっているだけなのでそれが知識体系のどの部分に当てはまるかは考慮していないが、やっているうちにこれまでに勉強してイマイチ理解できなかった部分と結びつくことが多く、結果としてこれまで掘り下げておいたものが一気に積み上げられていく感じになっている。積み上げ式学習の有効なやり方を見つけられたかも。

↓今回つまみ食いした項目

アロー関数とthisの仕様とbind()
グローバル変数window以下は全てプロパティアクセスのツリー構造（予想・思いつき）
ReactのFunctional Componentという用語
Reactのコンポーネントのライフサイクルの図解

↓ググって参考にした記事。まず1つ目のGatsbyのテーマのサンプルコードを読んでいてアロー関数をスムーズに読めなかったのでググる。2つ目の記事でアロー関数の記法を覚えてthisとの関係も知る。3つ目の記事はセカンドオピニオン。そして調べる過程でよく見かけたconst View: React.FC<Props> = props => (のFC様な表記の意味が分からなかったので調べたのが4つ目の記事で、その記事の1行目でいきなり「React Hooksが来てから、ほとんどFunctional Componentを使うようになりました」と言われてなんだそれとなって5つ目の記事を読み、その中で「これについて知るには、まずshouldComponentUpdateというライフサイクルメソッドを理解する必要があります」のくだりでReactのライフサイクルを調べたのが6つ目。FCについてはTypeScriptへの入門が必要だったので保留としたが、結果として重要な知識の回収に成功。一応これらは勉強の足取りを客観視するという試み。

参考文献
GatsbyへCategoryとタグ機能を追加する
 JavaScript の this を理解する多分一番分かりやすい説明
 【JavaScript】アロー関数式を学ぶついでにthisも復習する話
 【React+TypeScript】Functional Componentの定義方法
 Functional Component と PureComponentの違い・使い分け
 React(v16.4) コンポーネントライフサイクルメソッドまとめ

こういったReact.jsやNext.jsの仕様を堀り下げつつ、掘り下げた知識を結合させてJavaScriptの基本仕様の知識を積み上げつつ、積み上げた知識でGatsbyのサンプルコードでブログシステムを再構築していきつつ、読めないコードがあれば再度ググって掘り下げる。まずはカテゴリーやタグを振り分けるのはどうやるのかを理解することから。

カテゴリーやタグ機能
新着記事一覧のページネーションなど
サイト内検索
可能ならCMS的なダッシュボード
css編集

###graphQL入門　（2019.12.28）

Gatsbyではサイト内のデータの扱いにgraphQLを採用しているらしい。サンプルコードを読んでいると記事情報の取得っぽいヵ所でgraphqlという文字が出没する。graphQLはFacebookが開発したクエリ言語で、いわゆるデータベースからデータを取得するときのSQLの新型的なものだと思う。GatsbyでCMSを開発する場合、投稿記事のメタ情報（タイトル・投稿日・カテゴリ・タグなど）を保存場所にアクセスして取得しなくてはならないので、何かしらのそういった処理を書かなくてはならない。それを実装するのにgraphQLを使うということ。今勉強中のReact.jsもFacebookが開発したものなので相性はいいのかもしれない。よく分からんが。

これらを理解するにはまずGraphQLの比較対象として挙げられているRESTも知っておかなくてはならない。なんか『プロになるためのWeb技術入門』にもRESTfulという用語が登場していたが、要は開発者に優しい開発環境のための思想みたいなやつだった。明確なルールではなく思想。それに対してGraphQLは言語として確立している明確な仕様を持ったもの。

ググった記事が端的に答えてくれていたので抜粋するとREST APIとは、URLとリソースが紐付いており、特定のURLにアクセスすると取得できるAPIで、GraphQLとは、クライアントとサーバー間の通信を行うときに利用するクエリ（query）言語とのこと。つまり、REST APIではgetメソッドでリクエストする度にパス（URI）を通していたのを、GraphQLではJSONデータを読み込む様にピンポイントに簡単にできてしまう、みたいな感じだと思う。そして、参考記事に書かれていたデータ取得処理の中身の説明を見てある謎が解けた。下のコードはログインしているユーザ名を取得する例。

クエリを発行.

{
  viewer {
    login
  }
}

取得できるデータ.

{
  "data":{ 
    "viewer": {
      "login": ****** (ログインユーザー名)
    }
  }
}

帰ってきたデータがdataというオブジェクト名で渡されている。これはGatsbyのサンプルコードを読んでいて意味が分からなかった記述だったので、なるほどGraphQLの仕様だったのかとスッキリした。

とりあえずthis.props.data.allMarkdownRemark.edgesのdataの部分の謎は解けた感じ。多分こんな感じでデータを取得して、そのデータを読み込んでいるからdata.○○という記述なんだと予想。

多分こんなやりとりがあった.

{
  "data":{
    "allMarkdownRemark":{
      "edges":何かデータ
    }
  }
}

これをコード内で読み込むと data.allMarkdownRemark.edges = 何かデータ

参考文献
GraphQL公式サイト
 GraphQL とは？REST API の代替になる？
RESTful APIとは何なのか

Next.jsを習得するために色々勉強しているわけだが、やることが増えていくのはしんどいけど、その分明確化されてきているのでまぁ耐えろ。

↓当面のやるべきこと

Gatsby.jsのサンプルコード読んでCMSの構成を勉強
GraphQL入門してCMS内でのデータのやりとりを設計する
Reactライフサイクルを理解してCMSの動作のイメージを把握する
Next.jsで自分のサイトを改装する