クモのようにコツコツと

フロントエンドエンジニア イイダリョウの技術ブログ。略称「クモコツ」

【Rails】hello_appをGitHubにプッシュ & Renderにデプロイ(Railsチュートリアル第1章クリア!)

Railsの続きです。前回はCodespacesとローカルに環境構築をしました。今回はローカル環境からGitHubにプッシュし、さらにRenderにデプロイしようと思います。それでは行きましょう!

【Rails】Codespacesとローカルに環境構築(Railsチュートリアル1章)

Rubyの続きです。前回はRubyの分岐や反復など制御構造について書きました。今回からはWebフレームワークRuby on Railsに入っていきます!Railsチュートリアルにトライします。初回は環境構築編です。それではいきましょう!

【Ruby】条件分岐、反復など(if、each)

Rubyの続きです。前回はクラスとオブジェクトを作成しました。今回はこのクラスを改造して、条件分岐、反復、配列などを使った処理を作ってみたいと思います。「20分ではじめるRuby」編は今回が完結になります!それではいきましょう!

【Ruby】クラスとオブジェクトを作成(class)

Rubyの続きです。前回はメソッドの定義と実行を行いました。今回はクラスとオブジェクトを作ります。クラスの継承というオブジェクト指向らしい内容にだんだん入ってきました。それではいきましょう!

【Ruby】メソッドの定義、実行(def〜end)

Rubyの続きです。前回は文字列や計算の出力を行いました。今回はメソッドの定義と実行をやってみたいとおもいます。メソッドはdefで始まりendで終わる書き方のようでした。それではいきましょう!

【Ruby】文字列や計算の出力(putsメソッド、Mathモジュール)

Rubyの続きです。前回は最新版のRubyをインストールするところまでをやりました。今回は文字列や計算の出力をやってみます。ターミナルのIRB(REPL)だけでなく、rbファイルからの実行もしてみました。rbファイルの実行ではputsメソッドの実行が必要でした。…

【Ruby】最新版Rubyをインストール 〜苦戦の記録〜(ありがとうGemini先生)

前回、6年ぶりのRyby再開計画を発動させました。今回はRubyの最新版をMacにインストールします。想像していたより苦戦しましたが、後半にGoogleの生成AI、Gemini先生にサポートしてもらいながら、なんとか成功しました。ありがとう!Gemini先生!

Rubyistに、俺はなる!? 6年ぶりのRyby再開計画発動

Rubyistに、俺はなる!?ということで、以前にRubyを触った記事が実に6年前の2018年! ただ、この時は本当に触りだけ、四則演算やputsメソッドで文字を出力しただけです。 この度、6年ぶりにRubyおよびRuby on Railsをがっつり触りたく、思い立ちました!

2023年の振り返りと2024年の目標

昨年の始めに1年の「振り返りと目標」を書きました。そこから1年たったので今年版の「振り返りと目標」を書きます。

【Tone.js & Next.js】Tone.jsでシンセジェネレーターを作った

Tone.jsでシンセサイザーの音作りができるシンセジェネレーターを作りました。シンセサイザーの音の作り方を理解したい&Tone.jsでシンセサイザーの音作りがどこまでできるのかを検証する目的です。当初思い描いていたものは一通り実現できました!

【React】Reactドキュメントを和訳する:Quick Start-1

Reactのドキュメントが新しくなりましたね。まだ日本語版はなく英語版のみで、翻訳ツールを使ってもいいのですが、英語の勉強も兼ねて自力で和訳していきます。まずはQuick Startの頭のところから。少しずつコツコツいきますー 【目次】 Reactドキュメント Q…

2022年の振り返りと2023年の目標

昨年の始めに1年の「振り返りと目標」を書きました。そこから1年たったので今年版の「振り返りと目標」を書きます。

【Three.js + Next.js】Three.js再始動!Next.js環境でThree.jsを動かすの巻

Three.jsがNext.js環境で動くか、試したところ、動きました!Three.jsのドキュメントのGet Startedがベースですが、個人的にやってみたかったこともいくつか追加。任意のタグの中にcanvasタグを配置、画面リサイズに対応してcanvasタグもリサイズ、ライティ…

【React/Next.js】大戦国・年表を作った(年表は随時追加中ー)

前回つくった「ビートルズDB」をベースにして「大戦国・年表」もつくりました。これによってNext.jsの動的ページの詳細設定やスプレッドシートでの重複チェックの知見が増えました。大戦国・年表は南北合一から元和偃武までの戦国時代(1392〜1616年)の年表…

【React/Next.js】「ビートルズDB」を作った(ビートルズの楽曲を検索できるアプリ)

以前、Next.jsの中でFetch APIでいろいろなデータを読み込みました。これをベースにもっとたくさんのデータを読み込んで検索ができるアプリ「ビートルズDB」を作りました。今回、Next.jsの動的ページのルーティング、動的APIのルーティング、APIのデータ整形…

【英語】TOEIC試験2回受けた後、もっと長期的にじっくり英語勉強をすることにした

前回、TOEIC試験に向けた勉強方法について書きました。その後、2回試験を受けました。その結果や自分の中での英語力の状況から、もっと長期的にじっくりと英語勉強をすることに決めました。

【英語】人生初のTOEIC受験に向けてやっている英語勉強内容

前回、自分がTOEIC受験に向けてスタートする決意と、これでの英語遍歴、公式問題集のテキストを実際の試験の時間通りに解いてみた結果を書きました。自分は2022年5月29日に人生初のTOEIC受験をします。そこに向けてやっている英語勉強の内容を書きます。

【英語】英語の偏差値30台だった自分がTOEIC600点を目指す(公式問題集を時間を測って解いてみた)

自分は今年、TOEICの600点を取りたいという目標があります。英語はもともと大の苦手で学生時代の偏差値は30台だったと思います。まずは公式問題集を本番と同じ時間通りに解いてみました。結果はやはりひどいものでした…。ここがスタート地点!あとは目標に向…

【React】Realtime Database、Firestore(&スプレッドシート)のデータをFetch APIで読み込む(Next.js環境)

Reactの続きです。以前、React環境からFirebaseのRealtime DatabaseをFetch APIで読み込みました。今回はNext.js環境からRealtime Database、Firestore、ついでにスプレッドシート(Google Sheets API)のデータを読み込んでみます。完成品をデプロイしたVerce…

2021年の振り返りと2022年の目標

2022年になったので去年の振り返りと今年の目標を書いてみたく思います。それではいきましょう!

【React & p5.js】「三角関数しらべMath」を作った(三角関数の理解を深めるアプリ)

Reactアプリの続きです。前回のスケール・プレイヤーまではReactとtone.jsを連携して音楽系のアプリを作っていました。今回はReactとp5.jsを連携し三角関数の単位円の交点をグリングリンと動かしました。グラフィック、モーション、3Dの制作に多用される三角…

【React & Tone.js】スケールプレイヤーを作った(いろいろなスケールを調べて音も聴けるアプリ)

Reactアプリの続きです。前々回はビート・プレイヤー、前回はコードプレイヤーを作りました。今回は音楽系の第三弾、スケール・プレイヤーを作りました。これで音楽3要素(メロディ、ハーモニー、リズム)が揃います。今回もTone.jsを使っています。それでは…

【React & Tone.js】コードプレイヤーを作った(鍵盤でいろいろなコードを調べるアプリ)

Reactアプリの続きです。前回はTone.jsを使ってビートプレイヤーを作りました。今回も音楽アプリでコードプレイヤーを作りました。以前CodePenで作成したコードプレイヤーをReact/Next環境に移植し、新機能を追加しました。それではいきましょう!

【React & Tone.js】ビートプレイヤーを作った(ビートとBPMを変更可能)

Reactアプリの続きです。前回は配色ジェネレーターを作りました。今回からTone.jsを使った音楽アプリ編に入ります。以前CodePenで作成したビートプレイヤーをReact/Next環境に移植してみました。それではいきましょう!

【React】配色ジェネレーターを作った(HSBでメインカラー、アクセントカラー、ベースカラーを割り出す!)

Reactアプリの続きです。前回はアスペクト比ジェネレーターを作りました。 今回もデザイン系のアプリで配色ジェネレーターを作りました!HSBモードでメインカラー、アクセントカラー、ベースカラーの3色を割り出せる配色ジェネレーターです。そのソースコー…

【React】アスペクト比ジェネレーターを作った(画像の縦横比率を計算するツール)

Reactアプリの続きです。前回までは「ジャンプ率ジェネレーター」をNext.jsで作り直していました。今回は「アスペクト比ジェネレーター」に取り組みます。以前こちらでまとめた主要なアスペクト比による画像サイズのCSS数値を調べられるツールにります。それ…

【React】ジャンプ率ジェネレーターをNext.jsで作り直した(Next.js + TypeScript + CSS in JS)

ジャンプ率ジェネレーターの続きです。以前、React環境でいったん完成しましたが、この時実現できなかったページごとのOGP設定を実現すべく、前回作成したNextスターターキットで再度作り直しました。これによってReact環境とNext環境ではCSS in JS(Styled-c…

【React】Nextスターターキットを作った-3. ページファイル編(Next + TypeScript + CSS in JS)

Nextの続きです。前回はNextスターターキットのコンポーネント&モジュールについてまとめました。今回は最終回、ページファイル編になります。Next.jsの複数ページ設定(/pagesフォルダ)を使った内容になります。それではいきましょう!

【React】Nextスターターキットを作った-2. コンポーネント編(Next + TypeScript + CSS in JS)

Nextの続きです。前回はNextスターターキットの全体設定編でした。今回はコンポーネントやモジュールの設定をまとめていきます。Reactアプリ作成でよく使う基本的な機能を組み入れました。それではいきましょう!

【React】Nextスターターキットを作った-1. 全体設定編(Next + TypeScript + CSS in JS)

Nextの続きです。前回はCreate Next App + TypeScript + CSS in JS環境を作りました。今回は以前作ったReactスターターキットをNext.jsで作り直し、挫折していたOGP問題を解決しました!今回は全体にわたる環境設定編です。それではいきましょう!