クモのようにコツコツと

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

開発環境

【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の設定情報は同じく環境変数…

【SQL】ターミナルからHerokuのPostgreSQLにCRUDする

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

【SQL】ターミナルからHerokuのPostgreSQLに接続する

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

【Express】HerokuとGitHubを連携して自動デプロイ(環境変数は除外)

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

【Express】Fetch APIでHerokuの環境変数を読み込んでブラウザに表示する

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

【Express】heroku configでHerokuに環境変数を設定(.envファイルとHerokuの同期)

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

【Express】環境変数とは?PATHを通すとは?けっきょく南極ローカルインストール!(Herokuコマンドでローカル起動)

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

【Express】Heroku CLIを使ってNode.js環境をHeroku上にデプロイする

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

【Epxress】データベース接続の比較(MySQLとMongoDB)

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

【JS】Fetch APIを使ってJSON ServerにCRUDする

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

【NoSQL】ターミナルからMongoDBにCRUDする(JS & JSONライク!)

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

【擬似NoSQL】ターミナルからAPIモックのJSON ServerにCRUDする

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

【SQL】ターミナルからMAMPのMySQLにCRUDする

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

【GitHub】Gitコマンドでブランチ作成→プルリク→マージ→ブランチ削除の記録(Issueもあるでよ)

GitHubの続きです。前回はGitコマンド事始めでローカルにクローン→GitHubにプッシュ→GitHub Pages連携まで行いました。今回はその続きでブランチ作成→プルリク→マージ→ブランチ削除をやってみます。Issueとの紐付けも行いました。それではいきましょう!

【GitHub】Gitコマンド事始め(ローカルにクローン→GitHubにプッシュ→GitHub Pages連携)

Web開発環境シリーズ、以前、SourceTreeを使ってローカルのファイルをGitHubにアップし、GitHub Pagesで公開しました。今回はSourceTreeを使わずにこれをやってみたく。前回の記事で作ったメタ言語環境をアップしてみます。それではいきましょう!

【gulp】gulp-replaceの引数に書かれている正規表現を掘り下げる

gulpの続きです。前回、HTMLテンプレート(EJS)、AltCSS(Sass(SCSS))、AltJS(TypeScript)を同時にコンパイルしました。しかしEJSの空行を無くすgulp-replaceが動いていないようなので掘り下げてみます。正規表現の書き方を調べる機会になりました。それ…

【デベロッパーツール 】JSコードのデバッグ(後編:ステップ実行編)

デベロッパーツールの続きです。JSコードのデバッグ、前回はブレークポイントを設定しました。今回は次の工程、ステップ実行編です。処理をブレークすると何が嬉しいのか、ステップを実行すると何がわかるのか。実際にJSコードをデバッグしながら紐解いてい…

【デベロッパーツール 】JSコードのデバッグ(中編:ブレークポイント設定編)

デベロッパーツール の続きです。JSコードのデバッグ、前回は調べたい処理の該当コードを特定する方法をまとめました。今回は特定したコードから調べたい箇所で処理を止めるブレークポイント設定編です。ステップ実行のメニューやサイドパネルの項目もまとめ…

【デベロッパーツール】JSコードのデバッグ(前編:コード特定編)

以前、Choromeデベロッパーツールの基本的な使い方を記事にしました。今回はその続編でJSのデバッグです。まずは調べたい処理の該当コードを特定する方法(次回はブレークポイントを使ったデバッグ編です)。それでは行きましょう!

【gulp】メタ言語(EJS、Sass(SCSS)、TypeScript)を同時コンパイルする!

gulpの続きです。前回はSass(SCSS)とTypeScriptを同時にコンパイルする環境を作りました。今回はここにEJSを加えてメタ言語(HTMLテンプレートエンジン、AltCSS、AltJS)フルセットの同時コンパイル環境にてみます。それではいきましょう!

【gulp】Sass(SCSS)とTypeScriptを同時にコンパイルする環境を作る

gulpの続きです。gulpでメタ言語を同時にコンパイルしたい。前回はその準備編としてSass(SCSS)を「src」フォルダから「dest」フォルダにコンパイルするファイル構成にしました。今回はここに他のメタ言語のコンパイル設定も加えていきます。まずはAltJSのTyp…

【Express】静的HTMLファイルの表示(res.sendFile()、express.static())

Expressの続きです。前回はExpressをインストールしてハローワールドのテキストを表示しました。今回はHTMLを表示してみたく。res.send()でHTMLタグは表示。さらにres.sendFile()でHTMLファイル、express.static()で静的サイト全体を表示します。それではい…

【gulp】Sass(SCSS)以外のメタ言語をコンパイルするためフォルダ構成(src→dest)

gulpの続きです。前回はbrowser-syncでSass(SCSS)環境の自動リロードをしました。かなり楽になったので、Sass(SCSS)だけでなくAltJS(TypeScriptなど)やHTMLテンプレート(EJSなど)も一緒にコンパイルできるようフォルダ構成をsrc→destという形に変更しま…

Express事始め(インストール〜ハローワールドまで)

Expressの続きです。前回はExpressとJSフレームワークの違い、Expressの位置付けなどについて掘り下げました。その後、しばらくNode.jsを触っていましたが今回からExpressを触っていきます!まずはインストール〜ハローワールドまで。それでは行きましょう!

【gulp】browser-syncによる自動リロード(watch()の分離、defaultでSassと同時に実行)

gulpの続きです。前回はwatch()メソッドで自動コンパイルを体験しました。今回はもう一歩進んでブラウザも毎回リロードするのではなくファイルの修正→保存のたびにブラウザも自動リロードをしたく。「browser-sync」を使います。Sass(SCSS)コンパイルも同時…

【Gulp】watch()メソッドでSass(SCSS)を自動コンパイル

メタ言語の続きです。前回はMarkdownをGulpにコンパイルしました。コンパイル系でやってみたいことはある程度やれたので次は常時監視をやってみます。コンパイルを毎回実行するのは手間なのでファイルを修正するたびに自動的にコンパイルする仕組み。watch()…

【HTML】MarkdownをGulpでHTMLにコンパイルしてみる

メタ言語の続きです。前回はStylusをGulpでCCSにコンパイルしました。今回はMarkdownをHTMLにコンパイルしてみる。それでは行きましょう!

【CSS】StylusをGulpでコンパイルしてみる

メタ言語の続きです。以前、こちらの記事でAltCSSとしてSass(SCSS)をコンパイルしたのですが、その後、Stylusも触ってみて便利に感じたので、Gulpでのコンパイルを体験したく。それではいきましょう!