クモのようにコツコツと

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

ReactのCSS設定方法について調べたこと(className属性、style属性、CSS Modules、CSS in JS、CSSフレームワーク)

Reactの続きです。前回はReduxの状態管理を行いました。今回からは、ReactでのCSS設定をいくつか試してみたく思います。初回はCSS設定方法について調べたことをまとめます。className属性、style属性、CSS Modules、CSS in JS、CSSフレームワークを比較しま…

【メタ言語】フロントエンド開発スターターキットを作った(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です)。…