Reactの続きです。前回はstyled-componentsでCSS in JSを事始めました。今回はUIフレームワークMaterial UIを事始めたいと思います。その名の通りGoogleが提唱するマテリアルデザインのスタイルを簡単に設定できるツールです。それではいきましょう！

Reactの続きです。前回はCSS ModulesでCSSとSass(SCSS)のローカルスコープを作りました。今回はstyled-componentsでCSS in JSを事始めてみます。CSS Modulesと同様にランダムな文字列がclass名が振られる形ですが、CSSファイル読み込みではなくJSファイル内…

Reactの続きです。前回はReactのいろいろなCSS設定方法を調べました。今回はその中の一つCSS Modulesを体験してみます。Create React AppにCSSとSass(SCSS)を読み込んで、ローカルスコープを作ります。それではいきましょう！

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

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

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

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

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

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

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

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

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

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

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

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

DB操作の続きです。前回はターミナルからHeroku CLIを使ってHerokuのPostgreSQLに接続しました。今回はここからテーブルを作成してデータをCRUD操作したく思います。それではいきましょう！

DB操作の続きです。以前はMAMPのMySQLに接続しました。他にもJSON-ServerやMongoDBなどに接続してみましたが、これらは全てローカル環境のデータベースでした。今回はクラウド環境であるHerokuのPostgreSQLに接続してみます。MySQLと同じRDBでSQL文で操作で…

Expressの続きです。前回はFetch APIでHerokuの環境変数を読み込んでブラウザに表示しました。今回はこのコードをGitHubとHerokuを連携して自動デプロイしたく思います。GitHubの方は環境変数を含まないコードにします。それではいきましょう！

Expressの続きです。前回はheroku configでHerokuに環境変数し、Expressで読み込んでブラウザに表示しました。今回はブラウザ側のFetch APIからHerokuの環境変数を読み込んでブラウザに表示してみます。それではいきましょう！

Expressの続きです。前回はHerokuアプリをローカル環境で表示できるようにしました。その際に環境変数やPATHについて調べました。今回は、Herokuの中に環境変数を設定して、その値をブラウザに表示してみます。heroku configコマンドを使います。それではい…

Expressの続きです。前回はHeroku CLIを使ってExpressアプリをHeroku 上にデプロイしました。今回は、このアプリをHerokuコマンドでローカル環境でも起動します。エラー表示になったため、環境変数やPATHなどについて色々調べてみました。それではいきましょ…

Expressの続きです。前回はローカル環境のMAMPのMySQLMySQLに対してFetch APIのデータを使ってCRUD処理しました。今回からはクラウドのPaaS環境であるHerokuにNode.js環境を作って行きたく。今回はローカル環境にHeroku CLI環境を作ってHerokuにデプロイする…

Expressの続きです。前回はMySQLのデータをbody-parserでブラウザに返しました。今回はいよいよFetch APIとMySQLの連携してブラウザのフォームから入力したデータをCRUDします。それではいきましょう！

Expressの続きです。前回はBody-parserを使ってFetch API（およびFormタグ）のデータを受け取りました。今回はさらにMySQLのデータをブラウザに返す動きを体験したく。それではいきましょう！

Expressの続きです。前回はMySQLとMongoDBに接続してみました。今回は「body-parser」を使って以前触れたFetch API（およびForm）のリクエストを受け取りレスポンスを返す動きを作ってみたく思います。それではいきましょう！

Expressシリーズ久々に再開です。以前、静的なHTMLファイルを表示するWebサーバを立てました。今回からデータベース編です。少し前にMySQLやMongoDBにターミナルから接続しましたが、今回はExpressから接続したく思います。それではいきましょう！

以前、Fetch APIを使ってJSON PlaceHolderにPOST送信してみました。今回は前々回に触れたJSON ServerをCRUD操作をしてみたく思います。JSON ServerにはDB機能だけでなくAPI機能も搭載されているので、そこに連携してみます。それではいきましょう！

DB操作の続きです。の続きです。前回はJSONファイルをDBにできるAPPモックの「JSON Server」をCRDUしました。今回はNoSQLのデータベース「MongoDB」をCRUDします。データがJSONライクで処理もJSライクというところが興味をそそります。それではいきましょう！

DB操作の続きです。前回はMAMPのMySQLをターミナルから操作しました。今回はAPIモックのJSON Serverにトライします。JSONデータをDBとして使うNoSQLライクなCRUD体験。curlコマンドを使ってターミナルから操作します。それではいきましょう！

以前、Adminerを使ってWordPressのMySQLを編集しました。今回はMAMP上のMySQLを編集します。MAMPのphpMyAdminは使わずにターミナルから操作してみます。DBの基本操作CRUDにトライ。それではいきましょう！