日本語プログラミング言語でWebアプリを作ろう☆

皆さんのプログラミングのルーツは何ですか？
私は「日本語プログラミング言語 ひまわり( https://kujirahand.com/himawari/ )」です。

2023年ももうすぐ終わりですね。年末は実家に帰る人も多いのではないでしょうか。そういうわけで、**私のプログラミング人生における実家のような存在** ひまわりを使って、簡単なWebアプリを作ってみました（無理やりすぎる導入）

## ひまわりとは？？
![「himawari.jpg」を、画像表示。文字色は、オレンジ色「ひまわりだよ」と、表示。と表示されたエディタとひまわりの画像が表示された実行結果画面](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2730661/58f1ae81-78dc-c22e-55d4-3cb36173d50a.png)
ひまわりの開発環境

ひまわりとは、日本語を使ってプログラムを書くことができる「日本語プログラミング言語」というジャンルに属する言語です。似たような言語には他に「なでしこ」「プロデル」などがあります。

日本語プログラミング言語というと、なんとなく「初学者向け」という感じがして、勉強用の言語みたいなイメージを持たれがちですが、ひまわりは「誰でも簡単に仕事や定型処理を効率化できるプログラムが書ける言語」みたいなコンセプトだったかと思います。
（作者のコメントはhttps://kujirahand.com/himawari/hima-book/index.htm 等に書いてあります）

Win32向けのデスクトップアプリケーションを手軽に開発できる素晴らしい言語です。

:::note warn
注意
ひまわりは既に開発終了した言語で、HiDPI環境に対応していない、HTTPS通信に対応していない等、2023年現在も引き続き使用するには不便な部分があります。そもそも対応OSはWindows98~Vistaまでで、Windows7すら正式対応していません。
:::

## ひまわりでWebアプリを作ってみよう

先に示した通り、ひまわりはWindowsのデスクトップアプリを作るための言語なので、HTTPサーバーを動かしたり、リクエストをパースしたりするような便利な機能はありません。使えそうなのは簡単な文字列処理機能とTCP/IP通信の関連機能くらいです。

### HTTP通信ができるようにする

早速、超簡易的なWebサーバーを立ててみましょう。
```
TCPポート=10001
TCPサーバー起動
受信ラベルに、TCPサーバー受信処理設定
待機

＊受信ラベル
// TCP送信元: IPアドレス,HOST名
// TCP文字列: 通信内容（今回だと、HTTPリクエスト内容）
TCP送信元を、「,」で、区切る
クライアントは、それ＃０

「｛クライアント｝から｛TCP文字列#0｝の要求」を、表示

レスポンスは、「HTTP/1.1 200 OK
Content-Type: text/plain

｛今｝にリクエストを処理しました」
クライアントへ、レスポンスを、TCPサーバー送信
クライアントを、TCPサーバーから切断。
待機
```
「それ」というのはひまわりの一時変数で、命令の計算結果が保管されます。例えば、以下のような感じですね。

```
「今日の元気は？」を、「元気\nまあまあ」の、ボタンで選択 // 元気 or まあまあ のいずれかを選択するダイアログが出てくる
それを、表示 // 押した結果が画面に表示される
```

めちゃくちゃ日本語なので、なんとなく流れは分かりやすいのではないでしょうか？

動かしてみると、こんな感じになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2730661/17b5427f-b91e-1b91-373f-3a09f567cdc5.png)

### ルーティング

次にルーティングの実装をしてみましょう。
HTTPリクエストの1行目は、以下のようになっています。
```
{メソッド} {ルート} {プロトコル}
// 例: "GET / HTTP/1.1"
```
なので、1行目の真ん中の値を見れば、クライアントの要求しているページが分かります。
これを使って、要求のルーティングを行ってみましょう。

```
// TCP文字列 = HTTPリクエスト
TCP文字列#0を、「 」で、区切る
リクエスト内容は、それ // e.g. ["GET", "/", "HTTP/1.1"]のような配列

リクエスト内容#0で、条件分岐
「GET」の時、リクエスト内容#1を、GETルーティング
その他の時、それは、404

それで、条件分岐
404の時、ホストへ、『<html><body>404 Not Found</body></html>』を、404で、レスポンス送信
その他の時、ホストへ、それを、200で、レスポンス送信


待機

＊GETルーティング(?を)
引数取得

それで、条件分岐
「/」の時、（
	トップページ取得 // 「それ」にトップページのHTMLが返されるラベル
    戻る
）
その他の時、（
	それは、404
    戻る
）

戻る
```

これで、「/」にアクセスした時はトップページを、それ以外にアクセスしたときは404を返すようになりました。
ひとまずGETリクエストは基本こんな感じで捌けるようになりましたね。

:::note warn
注意
これだけだと、URLにクエリパラメータ等がついた場合等に正常なルーティングが出来なくなりますが、今回は記事が冗長になってしまうため割愛します。
:::

### POSTに対応させる

***Webアプリ***と名乗るからには双方向のコミュニケーションができた方が良いですね。ですので、ブラウザからのPOSTリクエストに対応させましょう。

新しいリクエストの分岐を追加します。先のコードの`リクエスト内容#0で、条件分岐`の下に以下を追加します。

```
// TCP文字列 = HTTPリクエスト
// リクエスト内容: ["POST", "/", "HTTP/1.1"]のような配列

「POST」の時、（
    TCP文字列の、行数
    それは、それ-1
    リクエスト内容#1を、TCP文字列#それと、POSTルーティング
）
```
`TCP文字列#それ`はHTTPレスポンスボディを参照しています。

`リクエスト内容#1`(ルートパス)と`TCP文字列#それ`(レスポンスボディ)を引数にして`POSTルーティング` ラベルを呼び出していますね。

次に`POSTルーティング`ラベルを実装して行きましょう。

```
＊POSTルーティング(?を、?と)
引数取得

ルートは、それ#0
それ#1を、「--url-input」で、NKF変換。 // nkf(Network Kanji Filter)を使ってURLをデコードする
それの、「=」を、「,」に、置換
それを、「&」で、区切る
内容は、それ

// XSS対策
内容で、「<」の、出現回数。
もし、それが、1以上ならば、（
	それは、「使用不可な文字が含まれています」
    戻る
）

ルートで、条件分岐
「/」の時、（
	内容を、投稿処理 // DBに内容が保存され、投稿完了画面が「それ」に格納されるラベル
    戻る
）
その他の時、（
	それは、404
    戻る
）

戻る
```

以下の部分がちょっと分かりづらいので補足します。
```
それ#1を、「--url-input」で、NKF変換。 // nkf(Network Kanji Filter)を使ってURLをデコードする
それの、「=」を、「,」に、置換
それを、「&」で、区切る
内容は、それ
```
これは力技でクエリパラメータを2次元配列(`内容`)に格納する処理です。

:::note warn
注意
POST内容に`,`や`=`が含まれていた場合は正常に動作しなくなると思うので、本当はもっと良いアプローチをするべきです。
:::

`name=avaice&message=hello`のような文字列を
```
name,avaice
message,hello
```
のように書き換えています。

:::note
補足

ひまわりでは、2次元配列は以下のような文字列として表現されます。
```hmw:変数:Foods
みかん,100
うなぎ,1500
アジフライ,150
```
`Foods#1#2`なら「150」といった感じです。ちょっと紛らわしいのは、インデックスの指定がJavaScriptやC言語と逆で`Array[横][縦]`の向きであることです。

:::

これでGET, POSTどちらも行えるようになりましたね。

## 実際に完成したデモ

上記のようにWebサーバーを実装して、簡単な掲示板を作ってみました。

https://himabbs.cho-ice.xyz/

![himabbs.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2730661/e171a15f-598a-6edc-8968-636ba6eff3ed.gif)

ソースコードは以下にあります。

https://github.com/avaice/himabbs/tree/main

ぱっと見日本語で書かれたWebアプリとは思えないですね！？

ちなみにこれは自宅サーバーでデプロイしているのですが、OSがUbuntuなのでWineを使ってサーバーを動かしていますｗ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2730661/20297580-6434-0acb-4e82-7e02cf3146cf.png)

## おわりに

今回は「日本語プログラミング言語でWebアプリを作ろう」ということで面白半分で掲示板を作ってみました。

しかし、ひまわりのような日本語プログラミング言語が真に輝くのは定型的な文章整形処理（一意なフォーマットで渡された文字列から、文章を生成する・・のような）や自動化処理（マウスやキーボードを自動操作する）といった場面です。

ひまわりはサポートは既に終わっているので使用は自己責任ですが、「なでしこ」や「プロデル」等ほかの言語は今でも活発に開発が続けられています。この機会に是非触れてみてはいかがでしょうか！？