20210612 今日のプログラミング修行
昨日運動したから早く起きた。
喫茶店もまだ空いてないので、家でやる。
ちょっと鍵盤で遊んで練習してから、Next.jsの続き。
移していく中、ちょこちょこわからないとこがあるのでメモ
content={`https://og-image.now.sh/${encodeURI(
siteTitle
)}.png?theme=light&md=0&fontSize=75px&images=https%3A%2F%2Fassets.zeit.co%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg`}
なんかどっかから画像をとってきているのはわかる。
<meta name="og:title"
<meta name="twitter:card" content="summary_large_image" />
Twitterでツイートした時にプレビューみたいなのを表示されるやつ。勝手にTwitterがやってくれてると思ってたけど違うねんな。
ツイートにページ情報を表示する「Twitterカード（Twitter Cards）」を設定してみた | 株式会社グランフェアズ
多少調べてみてもわからないタイポは無視してサンプルコードコピペすることにした。
長いコードで<div>が閉じられてないとか言われると、ちょっと面倒だしあまり得る物がない。
{' '}がなんの理由で使われているかわからなかったが、明示的なスペースらしい。
こういう細かいのを調べて知るのは、ご褒美的にも楽しいんだけど、こういうのは飛ばして、まずは全体終わらした方がいいのかなとも考える。ただ、こういう山登りの道中を楽しむのって大事な気もするし、時と場合によって使い分けれたらよしとしよう。
チュートリアルでは読み飛ばすだけでいいと書いていたClassnameというライブラリ、ちょっとわかりにくかったので別の記事でなんとなくわかった。
[フロントエンド] React.jsのclassNameに、複数のクラスを簡単に指定する（Classnames利用） - YoheiM .NET
公式のGithubにあるマニュアルもチラッとみたけど、抽象思考が苦手なのかコードを読むのが下手なのかJavascriptの文法を知らないからか、あんまよくわかんなかった。
Macでのバックスラッシュの打ち方。
「option」キー ＋ 「¥」キー
ググると、なんかごちゃごちゃした情報になるよな。状況とかで違うから仕方ないんだけど、なんかもっと未来は素敵な検索ができて、それに合わせてブログとかの内容も最適化されることを期待しよう。
夕方、また進めてチュートリアル5/7まで進んだ。
20210611 今日のプログラミング修行
Progateで久々Javascriptをやってみた。
最近ちょっとプログラミングが面倒という感じが少しあったので、ハードルを下げた練習を再開することにした。
framer motionでアニメーションを実装してみた。
簡単なものだったけど、外部ライブラリーをどうやって取り込むかの練習になった。
サンプルコードを見て、どのような仕組みか読み取ったり。
難しかったけど、面白かった。
Next.jsのチュートリアルの続きをする。
2周目だからか、わからないものを調べたり、概念を1回目よりも理解できている気がする。いい感じ。
exportってなんなんだろうと思ってたけど、調べてたらわかった。
他ファイルでimportするために必要な動作なんだな。
初歩的なことだけど、コードの不明点が少しでも減ると楽しい。
CSSのホバーでのアニメーションもちょっと触った。
20210531 今日のプログラミング修行
フロントとバックエンドをどう繋げるのかがいいのかを考えるだけども大変なのに、他人にサイトを更新してもらうことを考えると、CMSも選ばないといけない。
ブラウザのタブがどんどん増えていく。前よりバサッと消すようにはなったけども。
◆調べ物の適当なメモ
Headless CMSというのを知った。
代表的なHeadless CMS10選｜メリット4つとデメリット3つをご紹介 | TECH+
サーバー周りをどうしたらいいのかと色々情報を調べていると、サーバーレスという単語も出てきて面白すぎる。意味わかんねえ。
作りたいイメージに一番近い記事を発見した。
Prismaはデータベースを触るのに便利そう。
WordPressだと自分でサーバーとか用意しないといけないけど、こういうサービスを使えばそこら辺がだいぶんと簡単になりそう。今っぽいな、なんとなく。
とりあえず、Next.jsのチュートリアルを進めるのが次の目標。その次はreactの公式以外のチュートリアル。
目標は自分のポートフォリオサイトの作成。
◆Next.js
昨日に引き続きNext.jsのチュートリアル。
3章の途中までいった。
CSSをNext.jsで使う方法をやってるんだけど、今まで仕事でCSS書いたことがないので、Next.jsのCSSの書き方のメリットはわからない。
とりあえずやっていこう。
20210530 今日のプログラミング修行
Railsガイドの続き。もうすぐ終わり
”マイグレーションを実行してstatusカラムを追加した後で、Articleモデルに以下を追加します。”
さらっと書いているんだけど、やり方書いてなくてちょっと笑う。(しばらくしたら出てきた。これ完全トラップじゃん…)
検索で出てきたやり方でやってみる。
データベースクライアントというものに入ると、モデルの内容などを詳しく見れるみたい。
rails dbconsoleで入れる。
エラーは出ないけど、尋常に遅くなったんだが、なんか間違ってコード書いてそう。
久々コワーキングスペースに来た。
とりあえずエラーを解決しよう。
DBのマイグレーション関係ではないかと考えた。
追加したカラムを削除しようとしたら、なんかエラーが出たので、
rails db:resetでリセットして再びマイグレーション。できた。
もう一度カラムをセットしてもいいけど、もう一回リセットして、マイグレーションファイルを直接いじった方がスッキリする？
サーバーがおかしくなったままだったので、zshのタブを消して再起動しようとすると、すでにサーバーは立ち上がってると。
起動プロセスの確認と、停止するためのコマンドを調べた。
①ポート番号を指定してチェック lsof -wni tcp:3000(lsof -i:3000でもいけるみたい)
②検索して出てきたプロセスを -9オプションで強制終了 kill -9 <プロセス番号>
再起動したが、記事数をカウントするクラスがおかしいのか、変だ。
無限ループになっているからか、なんだかMacbookAirがほんのり熱くなってきた。
とりあえず、サーバーを殺して、無限ループになってる部分を削除。
コードの仕組みがわかっていればもう少し探すのもありだけど、ググっても出てこないので今は深追い不必要と判断。
BASICユーザー認証のところは薄かったのですんなり終わった。
やっとRailsガイドを一周できた。
思ったよりたくさんのエラーにぶつかったな。
時間はあるので、すんなりいくよりは後々よかったかもしれない。
さて、次何をやろうかもう一度整理しよう。
何と組み合わせていくかってのが、どれがいいかわからんのよな〜
なぜかNode.jsのサーバーをExpressで立ち上げるチュートリアル的なのをやっていた。
その中で、今絶対知る必要のない、WebAPIモックサーバーというのを知った。
とりあえず立ち上げて、ローカルファイルの読み込みまでできたし、他のことをしてみようか。
色々調べていたが、ホスティングとかのことを考えるとさらにややこい。
RailsチュートリアルではHeroku使ってるし、そこら辺やりたいならRailsチュートリアルするのが良いかな。
Next.jsとGatsbyの比較に関していい記事があった。
ターミナルと JavaScript を少し触れるデザイナーの方等が「ポスト WordPress 」として使うのであれば Gatsby の方をおすすめします。
とりあえずNext.jsのチュートリアルやってみよう。やったら、そろそろ実際に何か作らないと収まりがつかなくなってきそうな気がしてきた。他人に見せれるものをそろそろ作りたい。
20210527 今日のプログラミング修行
Railsガイドを初めからやる。
そういやRails Girlsっていうチュートリアルがあったのを思い出した。
Djangoの時にDjango Girlsってのにお世話になったから、ちょっとどんな感じか見てみよう。
進めていると、rails generateができなくなったので、調べるとこんな記事が
記事にある通り、Springをストップしたらいけた。
これは一回目もそうだったけど、Rubyのコンソールから一つ目の記事を作った後にページを更新するとMigration pendingっていうエラーが出る。
マイグレートをもう一回するといけるんだけど、理由がよくわからん。
routesでresourcesを使って、rails routesをチェックしようとすると、ワーニングが出て、検索してもわからんし、あとarticle以外のルーティングについてもめちゃ出てくる。謎。
無視して進めることができるか、詰まるまで試してみよう。
.rbenv/versions/2.7.3/lib/ruby/2.7.0/x86_64-darwin20/stringio.bundle: warning: already initialized constant StringIO::VERSION
フォームビルダーを使ってコードが展開される時に、hidden属性のinputがいくつかあって、何かよくわからんので調べたらこんな感じらしい。
<input type="hidden">を使う目的は、ユーザーは知る必要がないけど、サーバーには送りたい情報を格納する
Railsガイドを読んで解説を試みているqiitaの記事があった。
仮想友達みたいでちょっと心強い。
2つ目のモデルを作ろうとしたらSpringが邪魔してきたので、ググった記事を参考にしたらSpringがないとエラーが出たので、下の記事を読んで、binn/railsのファイルからspringに関する行をコメントアウトした。
とりあえず、前謎に詰まって今回やり直すことになった7のコメントモデルを作るところまではいけた。一安心。
明日以降は残りの部分を終わらせる。
これ終わった後の、勉強のロードマップをしっかり考える必要がそろそろ出てきた。
railsガイド、2回目は気になる部分を深追いしすぎないくらいにちょっとずつ調べながらなので、一回目のただ写しているだけの時よりは大変だが楽しい。
20210526 今日のプログラミング修行
gem nokogiriのせいでrailsサーバーが立ち上がらない問題に再チャレンジ。
これを乗り切ったら再びチュートリアルに戻れるのだが、なかなか。
https://qiita.com/java74717470/items/40678916e5f386e3866e
gemfileに下記の行を追加。bundleインストールで変わるのか
gem 'nokogiri', '~>1.11.6'
bundle installでエラーが出たので、エラーの言う通りにbundle updateしたらバージョンが1.11.6に５からアップされたが、サーバーは立ち上がらず。
謎。
違う記事を見て、Rubyのインストールし直しを試みる。
https://qiita.com/a_ishidaaa/items/8cc14453289dba1413dd
BUILD FAILED (macOS 11.2.3 using ruby-build 20210510)
検索すると、同じような問題に出会う人が多いみたいで、対処方法が載っていた。
RUBY_CFLAGS=-DUSE_FFI_CLOSURE_ALLOC
これを頭につけてbrent installすると。
今やっているがどうだろう。
ちなみに、上のコマンドの意味を知りたくてググったけど0件表示。なんでだ。
検索方法を変えると出てきた。
ビルドの処理を制御するための、特別な環境変数
らしい。
他の人はできているみたいだが、僕は同じエラーが出た。
なんだよ…
2.6.7が入れれないので、2.7.3ならどうかと試してみる。
成功しても、チュートリアル系は確か2.6系なのでまた別のところで問題が起きる可能性が高そうだからもしうまくいったとしても嬉しくはないんだけれどな。
なんかこんなことを言っている人がいるな。M1 Macをウキウキして買ったが、こういう問題もあるのと知ったのはなかなか面白い。
RVMという単語が出てきたので、rbenvとの違いを検索してみると下記のような説明があった。
RVMを使う選択肢は今の所考えなくて良さそう。
やっぱりビルド失敗
ログを見にいったが、量が膨大。
なんかこんなことを言っているのがあったけど、関係あるのか
ld: warning: directory not found for option '-L/Users/kazumayasui/.rbenv/versions/2.7.3/lib'
なんかログの場所をよくみると、2.6.7のインストール失敗の時のログで、
コマンドラインを見直すと2.7.3はインストール成功していた。
素人考えだけど、2.6.7をインストールしようとしているのに2.7.3のフォルダが必要になっていたからうまくいかなくて、2.7.3ではできたんじゃないかな。
よし、とりあえず2.7.3を使ってrails newしてみるか。
参考にしてるqiitaの記事にrbenv rehashというコマンドがあったので調べると、とてもわかりやすい記事。ふわっと理解できた。
Rails newしてサーバーを立ち上げたが、また同じエラー…
見ていると、なんかRuby2.6.0のフォルダを見にいっているみたいなんだけど、rbenvで2.7.3をインストールしているはずだから、おかしいよねなんか。
railsがどこを見に行くのか、仕組みをもう少し調べたら解決しなくも無さそう。な気もする。
gem install railsをしたら、rails newができるようになったが、rails serverはやっぱり同じようにだめ。
railsアプリ内の.ruby-versionの中身を、2.7.3に書き換えてみた。
これでBundle installをやってみる
できたので、Rails serverをすると、こんなエラーが
Warning: the running version of Bundler (2.2.17) is older than the version that created the lockfile (2.2.18). We suggest you to upgrade to the version that created the lockfile by running `gem install bundler:2.2.18`.
Your Ruby version is 2.6.3, but your Gemfile specified 2.7.3
なんでインストールされていないversion2.6.3が指定されているのだ。一回再起動でもしてみようか。
rails newについてもう一度調べる。
とりあえず再起動して、which gemをしたら、rbenvのものを使っていることがわかった。
20210522 今日のプログラミング修行
朝
MacでRailsガイドを初めからやり直そうとするが、環境を変にいじってしまっていたのか、railsサーバーが立ち上がらない。Gemの関係っぽい(nokogiri周辺)っぽいが、その他も問題ありそうで、色々1時間くらい格闘するがうまくいかず諦める。
夜
Winでやればいいかと思い環境を構築するところからスタート。
sqliteのインストールがMacと違って自分でフォルダにファイル置いてPATHの設定やったりしないといけなくて面倒。
railsサーバーは立ち上がったが、generate controllerらへんの挙動がなんか変。
viewフォルダは作成されるのに、erbファイルが作成されなかったり。
チュートリアルのコマンドの頭に"ruby"をつけないといけなかったり、なかなかめんどい。
macをクリーンインストールしたいが、homebrewとかNodeとかをもう一度入れ直したり、Garagebandの音源をまた入れ直したりするのが面倒。Docker使ったりなんとかできるようにしたい。
