読み進める前に、先にそちらをご覧ください。前編」ではSvelteの基本的な使い方を学びました。簡単に実現することができました。Svelteは他のフレームワークほど強力な機能を持っているわけではありませんが、シンプルなアプリを作る際には心強い機能を提供してくれます。今回作るものノートアプリSvelteの基本的な使い方については習得したので、今回はノートアプリを作ってみましょう。以下のようなイメージです:シンプルですが、ウェブアプリを作る上で重要なことを制作過程で学べます。Application(SPA)という言葉を聞いたことがあるでしょうか?普通、ウェブページは複数のページに分かれています。そのためページの数だけファイルを用意する......というのが一般的でした。2010年頃になって、SPAという考えが流行り始めました。SPAというのはファイルは1ページ分だけ用意し、表示内容はプログラム側で切り替えるというものです。近年ではもはやSPAの方が標準的になってきています。Svelteでもsvelte-spa-routerというパッケージを利用することで簡単にSPAを作ることが可能なので、やってみましょう。開発環境の準備については「前編」をご覧ください。ここでは開発環境構築済みとして話を進めてきます。プロジェクトフォルダを作ります。適当なフォルダに移動し、以下のコマンドを叩きます。「svelte-spa」の部分がプロジェクト名になります(他の名前にしてもらっても構いません)。installします。installこれが済んだら、SPA開発用の追加パッケージ「svelte-spa-router」をインストールします。svelte-spa-routerこれで「svelte-spa-router」がインストールされるはずです。作り始める前に、最初に生成されたファイルをちょっといじります。publicフォルダの中にあるindex.htmlの2行目をいじります。lang=”en”になっているのでlang=”ja”にしておきます。あとは、タイトルが気になる方は7行目あたりにある<title>も変更して良いでしょう。lang="ja">次にpublicフォルダの中のglobal.cssを編集します。none;}これで前準備は完了です。あとはがんばって作っていきましょう。最初の画面の作成ノート一覧画面の作成まずノート一覧画面を作成します。src/App.svelteを編集したいところですが、その前にまずはノート一覧表示コンポーネントを作成します。srcフォルダの中に「components」フォルダを作成します。componentsフォルダの中に「NoteList.svelte」ファイルを作成します。NoteListコンポーネントはノートデータ一覧配列をpropsとして受け取り、画面に表示します。}</style>exportした変数は、外部から値を受け取ることが可能です。ここではnotesという変数をexportしています。受け取った配列を#eachでループ処理し、それぞれのデータを表示します。#eachでは各データとインデックス(番号)を取得することができます。各ノートはon:clickでクリックできるようになっており、クリックすると`/edit/${index}`をpushします。pushはsvelte-spa-routerからimportしてきた関数で、詳しくは後で説明します。次にsrcフォルダ直下に「Home.svelte」を作成します。これがノート一覧画面になります。ノートを管理する機能がないので、とりあえずはコードに直接ダミーのノートデータを書いておきます。このダミーデータをNoteListに渡し、表示してもらいます。pointer;}</style>Home画面にはアプリタイトル、NoteList、新しいノートボタンがあります。ここでまたpushが出てきます。新しいノートボタンを押すと’/add’をpushします。最後に「App.svelte」側からHome画面を呼び出します。auto;}</style>画面の管理を簡単にするため、App.svelteには難しいことは書かないようにします。ここまでを動かしてみるとりあえずここまでを動かしてみましょう。devコマンドで起動できます。devコマンドを叩くとlocalhost:5000とかのURLが出てくると思うのでブラウザでそこにアクセスします。ダミーのノートが表示されたと思います。前編から続けてやっている方はブラウザに妙なキャッシュが残っていて表示が崩れるかもしれません。そのときはshiftキーを押しながらリロードしてください。何の機能も作っていないので動作はしませんが、2つのノートと新しいノートボタンがクリックできるはずです。クリックしてからよく観察してみると、少し変化が現れています。URLの後ろの部分が書き換わっています。「/edit/0」という風に。ハッシュの書き換え「/edit/0」という文字列はどこかでみたはずです。NoteListでこれをpushしていました。svelte-spa-routerのpush関数は、URL書き換えのための関数だったのです。先述の通り、SPAでは1枚のページだけを使って、プログラム側から内容を書き換えることで複数ページが存在するように見せかけます。そのためには「今どのページを表示しているのか」を管理する必要があります。その管理手法のひとつとしてURLでのハッシュがあります。ハッシュというのはURLの末尾についている「#」以降の文字列のことで、ひとつのページ内での位置を表します。ハッシュを使って表示ページを管理する方法は、最もシンプルで、最も楽です。svelte-spa-routerでもこの方法を採用しており、それを実現するための関数がpushです。ハッシュが書き換わっただけで、表示は全く変わっていません。次はページ切り替えを作ってみましょう。ページ切り替え新規ノート追加ページページ切り替えを実現するためには、まず複数のページが必要です。ノート一覧ページができたので、次は新規ノート追加ページを作ります。前準備としてデータ読み書きのライブラリを作ります。srcフォルダの下に「lib」フォルダを作り、そこに「storage.js」ファイルを作りましょう。saveNotes(newNotes);};storage.jsではsessionStorage(タブを閉じるまでの間データを保持してくれる仕組み)を用いてデータの読み書きを行います。ブラウザを閉じた後もデータを保持したい場合は、sessionStorageの代わりにlocalStorageを使用してください。次にsrcフォルダの下のcomponentsフォルダに「NoteEditor.svelte」ファイルを作ります。}</style>NoteEditorはその名の通りノートのエディタで、タイトルと本文を入力できます。中身としてはinputとtextareを置いているだけです。titleとcontentをexportしており、外部からその値をバインドすることが可能です。このNoteEditorを使用して新規ノートページを作ります。srcフォルダ直下に「Add.svelte」ファイルを作ります。}</style>Add.svelteにはNoteEditorと保存ボタンがあります。NoteEditorの入力内容をbind:titleとbind:contentでバインドして読み出しています。保存ボタンを押すとonSave関数が呼ばれます。onSave関数は、lib/storage.jsからimportしてきたaddNote関数でノートを追加保存します。ノート追加後に’/’をpushしています。一般に’/’はホーム画面を表すのに用いられます。これでノート追加画面が完成したので、アプリにこの画面を追加します。画面とルーティング先ほど「svelte-spa-routerではURLのハッシュを書き換えることで現在の画面を管理している」と言いました。ハッシュの書き換えはpushで実現できました。次はハッシュによる画面の切り替えです。画面の切り替え管理のことを、「ルーティング」と言います。svelte-spa-routerにおいてはルーティングは「どのハッシュにどのSvelteコンポーネントを割り当てるか」の対応表に基づき行われます。ルーティングを行うコンポーネントを「ルータ」と言います。ルータはsvelte-spa-routerに同梱されています。ルーティングは主に一番中心となるコンポーネント、今回で言えばApp.svelteで行われることが多いです。Add)をimportし、ルーティング対応表を作ります。ここではroutesという変数に入れています。routesにはハッシュとコンポーネントの対応を記述します。ハッシュが「/」のときはHome、ハッシュが「/add」のときはAdd、その他の場合はHomeを指定しています。Routerを設置して先ほどのroutesを渡してやれば、あとはRouterが勝手に制御してくれるようになります。Routerを置いている部分がハッシュ値に依存してHomeやAddに切り替わるようになります。保存したノートの読み込みここまでのコードを動かす前に、Homeをちょっと編集します。保存したノートを読み込めるようにします。いままでダミーデータを使っていたので、そこを削除してlib/storage.jsから読み込みに行くようにします。script部分にloadNotesのimportと、loadNotesを使用して読み込みする処理を追加するだけです。pointer;}</style>これで読み込みもできました。ここまでを動かしてみるここまでできたらいったん動かしてみましょう。前とは違い、ノートは何も表示されず、新しいノートボタンだけが表示されていると思います。新しいノートボタンをクリックするとハッシュが変更され、画面が切り替わります。内容を適当に記述し保存ボタンを押すと、ホーム画面に戻りノートが表示されるはずです。パラメータ付きルーティングハッシュパラメータそして残るはノート編集画面だけです!さて、ここで問題が起こります。実はルーティングにおいてはパラメータが使用できます。簡単にいうと変数のようなものです。パラメータを使うことで、似たようなハッシュをすべて同じページに飛ばすことができます。Editここで「:id」がパラメータになります。パラメータには「:」で始まる自由な名前をつけることができます。パラメータの値はコンポーネント側から取得可能ですので、これを用いれば編集画面も作れそうです。ノート編集画面を作る編集画面を作ります。編集画面は新規ノート画面とほぼ同じです。}</style>違いはonSave時の処理と、デフォルト値としてlib/storage.jsからノートを読み込んでいるところです。paramsという変数をexportすることで、ハッシュのパラメータ値を受け取れるようになります(※ハッシュパラメータを受け取るには必ずparamsという変数名でなければなりません)。paramsの中にパラメータの値が入るので、それを取り出して処理します。ここではパラメータに後ほど「id」という名前をつけるので、params.idで取り出せます。パラメータありルーティング`/edit/${index}`をpushしたときに編集画面(Edit)に遷移するようにします。ハッシュでパラメータを使うには、「:」で始まる任意の名前をつけます。ここでは「/edit/:id」とします。App.svelteを編集します。auto;}</style>これでハッシュが「/edit/0」のときは:idが0、「/edit/1」のときは:idが1となります。この値が先ほどのEdit.svelteのparams.idに入ります。ここまでを動かしてみるではここまでを動かしてみましょう。新しいノートボタンから適当なノートを追加し、追加されたノートをクリックします。ハッシュが書き変わり、編集画面へ遷移するはずです。そのまま内容を編集して保存ボタンを押せば、内容が反映されます。ビルドするここまでできたので、ビルドします。buildこれでpublicフォルダにビルドされたファイルが出力されます。完成!これでひとまず完成です!ノート一覧の表示、ノートの追加・編集ができました。ノートアプリの制作を題材に、SvelteによるSPA開発を学ぶことができました。Svelteは簡単に習得できる一方、ReactやVueほど強力なものではありません。単純なSPAを制作するには十分な力を持っています。難しい技術を習得することも大事です。Svelteから始めてみるのもどうでしょう?気楽で、頑張らない、そんなフロントエンド生活があってもいいのではないでしょうか。ここで習得した技術で、いろいろ作ってみてください。正真正銘のReactだけの不純物なしでReact入門JavaScriptの「コールバック関数」とは一体なんなのかRSSプロフィール古都ことふるみやことです。フロントエンドとかいろいろやるよ。