個人開発記録

2019-01-11に作成

やったこと

都道府県リストを動的に生成

起きたエラー

パンくずリストが死んだ

ToDo

パンくずリストの動的生成

基礎をひたすらアウトプット

Pythonを最近弄っている。反省点として基礎的なことをきちんと記録しアウトプットしている。文字数は多くならないけど、1記事1テーマに拘っている。あえて四則演算を4分割にした。これでSEO効果どうなるか見てみたい。開発してるの?と聞かれたら何も今は作っていない。ひたすらインプットと記事書いてアウトプット。

ブログを変えた

ブログを全部作り替えた。デフォルトからフルスクラッチ。ダサさに年代を感じるがそこは今後修正する。

電子書籍1000タイトルが半額の翔泳社祭

電子書籍1000タイトルが半額の翔泳社祭をやっていたのでReactの入門書を買った。

Blog作り直し

アドセンスブログ作ってみたけど思ったより速度が出なくてGatsbyのいいところが死んでしまった。設計見直して作り直す。styled-componentsを今度は使ってみる。

JavaScript コードレシピ集読んだ。

JavaScript コードレシピ集を読んだ。逆引きでめちゃくちゃ便利。1度読めば消化できるもんでもないけど、何度も辞書としてお世話になると思う。おススメ。

連載機能いい

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

今日は記事がお休み

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

20記事達成

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

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

image.png

image.png

カテゴリーを実装した

カテゴリー作成で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と小文字で書いていたのが原因だろう