クモのようにコツコツと

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

開発環境

【React】Next.jsのデプロイ:Vercelがまったく・カン・タンだ!

Next.jsの続きです。前回はNext.jsを事始めでインストール、ページ設定、表示まで行いました。今回はクラウド上にデプロイします。Reactと同じくGitHub Pagesにデプロイしたかったのですが検討の結果、Vercelがシンプルに設定できました。それではいきましょ…

【React】OtherページをAboutページに変更、ルーティング変更(Reactスターターキット)

Reactの続きです。前回はstyled-componentsにフックの値を設定し、動的にスタイルを変更しました。ジャンプ率ジェネレーターが完成しました!この時、otherページをaboutページに作り替えたのですが、aboutページについては今後も使いそうなので、Reactスタ…

【React】文字ジャンプ率ジェネレーターを作るシリーズ始動!(環境構築編)

Reactの続きです。前回はReact + TypeScript + CSS in JS環境のスターターキットを作りました。今回からこれを元にアプリ作りに入っていきます。最初に作りたいのは文字ジャンプ率ジェネレーター!今回は初回ということで、既存のGitHubリポジトリをクローン…

【React】React + TypeScript + CSS in JSスターターキットを作る(アプリ作る人に俺はなる!)

Reactの続きです。前回まで、メタ言語(EJS + Sass(SCSS) + TypeScript)スターターキットの内容をReact + TypeScript + CSS in JS環境で再現してきました。今回はこれをリファクタリングして、今後ReactでWebアプリを作るためのスターターキットを作りたい…

【React】フックとRealtime DatabaseをFetch APIで連携(React + Firebase環境)

Reactの続きです。前回はフック(React Hooks)とjson-serverをFetch APIで連携しました。今回はフックとRealtime DatabaseをFetch APIで連携します。Create React App環境にFirebaseをインストールしてクラウド上のRealtime Databaseのデータを読み込めるよう…

【React】フックとjson-serverをFetch APIで連携(Reactライフサイクルの理解)

Reactの続きです。前回はフック(React Hooks)を事始めました。基本のフックuseState、useEffect、useContextを体験しました。今回はこのフックにFetch APIを使ってjson-serverのデータベースを連携してみました。最初、処理実行のタイミングがうまくいかず、…

【React】ピュアなTypeScriptモジュールを追加してみる(Reactとメタ言語の比較-6)

Reactの続きです。前回はstyled-componentsのcss helperでスタイルを継承し、CSS設定を完成させました。今回はTypeScript編。以前メタ言語スターターキットで作ったTypeScriptのモジュールをReact環境に追加してみます。処理の対象はReactの仮想DOMです。そ…

【React】styled-componentsのcss helperでスタイルを継承(Reactとメタ言語の比較-5)

Reactの続きです。前回はstyled-componentsのcreateGlobalStyleでbodyタグにCSS設定をしました。今回はcss helperでスタイルを継承します。前回一回リセットされたCSSスタイルは今回復活できました♪Sass(SCSS)との比較も行います。それではいきましょう!

【React】styled-componentsのcreateGlobalStyleでbodyタグにCSS設定(Reactとメタ言語の比較-4)

Reactの続きです。前回はJSONデータをJSXに読み込んで表示しました。今回からはCSS編に入っていきます!メタ言語スターターキットのSass(SCSS)の設定をCSS in JSに組み込んでいきます。今回はstyled-componentsのcreateGlobalStyleでbodyタグにCSSを設定しま…

【React】JSONデータをJSXに読み込んで表示する(Reactとメタ言語の比較-3)

Reactの続きです。前回はreact-helmetでheadタグの中身を動的に打ち替えました。今回はHTMLのテキスト部分を外部JSONデータからJSXに読み込みます。インラインのタグを認識するためにdangerouslySetInnerHTMLを、JSX内でループするためにmap()を使いました。…

【React】react-helmetでheadタグの中身を動的に打ち替える(Reactとメタ言語の比較-2)

Reactの続きです。前回は以前作成したメタ言語スターターキットの内容を移植してHTML部分をコンポーネント化しました。今回はheadタグを動的に打ち替えたく、react-helmetを使ってみます。それではいきましょう!

【React】HTMLコンポーネント化(Reactとメタ言語の比較-1)

Reactの続きです。前回はReact + TypeScript + CSS in JSの開発環境を作りました。今回から以前作ったメタ言語スターターキットの内容をReact環境に移植してみます。まずはHTMLのコンポーネント化から。それではいきましょう!

【React】React + TypeScript + CSS in JSの開発環境を作る(Gitエラー対処も)

Reactの続きです。前回はReact + TypeScriptの開発環境を作りました。今回はここにさらにCSS in JSも追加してみます。TypeScript環境でCSS in JSを動かすには「@typesパッケージ」が必要なこともわかりました。また、Git設定でいろいろなエラーに遭遇したの…

【React】React + TypeScriptの開発環境を作る(デプロイまで)

Reactの続きです。前回までReactのいろいろなCSS環境を試しました。今回からはReactとTypeScriptの開発環境を作ります。Create React AppでのTypeScript導入方法があったのでトライ。GitHub Pagesのデプロイまでできました。それではいきましょう!

【Firebase】Authenticationでログイン設定を作る(メール/パスワードによるユーザー認証)

Firebaseの続きです。前回はRealtime DatabaseにFetch APIでCRUD操作しました。作ってみて気がついたがこのままだと誰でもデータを編集できちゃう。そうなってくると必要なのはユーザー認証設定。Authenticationで実現できるようなのでトライ。ドキュメキュ…

【Firebase】Realtime DatabaseにFetch APIでCRUD操作する

Firebaseの続きです。前回はRealtime Databaseにブラウザから直接CRUD操作しました。この時はset()などRealtime Databaseに予め用意されたメソッドを使いました。その後、APIのURLがあることがわかったので、Fetch APIによるCRUD操作にトライ。それではいき…

【Firebase】Realtime Databaseにブラウザから直接CRUD操作する

Firebaseの続きです。前回はアプリを追加してFirebase CLIでFirebase Hostingにデプロイしました。今回はRealtime Databaseを設定してブラウザから直接CRUDしてみます。Firebaseドキュメントが膨大で自分的には結構難産でした。内容はいつもDB事始めでやって…

【Firebase】アプリを追加してFirebase CLIでFirebase Hostingにデプロイする

Firebaseの続きです。前回はFirebaseのドキュメントを読み始めて、プロジェクトを作成しました。今回はアプリを追加してFirebase CLIでFirebase Hostingにデプロイしてみます。ドキュメントの梯子旅になりましたwそれではいきましょう!

Firebaseを事始めるためにドキュメントを読み始める(プロジェクト作成も)

Firebaseはブラウザから直接操作できるデータベース。存在は前から知っていたがなかなか手を付けられず。周回遅れでもいいからどんなものか知っておきたくドキュメントを読み始めています。内容が結構膨大でどこからつけていいのやら…とにかく整理してみます…

【メタ言語】フロントエンド開発スターターキットを作った(EJS、Sass(SCSS)、TypeScript)

メタ言語の続きです。前回はdelを使って破壊神になり、ファイルを削除しました。今回はこれまで作ってきたコードを元にフロントエンド開発スターターキットを作ります。メタ言語(EJS、Sass(SCSS)、TypeScript)のコンパイル&画像圧縮を行う環境です。それで…

【gulp】我、破壊神となりてdelをもってファイルを削除すべし

メタ言語の続きです。前回はgulp.tusk()をgulp4が推奨する関数の形に書き換えました。今回はファイルの削除!コンパイル後にファイルの削除やリネイムが反映されなかったため。delを使います。それではいきましょう!

【gulpfile.js】gulp.task()を関数化(←gulp4推奨)他、リファクタリング

メタ言語の続きです。前回はimageminを使ってメタ言語コンパイル環境で画像圧縮も実行しました。今回はgulpfile.jsの中のgulp.task()をgulp4で推奨されている関数の形に変更します。その他にもいくつかリファクタリングしました。それではいきましょう!

【gulp-imagemin】メタ言語コンパイル環境で画像圧縮も実行する

メタ言語の続きです。前回は外部のJSONファイルをTypeScriptで型付で読み込みました。今回はgulp-imageminなどをのパッケージを使って画像の圧縮設定もしてみます。それではいきましょう!

【TypeScript】外部のJSONファイルを型付で読み込む

メタ言語の続きです。前回はgulpでwebpackを起動してモジュールをバンドルしました。今回は、その中のデータ部分のモジュールを外部JSONファイルにして、それをTypeScriptで読み込みます。データに型も設定します。それではいきましょう!

【Express】GitHub PagesからHerokuのPostgreSQLへCRUD操作(CORSエラー対策も)

Expressの続きです。前回はbody-parserでフォームからHerokuのPostgreSQLにCRUD操作しました。今回はGitHub PagesからCRUD操作します。別ドメインの問題でCORSエラーになったため、Expressのcorsモジュールでアクセス許可の設定もしました。それではいきまし…

【GAS】スプレッドシートのデータをGASで読み込んでWebページを作る(CSS、JS設定も)

GAS、はじめました。GAS(Google Apps Script)はスプレッドシート(略してスプシ)などの処理を自動化するイメージだったが、Webアプリも作れるようでやってみました!まずはスプシのデータをWebページに読み込んで、CSS、JSも設定してみました。それではいき…

【Express】body-parserでフォームからHerokuのPostgreSQLにCRUD(後編)

Expressの続きです。body-parserでフォームのデータを連携してHerokuのPostgreSQLにCRUD操作する。前回は前編としてPostgreSQLに新規テーブルを作ったりbody-parserを設定しました。今回は後編としてCRUD操作を作ります。それによって見えてきた次の課題もあ…

【Express】body-parserでフォームからHerokuのPostgreSQLにCRUD(前編)

Expressの続きです。前回はFetch APIでExpressのAPIを叩いてHerokuのPostgreSQLのデータを表示しました。今回はbody-parserでブラウザのフォームと連携してCRUD操作をします。今回は前編で新規テーブル作成やモジュールインストールなど(後編はCRUDです)。…

【Express】Fetch APIでAPIを叩いてHerokuのPostgreSQLのデータを表示する

Expressの続きです。前回はHerokuのPostgreSQLのデータをサーバ側のEJSファイルで読み込んでブラウザに表示しました。今回はブラウザ側からFetch APIでAPIを叩いてデータを表示します。それではいきましょう!

【Express】HerokuのPostgreSQLのデータを表示する

Expressの続きです。前回はHerokuとGitHubを連携して自動デプロイしました。環境変数をGitHubのソースから除外しつつHerokuで環境変数の値を表示しました。今回はHerokuの標準DBであるPostgreSQLのデータを表示したく思います。DBの設定情報は同じく環境変数…