連載機能いい

開発してて、あれどれだっけ？という事が多々ある。（Reactコンポーネントの書き方とか）自分のコードを見返すのも良いけど、Crieitの連載でためた記事を見返してこう書いていたなと引けるのでググるより速い。エディタで確認というやり方もあるけどあれだとうっかり、触らなくて良いファイルを編集することがあるので要注意。いや、書きためてまとめておけるは便利だ。

今日は記事がお休み

今日は記事がお休みです。理由はJSX内でのループ処理でめちゃくちゃハマったから。しかし、完全に1から自分でコードを書いた。ほんの数行の簡単なFor文だけど実装までこぎつけたのですごく嬉しい。これは、明日記事にまとめる。おやすみなさい。

20記事達成

crieitに書いてきたGatsbyJSの記事が20記事になった。crieitに投稿開始したきっかけはカノニカル対応しているからどんなモノかやってみようという実験的な気持ちが強かった。

Qiita嫌いになり個人ブログに移行する人がいる人が散見されるが、個人ブログなんてドメインとって検索結果に表示されるまで時間がかなりかかる。それなら、ドメインペナルティの無いカノニカルで投稿して少しでも読んで貰った方がモチベにもなったし良いと僕は思う。

カテゴリーを実装した

カテゴリー作成で1日かかってしまった。予定では午前中に終わる予定だったのでかなりの誤算だった。そのうち3時間は別フォルダの同じ名前のファイルをいじっていた。どうりで動かないわけだ。今回のカテゴリーはmarkdownを引っ張り込んでカテゴリーページをいじれるようにしている。ワードプレスにはこういうカテゴリーページをカスタマイズする機能あるテーマは触ったことがなかったので欲しかった。

ぼくのかんがえた最強のブログ環境

を目指して頑張っていきたい。

Darwerを実装した。

詳しくは明日記事にするがDrawerをやっと実装できた。結局、react-mdを使った。けど、これならスターター最初から使ったほうがよくないか？という疑問を抱えている。けどScssはやりたくない。

今日は1記事

今日は1記事書いた。これで、一通りのチュートリアル的なところはいったん終了。ここからある程度初心者でも簡単にカスタマイズできる爆速GatsbyJsブログテーマを作っていく方向で連載を続けていく予定。
+ srcにコンテンツは置かない
+ フォルダ管理のcssモジュール

とかチュートリアルと違うアプローチをしているのは、ある程度CSSできればカスタマイズしやすいように考えている。

AtomicDesign読んだ

Atomicデザインに興味があって勉強している。しかし、まだよくわかっていない。StoryBook面白いし開発しやすそうだけどブログくらいじゃ必要なさげ。

スマートスピーカー買った

スマートスピーカーを買った。GoogleHome ミニ。今までスピーカー貧弱だったので超いい。

目標2記事

今日はGatsby ImageとCSS moduleの意味について勉強しながら記事を書いた。Gatsby Imageは、画像処理の辛いところを引き受けてくれるのですごくありがたいけど躓きやすい。実際、僕も躓いて後回しにしていたんだけど、この記事のために再利用可能なコードを書いたらうまく動いた。うれしい。そろそろ、GatsbyNodeの記事も書かないといけない。

いっちゃっている人の話は面白い

今日は、仕事の勉強会に参加した。昆虫博士がゲストできたんだけど、専門が虫刺され。
実際、蚊やダニをコレクションして自分に刺して何分間血を吸うかとかの研究をしているらしい。控えめに言って頭おかしい。だけど、その話からは虫刺されに対するあくなき探求心とか熱量を感じてかなり面白かった。

子供って蚊に刺されるとめちゃくちゃ腫れるけど大人になると腫れなくなるのは刺され過ぎて免疫が鈍感になるからという話は本当に目からうろこだった。

2記事書いた

GatsbyJSについて2記事書いた。実は、JSはなんとなく触れるけど意味は分かっていない。これは、VueとかJSフレームワークに頼ってきた副作用みたいなもんだ。しかし、今更素のJSを勉強するのはつまらない。そういう意味でアロー演算子とかそういうのを立ち止まってインプットして記事書いて整理するのはすごく勉強なる。ちなみにこの連載はまだまだ続ける。
最終成果物としてGatsbyのBlogのスターターを目指している。Catnoseさんが作ったくらいかっこいいモダンなテーマ作ればGatsbyをブロガーが使ってくれるのではないかと期待しているのでそこまで頑張って開発していきたい。

目指せミニサイト

ブログにひたすら今は記事を詰めている。Gatsbyだけで100記事が目標。最終的には論文型サイトにGatsbyはスピンアウトさせたい。

アウトプットしていく

GatsbyJSは日本語ドキュメントが少ないので自分の得た知見をブログ記事として残していくことにした。デフォルトのスターターからブログをフルスクラッチ？でくみ上げていくまでを記事形式で書いていく予定。Starterも素晴らしいのがいっぱいあるけど、やっぱり馴染まないというか、他人の書いたコードは読めるけど再利用できない。ここは力不足。なんで自分で制御できるフルスクラッチで勉強がてらやってみる。ちなみに記事案だけで30越えてた。ボードでお世話になっているCrieitにも少し貢献できたらうれしい。これでGatsbyで技術書典かKindleとか出せたらうれしいな。
https://www.corylog.com/gatsby001/

保活広場のパフォーマンスがヤバい

GatsbyJSで保活広場を作っている。HTML生の状態よりも速い。
Laravel→Vue→Gatsbyと車輪の再開発をしているが、今回は制作期間2週間くらい。
今回のこだわりのポイントは、動的生成。今までは全都道府県のAPIでとってきてリストレンダリングしていたが、今回は1枚のCSVファイルから全て作っている。ユーザー登録しないサイトならこれだけで十分戦えるくらいの感触はある。
https://sharp-euler-f9bc8e.netlify.com/

保活広場の次

保活広場がもうすぐ落ち着きそうといってもデータ整形とか色々残ってるけど、Gatsbyのサイト制作を通して知見と言って良いかはわからないが大体こうすれば良い。Gatsbyチョットデキル位まではきているが細かいところで相変わらず引っかかるし、エラーで西野カナよりも泣くし震える。

年末に読んだのんくら本の実践をそろそろやっていきたい。

年末に読んだのんくら本をベースにAdSenseサイトを開発していきたい。昨年は、サイト売ってなんとかしのいだが、プログラミング勉強したりで全く収益性の高いアウトプットは出来ていなかった。そろそろ、そのあたりを意識して今年はしっかり実行に移していきたい。

得意はデータベース系のサイト構築なのでまずはGatsbyでそのサイト構築をしっかりやっていく。

やったこと

昨日、動的に市町村のURL作成を行ったんですが、_uniqでやると/undefined/undefined/が動的に生成されてしまいエラーが出て困っていた。
そこで、地味にJSを書いて解決。

人生初のconsole.logを使った。
でバックツールとか使っていたので地道だけど勉強なった。

ハマったところ

Error: ./src/templates/pref.js
12:19:49 AM: Module not found: Error: Can't resolve '../components/Citylist' in '/opt/build /repo/src/templates'
12:19:49 AM: resolve '../components/Citylist' in '/opt/build/repo/src/templates'
12:19:49 AM: using description file: /opt/build/repo/package.json (relative path: ./src/t emplates)
12:19:49 AM: Field 'browser' doesn't contain a valid alias configuration
12:19:49 AM: using description file: /opt/build/repo/package.json (relative path: ./src /components/Citylist)
12:19:49 AM: no extension
12:19:49 AM: Field 'browser' doesn't contain a valid alias configuration
12:19:49 AM: /opt/build/repo/src/components/Citylist doesn't exist
12:19:50 AM: .mjs
12:19:50 AM: Field 'browser' doesn't contain a valid alias configuration
12:19:50 AM: /opt/build/repo/src/components/Citylist.mjs doesn't exist
12:19:50 AM: .js
12:19:50 AM: Field 'browser' doesn't contain a valid alias configuration
12:19:50 AM: /opt/build/repo/src/components/Citylist.js doesn't exist
12:19:50 AM: .jsx
12:19:50 AM: Field 'browser' doesn't contain a valid alias configuration
12:19:50 AM: /opt/build/repo/src/components/Citylist.jsx doesn't exist
12:19:50 AM: .wasm
12:19:50 AM: Field 'browser' doesn't contain a valid alias configuration
12:19:50 AM: /opt/build/repo/src/components/Citylist.wasm doesn't exist
12:19:50 AM: .json
12:19:50 AM: Field 'browser' doesn't contain a valid alias configuration
12:19:50 AM: /opt/build/repo/src/components/Citylist.json doesn't exist
12:19:50 AM: as directory
12:19:50 AM: /opt/build/repo/src/components/Citylist doesn't exist
12:19:50 AM: [/opt/build/repo/src/components/Citylist]
12:19:50 AM: [/opt/build/repo/src/components/Citylist.mjs]
12:19:50 AM: [/opt/build/repo/src/components/Citylist.js]
12:19:50 AM: [/opt/build/repo/src/components/Citylist.jsx]
12:19:50 AM: [/opt/build/repo/src/components/Citylist.wasm]
12:19:50 AM: [/opt/build/repo/src/components/Citylist.json]
12:19:50 AM: @ ./src/templates/pref.js 5:0-46 11:93-101
12:19:50 AM: @ ./.cache/async-requires.js
12:19:50 AM: @ ./.cache/production-app.js

こんなかんじのエラーが出た
preflist.jsと小文字で書いていたのが原因だろう

やったこと

GatsbyJsでカテゴリページと子カテゴリーページの自動生成

CSV1枚で子カテゴリーまでの3層構造（県→市→保育園）のサイトをできないかと試行錯誤。
forEach2回で行ったのですが
奈良県/札幌市中央区
北海道/奈良市
みたいな重複が大発生。

ということで人生初のlodashデビュー

graphQLをで都市と県のslugを取得
_uniqで解決

ここまで3時間かかった。

やったこと

都道府県のパンくずリストを作成

失敗したこと

GraphQLのGroupでfiled Value取得は英語のみならすごく便利
逆に日本語名前と英語 Slugなどを同時取得は出来なそう。

todo

市町村のパンくずリスト作成