開発環境
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シリーズ久々に再開です。以前、静的な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にトライ。それではいきましょう!
GitHubの続きです。前回はGitコマンド事始めでローカルにクローン→GitHubにプッシュ→GitHub Pages連携まで行いました。今回はその続きでブランチ作成→プルリク→マージ→ブランチ削除をやってみます。Issueとの紐付けも行いました。それではいきましょう!
Web開発環境シリーズ、以前、SourceTreeを使ってローカルのファイルをGitHubにアップし、GitHub Pagesで公開しました。今回はSourceTreeを使わずにこれをやってみたく。前回の記事で作ったメタ言語環境をアップしてみます。それではいきましょう!
gulpの続きです。前回、HTMLテンプレート(EJS)、AltCSS(Sass(SCSS))、AltJS(TypeScript)を同時にコンパイルしました。しかしEJSの空行を無くすgulp-replaceが動いていないようなので掘り下げてみます。正規表現の書き方を調べる機会になりました。それ…
デベロッパーツールの続きです。JSコードのデバッグ、前回はブレークポイントを設定しました。今回は次の工程、ステップ実行編です。処理をブレークすると何が嬉しいのか、ステップを実行すると何がわかるのか。実際にJSコードをデバッグしながら紐解いてい…
デベロッパーツール の続きです。JSコードのデバッグ、前回は調べたい処理の該当コードを特定する方法をまとめました。今回は特定したコードから調べたい箇所で処理を止めるブレークポイント設定編です。ステップ実行のメニューやサイドパネルの項目もまとめ…
以前、Choromeデベロッパーツールの基本的な使い方を記事にしました。今回はその続編でJSのデバッグです。まずは調べたい処理の該当コードを特定する方法(次回はブレークポイントを使ったデバッグ編です)。それでは行きましょう!
gulpの続きです。前回はSass(SCSS)とTypeScriptを同時にコンパイルする環境を作りました。今回はここにEJSを加えてメタ言語(HTMLテンプレートエンジン、AltCSS、AltJS)フルセットの同時コンパイル環境にてみます。それではいきましょう!
gulpの続きです。gulpでメタ言語を同時にコンパイルしたい。前回はその準備編としてSass(SCSS)を「src」フォルダから「dest」フォルダにコンパイルするファイル構成にしました。今回はここに他のメタ言語のコンパイル設定も加えていきます。まずはAltJSのTyp…
Expressの続きです。前回はExpressをインストールしてハローワールドのテキストを表示しました。今回はHTMLを表示してみたく。res.send()でHTMLタグは表示。さらにres.sendFile()でHTMLファイル、express.static()で静的サイト全体を表示します。それではい…
gulpの続きです。前回はbrowser-syncでSass(SCSS)環境の自動リロードをしました。かなり楽になったので、Sass(SCSS)だけでなくAltJS(TypeScriptなど)やHTMLテンプレート(EJSなど)も一緒にコンパイルできるようフォルダ構成をsrc→destという形に変更しま…
Expressの続きです。前回はExpressとJSフレームワークの違い、Expressの位置付けなどについて掘り下げました。その後、しばらくNode.jsを触っていましたが今回からExpressを触っていきます!まずはインストール〜ハローワールドまで。それでは行きましょう!
gulpの続きです。前回はwatch()メソッドで自動コンパイルを体験しました。今回はもう一歩進んでブラウザも毎回リロードするのではなくファイルの修正→保存のたびにブラウザも自動リロードをしたく。「browser-sync」を使います。Sass(SCSS)コンパイルも同時…
メタ言語の続きです。前回はMarkdownをGulpにコンパイルしました。コンパイル系でやってみたいことはある程度やれたので次は常時監視をやってみます。コンパイルを毎回実行するのは手間なのでファイルを修正するたびに自動的にコンパイルする仕組み。watch()…
メタ言語の続きです。前回はStylusをGulpでCCSにコンパイルしました。今回はMarkdownをHTMLにコンパイルしてみる。それでは行きましょう!
メタ言語の続きです。以前、こちらの記事でAltCSSとしてSass(SCSS)をコンパイルしたのですが、その後、Stylusも触ってみて便利に感じたので、Gulpでのコンパイルを体験したく。それではいきましょう!