「svelte」の記事 - Crieit

Svelte、そのドキュメントは驚きの読みやすさ！的な。

2021-12-23T00:11:52+09:00

この記事は、Svelte Advent Calendar 2021の14日目の投稿が空いているのでは？とおもったので22日の夜にこれから書くぞとおもって勢いで登録した記事です。

Svelte、そのドキュメントは驚きの読みやすさ！的な。

これはSvelteという、JavaScriptとかHTMLとかCSSとかを一緒に書いたらWebアプリケーションになるやつ※について書かれている、実体験に基づいたドキュメンタリーです。

※ReactとかVueとかAngularが有名だよ

あらすじ

2021年3月、Vue歴三年(適当)、血の涙を流しながらVueを3にしてjQuery製のアプリケーションをリプレイスしたワイは、もうすでに限界が来とったんや。

新たなる力を求めて

精神に限界を感じたワイは、新たなる力を求めて自然とViteに手を伸ばしたんや。
そしたら、すぐさまボコボコにされた。なぜなら、ViteもVueと同じくEvan Youだったからなんや。
始祖Evan Youの何気ないAPI Referenceがワイの心を傷つけたんやなあ。※

※これはワイの知能がEvan Youのドキュメントパワーを下回っているからなんや。個人の感想なんやで。

Snowpack現る

神Referenceにボコボコにされながら薄れゆく意識の中でワイは見たんや、Comparisons with Other No-Bundler Solutions ... Snowpackと書いてあるのを。
命からがらViteのページを閉じ、Snowpackのページを開くことで安堵したワイは遂にそこで見てしまったんや、Getting Started with Svelteと書いてあるのを！！！

秘密なんや

ワイはそこでチビってしまった。何をチビッたのかは秘密なんやけどな。なぜなら、そこに書かれている通りに、GettingをStartedしたらSvelteとwithで、簡単にSvelteのロゴマークが画面に表示されてしまったからなんや。
衝撃が脳裏を駆け巡る。
そしてワイはGoing furtherした。

Svelte、それは新たなる宇宙域

西暦2021年4月、Going furtherしたワイはhttps://svelte.devに来ていた。※
※これは後から知ったが日本語訳サイトも存在する。皆はこっちも読もう！

ここでワイはTutorialを読んだ、読みふけった！！なぜなら半日くらいあったら読めるやろとおもって読んだら2日くらい掛かったからなんや。半分寝ながら読み続けた。お忙しい方々ならもっと掛かるかもしれん。それくらい手厚いTutorialになっとるんや。
ほんでな！ほんでな！画面の左側に書かれてある説明に沿って、画面の右上の画面にコードを書き込んでいくと、画面の右下の画面に結果が表示されるんや！！すごいやろがい！！

※ぜひ実際におためしください。https://svelte.dev/tutorial/basics

Svelte近接格闘術

タイトルに特に意味は無いんや、ちなみにSvelteはスベルトって読むんやで。しらんけど。
こうしてSvelteを身につけたワイはその月のうちに最初の業務アプリケーションを書き、その後もSnowpackで2つSvelteKitで3つのアプリケーションを世に送り出すことができたんや。
SvelteKitについて詳しくはここでは書かんで。なぜならViteを使うとるからな^^。

そのドキュメントは驚きの読みやすさ

Evan Youのドキュメントにボコボコにされ続けていたワイが、こうも短期間で立て続けにアプリケーションを世に出すことができたのはなんでなんやろか。
それは、おそらくsvelte.devのドキュメントが驚きの読みやすさだったからなんや。※
なんかしらんけど、読んで書いたら動くんや。動かんかったら、また読むんやで。
書けば書くほど動くようになるので、ワイも調子に乗って中高生向けにサンプルコードとかを作って嫌がられたりもした程なんや。良かったら試してな。
中高生に嫌がられた伝説のサンプルコード

中高生に嫌がられた伝説のサンプルコード REST-API編

※個人の感想なんやで。

個人の感想のまとめ

このようにSvelteはめっちゃ学習コストが低いんや。書いたら書いただけ動くしな！
そして、状態管理がめっちゃわかりやすいんや。『ワイでもわかる☆状態管理』なんやで。
でもな、Svelteはまだまだ秘められたポテンシャルが盛り盛りの発展途上プロジェクトなんや。
だからこれからも、皆でガシガシSvelteを書いて積極的に盛り上げていこうな！！

2021年12月22日ここに記す

SVELTE

CYBERNETICALLY ENHANCED WEB APPS

Svelte公式サイト

Svelte学習帳 PHP REST-API編

2021-06-11T06:41:05+09:00

Svelte学習帳 PHP REST-API編

概要

SvelteKitでWebアプリケーションを作ります
PHPでREST-APIを作ります
fetchで通信します
データベースに保存したり読み込んだりします

はじめに

これは、ローカル環境でREST-APIの練習をするサンプルコードです。
SveltKitで作成したWebアプリケーションに表示されているパラメータを、REST-APIでデータベースに保存します。

以前に投稿した記事「続・コードを書いてステータス画面を表示する」の続編になっています。

参考：続・コードを書いてステータス画面を表示する

動作要件

SvelteKitが動作すること
PHP ビルトインサーバーが動作すること
PHP Composerが動作すること

STEP00 準備します

ここでは2つのプロジェクトフォルダを作成します。

SvelteKitのプロジェクトを作成する

SvelteKitのプロジェクトを作成します。
ここではプロジェクト名を

svelte-rest-app

としています。

参考：SvelteKit • The fastest way to build Svelte apps

PHPプロジェクトを作成する

svelte-rest-appと同じ階層に

php-rest-app

というフォルダを作成します。

今回はPopcornというマイクロフレームワークを使用するので、Composerでインストールします。

参考：popphp/popcorn: Popcorn PHP REST Micro-Framework

/php-rest-app/public/index.php

パラメータを返す機能をindex.php内に作ります。

get(
    '/params/',
    function () {
        // STEP01 ローカル環境間でのアクセスを許可します
        header('Access-Control-Allow-Origin: http://localhost:3000');
        header('Access-Control-Allow-Headers: Origin, Content-Type');

        $params = [
            'name' => 'name2',
            'lv'   => '12',
            'hp'   => '90',
            'mp'   => '10',
            'agi'  => '6',
            'tec'  => '3',
            'str'  => '10',
            'luc'  => '2',
            'text' => "I'm stronger2."
        ];
        echo json_encode($params);
    }
);


$app->run();

ローカル環境で実行する

/php-rest-app/public/フォルダに移動して、サーバを起動します。

php -S localhost:8080

/svelte-rest-app/フォルダに移動してアプリケーションを起動します。

パラメータの内容が書き換わっていれば成功です。


// STEP02 送信結果を受け取る変数
let message = false;

// STEP02 fetchでパラメータを送信する機能
const saveParams = async () => {
    const serverURL = 'http://localhost:8080/saveparams';
    const response = await fetch(
        serverURL,
        {
            method: 'POST',
            mode: 'cors',
            credentials: 'omit',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                name: name,
                lv: lv,
                hp: hp,
                mp: mp,
                agi: agi,
                tec: tec,
                str: str,
                luc: luc,
                text: text
            })
        }
    );
    message = await response.json();
}

送信ボタンを作ります

textareaの下にパラメータを送信するボタンを追記します




{#if message}
  

  {message.message}
{/if}

Webアプリケーションに応答する機能を作ります

/php-rest-app/public/index.phpを開きます

パラメータ送信に応答する機能を追記します。


// STEP02 CORS対応処理
$app->options(
    '/saveparams/',
    function () {
        header('Access-Control-Allow-Origin: http://localhost:3000');
        header('Access-Control-Allow-Headers: Origin, Content-Type');
    }
);

// STEP02 パラメータ送信に応答する機能を登録します。
$app->post(
    '/saveparams/',
    function () {
        header('Access-Control-Allow-Origin: http://localhost:3000');
        header('Access-Control-Allow-Headers: Origin, Content-Type');

        // STEP02 受信確認メッセージを返します
        echo json_encode(['message' => '受信しました']);
    }
);

ローカル環境で実行する

/php-rest-app/public/フォルダに移動して、サーバを起動します。

php -S localhost:8080

/svelte-rest-app/フォルダに移動してアプリケーションを起動します。

SAVEボタンをクリックして、メッセージが返ってくれば成功です。

参考：popphp/pop-http: Pop Http Component

データベースを準備します

/php-rest-app/public/index.phpを開きます。

フレームワークの準備処理の手前に、データベースを準備する処理を追記します。

// STEP03 データベースを準備します
$pdo = new PDO('sqlite:example.db');
$sql = <<< "SQL"
  CREATE TABLE IF NOT EXISTS config (
    param_id INTEGER PRIMARY KEY,
    params TEXT
  );
SQL;
$pdo->exec($sql);

参考：
- PHP: PDO::__construct - Manual
- PHP: PDO::exec - Manual

パラメータをデータベースに保存します

パラメータ送信に応答する機能として、リクエストデータを受け取ってデータベースに保存する処理を追記します。

// STEP03 pop-httpでリクエストデータを受け取ります
$request = new \Pop\Http\Server\Request();
$params = $request->getParsedData();
$encoded_params = json_encode($params);

// STEP03 リクエストデータを保存します
$sql = <<< "SQL"
  INSERT OR REPLACE INTO
    config(param_id, params)
  VALUES(1, :params);
SQL;

$pdo = new PDO('sqlite:example.db');
$sth = $pdo->prepare($sql);
$sth->bindParam(':params', $encoded_params);
$bool = $sth->execute();

$message = $bool ? '保存しました' : '保存できませんでした';

// STEP02 受信確認メッセージを返します
// STEP03 実行結果をメッセージとして返します
echo json_encode(['message' => $message]);

参考：
- PHP: PDO::prepare - Manual
- PHP: PDOStatement::bindParam - Manual
- PHP: PDOStatement::execute - Manual

ローカル環境で実行する

/php-rest-app/public/フォルダに移動して、サーバを起動します。

php -S localhost:8080

/svelte-rest-app/フォルダに移動してアプリケーションを起動します。

SAVEボタンをクリックして、保存しましたメッセージが返ってくれば成功です。

// STEP04 データベースからパラメータを取得します
$sql = <<< 'SQL'
  SELECT param_id, params
  FROM config
  WHERE (param_id = 1);
SQL;

$pdo = new PDO('sqlite:example.db');
$sth = $pdo->prepare($sql);
$sth->execute();
$db_data = $sth->fetchColumn(1);

// STEP04 取得したパラメータを返します
// STEP04 取得した結果がnullのときは、デフォルトデータを返します
$params = json_decode($db_data) ?? $params;

参考：PHP: PDOStatement::fetchColumn - Manual

ローカル環境で実行する

/php-rest-app/public/フォルダに移動して、サーバを起動します。

php -S localhost:8080

/svelte-rest-app/フォルダに移動してアプリケーションを起動します。

パラメータを変更してSAVEした後、ブラウザでアプリケーションを再読込します。SAVEしたパラメータが表示されれば成功です。

確認

サンプルプロジェクトはこういう感じになります。

確認：samplecode-svelte-rest-app at Step04

STEP05 練習する

これは、ローカル環境で練習するためのサンプルプロジェクトです。
実際のプロダクトでは、ここで使用したライブラリや手法を自由に扱えるようになるまで練習して得た経験を活用してみてください。