今回はコメント削除のルーティングについて見ていきます。 CRUDのDの部分（delete）です。 早速記述していきます。 const express = require('express'); const app = express(); const path = require('path'); const methodOverride = require('method-ove…
今回はコメントの更新のルーティングについて見ていきます。 更新のルーティングで必要なHTTPリクエストメソッドは 「PUT」と「PATCH」です。 PUT・・・対象リソースの現在の表現全体を、リクエストのペイロードで置き換える PATCH・・・リソースを部分的に…
今回は特定のコメント表示のルーティングについて見ていきます。 ここで重要になるのは、特定のコメントと紐づいている一意の値です。 この一意の値はどんな値でも大丈夫ですが、重複しないことが条件となります。 基本的には「 id 」などでルーティングを設…
今回もルーティングの続きです。 CRUDの「Create：作成」の部分です。 具体的には ・新しいコメント作成するフォームをユーザーに提供するルーティング ・新しいコメントを作成するためのルーティング の2種類が必要になります。 では早速、「新しいコメント…
ルーティングについてまとめていきます。 ツイッターの簡易的なものをローカルで作成してみます。 新規コメントを入力でき、そのコメントが一覧で見れたり、コメントを削除したりなど・・・ 今回は、getメソッドを使用して「コメント一覧」のルーティングを…
REST ・・・ REST（Representational State Transfer）の原則に基づいて設計されたAPIのことです。 REST APIまたはRESTful API とも呼ばれています。 Webシステムを外部から利用するためのAPIであるので、REST APIはWeb APIの1つとも言われています。 REST A…
GETリクエスト・POSTリクエストについて深掘りしていきます。 大きな違いとしては、、 GETリクエスト ・情報の取得に使用 ・データはクエリストリングで送られる →URLを確認すれば送信しているデータがすぐわかる ・送れるデータの量に注意する必要がある PO…
パーシャル・・・テンプレートの一部を部品化して後の変更をやりやすくすることです。 ※テンプレート内の小さな部品を”パーシャル”と呼びます。 例えば、この下記のコードを全部のテンプレートで使用したい場合、コピペするのは大変です。また後からコード追…
イメージ（画像）、CSS ファイル、JavaScript ファイルなどの静的ファイルを提供する には、Express に標準実装されている express.static ミドルウェア関数を使うことにな ります。 構文から見てみましょう。 app.use(express.static('ディレクトリ名')); …
今回は、ejsでの「if文」や「for文」の書き方についてまとめていきます。 ejsの宣言等を行います。 const path = require('path'); const express = require('express'); const app = express(); const redditData = require('./data.json'); //下記を記述し…
今回はNode.jsのテンプレートエンジン「EJS」で使いやすい便利な構文をまとめました。 ・数、文字列、配列やオブジェクトの宣言と処理（JavaScriptと同じ） ・MTHLへ値の展開 ・ループや条件分岐 ・外部ファイルの読み込みやパラメータの引渡し などを行うこ…
EJS・・・ EJSとは主にJavaScriptで使用されるテンプレートエンジンです。 EJSを利用することでHTMLをヘッダーやフッターで分割して管理することやHTML内で ループ処理を書いて簡単に記述できるなどを実現できます。 また、「JavaScriptで使用される」という…
Nodemonで自動再起動する方法についてまとめていきます。 そもそもNodemonとは・・・ コード変更を監視して、自動でNode.jsのアプリケーションを再起動してくれるツールです。 実際にインストールから行ってみましょう。 ・グローバルにインストール npm ins…
そもそもルーティングとは・・・ アプリケーションが特定のエンドポイントに対するクライアント要求に応答する方法と して、URI (またはパス) と特定の HTTP 要求メソッド (GET、POST など) を決定するこ とです。 簡単に言うと、マッチするPATHを指定するこ…
Express・・・ Node.jsのための高速で革新的な最小限のWebフレームワークです。 Webアプリケーションを構築するのに役立ちます。 WebアプリケーションやAPIを構築するためのメソッドやプラグインが豊富なNPMパッケージとも言えます。 ここでライブラリとフレ…
extendsとsuper これらはクラスの継承方法になります。 ・extends //Petは親クラス class Pet { constructor(name, age) { this.name = name; this.age = age; } eat() { return `${this.name}がご飯を食べます`; } } class Cat extends Pet { meow() { retu…
class構文・・・ コンストラクタやメソッドを簡単に定義できるものになります。 コンストラクタはインスタンス(実体)を作成する関数、メソッドはオブジェクトの中に 定義される関数です。 つまりclass構文は、色々な関数をひとまとめにして、使い回せるよう…
コンストラクタ関数・・・ 新しくオブジェクトを作成するための雛形となる関数です。 記述するには専用のnew演算子を使います。 そもそも「new演算子」とは、、、 ・空のプレーンな JavaScript オブジェクトを生成 ・新しいオブジェクトにプロパティ(__proto…
ファクトリ関数・・・ 簡潔に言うと、オブジェクトを返す関数のことです。 ただ、コンストラクター関数のようにnewキーワードをつけるのではなく、関数そのも のがオブジェクトを返す関数のことを意味します。 早速サンプルを確認してみます。 //ファクトリ…
JavaScriptで「継承」を実現する仕組みでもある「プロトタイプ(prototype)」についてです。 説明の前に実際にサンプルで配列を作成し、確認してみましょう。 中身を確認すると、「 Prototype 」の記載があります。 この「 Prototype 」の中に、「 push 」や…
package.jsonについて触れる前に、npmのインストールについて簡単に再度説明します。 実は前回記述した npm install <パッケージ名> または npm i <パッケージ名> はローカルインストールというものになります。（dependenciesに追加される） プロジェクト単…
npm・・・ NODE PACKAGE MANAGERの略で、2つの意味があります。 ・他の開発者が公開している何万ものパッケージが管理されている場所 ・これらのパッケージをNode.jsのプロジェクトにインストールし、管理するためのコマンドラインツール というものです。 …
module.exports・・・ JavaScript(Node.js)において、あるファイルに存在する変数や関数を、別のファイルで実行する機能となります。 早速サンプルを書いてみます。 math.jsで宣言した変数をapp.jsで実行してみます。 （※厳密には変数ではなく定数です） ・a…
fsモジュールについて説明します。 「fs」は、ファイルシステムのことです。 Node.jsでファイルを操作するための公式モジュールとして提供されています。 ファイルを新規作成したり、読み込み・書き込みから追記・削除まで、一般的に必要な機能はあらかじめ…
前回の続きです。 コンソール同様にターミナルででJavaScriptのコードを記述していくのは大変です。 （for文やif文など） 紹介程度ですが、簡単にnode.jsでファイルを実行してみましょう。 まずターミナルでJavaScriptのファイルを作成してみます。 touch fi…
node.jsとは・・・ 簡単に言うとJavaScriptのランタイムです。 ここではnode.jsの紹介をします。 ※ランタイム アプリケーションの開発・実行の両方の機能を備えたソフトウェアから、開発の機能を省き、実効の機能のみを取り出したプログラムのこと JavaScrip…
今回はターミナルについて紹介します。 ターミナルはMacに備わっているCUI（キャラクターユーザーインターフェース）ツールです。 Windowsだとターミナルの代わりにCMD（コマンドプロンプト）とも言います。 このアイコンのものがターミナルです。 CUIは文字…
axios・・・ HTTP通信（データの更新・取得）を簡単に行うことができる、JavaScriptの外部ライブラリです。 今回はaxiosについて簡単にまとめてみます。 npmインストール $ npm install axios CDNでの利用（scriptの行） <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Axios</title> </meta></meta></head></html>
Fetch API・・・ JavaScript を使ってサーバーに HTTP リクエストを送信できるインターフェースで、指定した URL からリソース（データ）を取得することができます。 また、Promiseをサポートしています。 XMLHttpRequestと同様の機能を持ちますが、よりシン…
JSON・・・ 「JavaScript Object Notation」の略称です。 ソフトウェア同士でデータのやり取りをするためのテキストベースの共通のフォーマットになります。 データフォーマットにはJSONだけでなく、CSVや、XMLといったものもあります。 今回はJSONについて…
