Node.jsとは
Node.jsとは、Javascriptをサーバーサイドで動かすための言語です。ProgateのNode.js学習コースでは、買い物サービスをつくる過程でNode.jsの使い方を学んでいきます。そして、Node.jsには便利な機能を簡単に使うためにまとめられているパッケージというものがあり、今回はExpressというパッケージを使います。
Node.jsの基本的な使い方
Expressの導入,サーバーの起動
まず、インターネットから自分のアプリケーションにパッケージをインストールします。そして、Expressを使うには、パッケージの読み込みと、実際に使用するための準備をする必要があります。
constexpress=require("express");constapp=express();サーバーを起動させるには、listenを用いてapp.jsファイルを実行します。
app.listen(3000);$node app.js
ページの表示の仕組み
/topのページにリクエストが来た時に、トップ画面を表示させるために以下のようにコードを書きます。このようにURLに対応する処理を実行することをルーティングと言います。ルーティングの処理では、req(リクエストの略)・res(レスポンスの略)の２つの引数を受け取ります。reqやresには、リクエスト・レスポンスに関する情報が入っています。また、ルーティングの処理でres.renderと書くことで、指定したビューファイル(今回はtop.ejs)をブラウザに表示できます。EJSとは、HTMLとJavaScriptのコード両方を記述できるNode.jsのパッケージです。
app.get("/top",(req,res)=>{res.render("top.ejs");});一覧画面を表示
/indexのウェブページにアクセスしたときに、一覧が表示されるように処理をしていきます。EJS内でJavascriptを書く時には<% %>,<%= >で囲む必要があります。<% %>で囲んだ時にはプラウザ上では表示されませんが、<%= >で囲んだ時にはプラウザ上で表示させることができます。forEachを使って配列のオブジェクトを一覧画面に表示します。
<%constitems=[{id:1,name:'じゃがいも'},{id:2,name:'にんじん'},{id:3,name:'たまねぎ'}];%><ul><%items.forEach((item)=>{%><li><span><%=item.id%></span>
<span><%=item.name%></span>
</li>
<%});%></ul>
データベース導入、表示
データベースを導入するために、MySQLを使います。mysqlパッケージを読みこむために、createConnectionを用います。createConnection内には接続情報のコードを書きます。また、データベースに接続するための情報を定数connectionに代入します。
constmysql=require('mysql');constconnection=mysql.createConnection({host:'localhost',user:'progate',password:'password',database:'list_app'});connection.queryを用いることで、Node.jsからデータベースに対してクエリを実行することができます。クエリ実行後の処理は2つの引数を取ることができ、第1引数のerrorにはクエリが失敗したときのエラー情報が、第2引数のresultsにはクエリの実行結果（ここでは取得したメモ情報）が入ります。クエリの処理の後にconsole.logを入れとくことで処理の結果をターミナルに表示させることが出来ます。renderの第2引数に{プロパティ : 値}と書くことで、EJS側に値を渡すことができます。
connection.query("SELECT * FROM items",(error,results)=>{console.log(results);res.render('index.ejs',{items:results});});作成機能
まず、app.postを使ってデータベースを変更できるようにします。フォームを作るときはHTMLのformを用います。 actionには送信先のURL、methodには「post」か「get」をルーティングに合わせて指定します。
app.post("/create",(req,res)=>{connection.query('SELECT * FROM items',(error,results)=>{res.render('index.ejs',{items:results});});});<formaction="/create"method="post"><inputtype="text"name="itemName"><inputtype="submit"value="作成する"></form>
フォームの値を受け取るにはapp.jsで下図のソースコードを追加する必要があります。
app.use(express.urlencoded({extended:false}));connection.queryの中にINSERTを書いていきます。フォームからの値をクエリに使うときは、VALUESに「?」を含めます。次に「connection.query()」の第2引数に渡したい配列を指定します。この配列の要素が「?」の部分に入り、実行されます。res.redirectを使って別のURLに再度リクエストさせる仕組みであるリダイレクトを適用させます。
app.post('/create',(req,res)=>{connection.query("INSERT INTO items(name) VALUES(?)",[req.body.itemName],(error,results)=>{res.redirect("/index");});});最後に
洗練さんでインターンの課題(Progate 学習コース Node.jsⅠ～Ⅳ)です。
Progate
最後に
現在ここでインターンしています。
まだまだ駆け出しですが頑張ります！やる気は人一倍です！
洗練