流れが早いweb開発界隈ですが、スマホの台頭とブラウザの仕様が整って来たので、まずはシンプルにはじめましょう!

サーバーとブラウザ上で動くクライアント、それぞれいろいろな選択肢がありますが、ブラウザのために産まれたプログラミング言語「JavaScript」を、サーバーでも使うのが、学習しやすくオススメです。

Windows、Mac、Linux、どの環境の人でも大丈夫。まずは「Deno」をインストール!
(WindowsのPowerShellは「Windowsキー+R」を押して「powershell」と書いてエンター、インストールスクリプト「iwr https://deno.land/x/install/install.ps1 -useb | iex」を貼り付け、エンターで実行!)

公式サイト記載の方法に従ってインストールしたら、コンソールヤコマンドプロンプトを開いて、次のコマンドでバージョン番号が出ることを確認しましょう

$ deno --version deno 1.3.0 v8 8.6.334 typescript 3.9.7

続いて、何かディレクトリを作成し、移動

$ mkdir test $ cd test

そのディレクトリ内に、次の2行だけのプログラムを main.js として保存します

import { Server } from "https://code4sabae.github.io/js/Server.js"; new Server(8881);

実はこれだけでwebサーバープログラムできあがり。
動かす時は deno の run コマンド(-Aでファイルアクセス、ネットアクセスを許可)

$ deno run -A main.js

表示されるアドレス http://localhost:8881/ を開いてみましょう。
「Not Found」と表示されますね。(code4sabae-js は、Serverst で動いてます)

表示する HTML は、static ディレクトリを作成し、その中に index.html を作成します。(test/static/index.html)

<h1>Hello web!</h1>

ブラウザをリロードすると表示されるはず!

web開発の基本は、ブラウザとサーバーとの通信ですが、送受信ともにJSONを使って、すっきりシンプルに作りましょう。

下記のように、Serverクラスを派生した、MyServerクラスに api 関数を用意します。ひとまず受け取ったパスやパラメーターに時間を付けて返すテストします。

import { Server } from "https://code4sabae.github.io/js/Server.js"; class MyServer extends Server { api(path, req) { cont time = new Date(); return { path, req, time }; } } new MyServer(8881);

先程動かした Deno のサーバープログラムを Ctrl-C で止めて、上を押してエンター。もう一度実行します。2回目以降は即起動!

http://localhost:8881/api/ を開くと、JSONで「時間」が返ってきます。

次に、index.html を編集して、ブラウザからサーバーへデータを送り、サーバーからのレスポンスを表示してみます。 下記のように、JavaScriptのコードを埋め込みます。今どきJavaScriptは、type="module"!

<!DOCTYPE html> <html><body> <button id="btn">fetchJSON</button><br> <textarea id="ta"></textarea><br> <script type="module"> import { fetchJSON } from "https://code4sabae.github.io/js/fetchJSON.js"; btn.onclick = async () => { const req = { a: 123, b: "abc" }; const res = await fetchJSON("http://localhost:8881/api/test/v1", req); ta.value = JSON.stringify(res); }; </script> </body> </html>

ボタンを押すと、テキストボックスにサーバーからのレスポンスが表示されます!
ブラウザから送られてきた JSON をあれこれ加工すれば、みんなで使うwebサービスが開発できそうですね!

HTML/CSS/JavaScriptに関する復習はこちら → 「JSはじめのいっぽ

プログラムを止めてもデータは残しておきたい?
データベースを学習するのもいいですが、まずは手っ取り早くファイルに保存しておきましょう。 例えば、JSONデータを保存するには、次のように書きます(参考、builtin@stable - deno doc

Deno.writeTextFileSync("test.json", JSON.stringify(json));

メモリは多量にあるので、プロトタイピング中はデータをまるっと1ファイルに保存しておき、起動時に読み込むくらいで十分です。

みんなが写真をアップロードできるようにすると、webサービスは楽しくなります!
便利機能を用意しました。選ばれたファイルを自動的にいい感じのサイズにして、サーバーの data ディレクトリにアップロード。 アップロードされた URL を取得して、あれこれ使うことができます。

<!DOCTYPE html> <html><body> <h1>image uploader test</h1> <input id="file1" type="file" name="file1" multiple> <div id="imgc"></div> <br> <button id="btn">get file url</button><br> <textarea id="ta" style="width: 80vw; height: 10em"></textarea><br> <script type="module"> import { ImageUploader } from "https://code4sabae.github.io/js/ImageUploader.js"; const maxwidth = 1200; const maxsize = 1 * 1024 * 1024; const uploadurl = "http://127.0.0.1:8881/data/" //const uploadurl = "/data/" file1.onchange = async e => { for (const file of e.target.files) { const type = file.type; if (!type.startsWith("image/")) { continue; } const imgup = new ImageUploader(uploadurl); imgup.setFile(file, maxwidth, maxsize); imgc.appendChild(imgup); } }; btn.onclick = () => { const urls = []; for (let i = 0; i < imgc.children.length; i++) { urls.push(imgc.children[i].value); } console.log(urls); ta.value = urls.join("\n"); }; </script> <a href="./index.html">top</a><br> </body> </html>

大きすぎる写真は使いづらいので、縦横最大サイズを1024以下または、1MB以下にしています。maxwidth や maxsize で設定可能。

このように、ファイルをまとめて選んで、アップロードできます。手元のサーバー data ディレクトリを確認しましょう。

ファイルアップロードで使う画像を扱うあれこれ(Image, ArrayBuffer, Blob, Canvasなど)や、img-upload タグなどのプログラムも短めなオープンソース。 自分なりに改造するのも歓迎です!(src on GitHub)

Tweet
クリエイティブ・コモンズ・ライセンス
この作品は「Creative Commons — CC BY 4.0」の下に提供されています。
CC BY / @taisukef / アイコン画像 / プロフィール画像 / RSS