差分

このページの2つのバージョン間の差分を表示します。

--- stencil:01.stencilでtodoアプリ [2019/09/14] – adash333
+++ stencil:01.stencilでtodoアプリ [2019/09/16] (現在) – [01.StencilでTodoアプリ] adash333
@@ 行 1: / 行 1: @@
 ====== 01.StencilでTodoアプリ ======
- ---//2019/09/14 更新//
+ ---//2019/09/16 更新//
-以下のサイトを写経してみたいと思います。
+以下に記載しました。
-https://www.javascripttuts.com/creating-a-todo-application-using-stencil/
+https://i-doctor.sakura.ne.jp/font/?p=40983
-{{:stencil:pasted:20190206-160412.png}}
+StencilでlocalStorage利用のTODOアプリを写経してみる
+年9月16日
-===== すること =====
-  -Stencil.jsでTodoアプリを作成する（Reduxを用いない）
-ソースコード
-DEMO
-===== 開発環境 =====
-<code>
-Windows 10 Pro (1803)
-VisualStudioCode 1.37.1
-git version 2.20.1.windows.1
-nvm-windows 1.1.7
-node 12.2.0
-npm 6.9.0
-yarn 1.16.0
-</code>
-今回構築した環境
-<code>
-</code>
-===== Stencilアプリの新規作成 =====
-C:/stencil/ フォルダ内に、stencil-todo/ という名前のアプリを作成することにします。
-C:/stencil/ フォルダを右クリックして、『Open with Code』をクリックして、VisualStudioで開き、Ctrl+@でターミナル画面を出します。次に、以下を入力して新規stencilアプリを作成します。
-<code>
-npm init stencil
-// ionic-pwaを選択
-</code>
-{{:stencil:pasted:20190914-031316.png}}
-{{:stencil:pasted:20190914-031753.png}}
-Project Nameは、今回は、stencil-todo と入力しました。さらに、Enterを2回押します。
-{{:stencil:pasted:20190914-034029.png}}
-いったん、開発サーバを起動してアプリを確認します。
-<code>
-cd stencil-todo
-npm i
-npm start
-</code>
-すると、自動的にブラウザが開き、以下のようになります。
-{{:stencil:pasted:20190914-033855.png}}
-{{:stencil:pasted:20190914-034238.png}}
-ここまでのソースコード
-https://github.com/adash333/stencil-todo/tree/a399cf5b8892a1d63d2e52f0b8c4a904732db087
-===== ionic-pwaのファイル構造 =====
-とりあえず、この時点でのファイル構造を見てみます。
-{{:stencil:pasted:20190914-042353.png}}
-src/components/ フォルダには、以下の3つのフォルダあり、それぞれ４つのファイルが入っており、その中の、app-xxx.tsxファイルとapp-xxx.cssファイルがセットになって、コンポーネントを形成しています。
-  -app-root
-  -app-home
-  -app-profile
-今回は、トップページは、app-homeコンポーネントが表示されています。
-app-rootコンポーネントは特別で、ルーティングrouting（URLの値によって、表示するコンポーネントを振り分ける）を示しているだけのようです。
-{{:stencil:pasted:20190914-041623.png}}
-詳細はわかりませんが、src/components/app-root/app-root.tsxの下の方の以下のコードを読むと、URLが"/"のときと、"/profile/:name"のときで、それぞれ、app-homeコンポーネント、app-profileコンポーネントを切り替えて表示しているようです。
-<code>
-      <ion-app>
-        <ion-router useHash={false}>
-          <ion-route url="/" component="app-home" />
-          <ion-route url="/profile/:name" component="app-profile" />
-        </ion-router>
-        <ion-nav />
-      </ion-app>
-</code>
-次に、src/components/app-home/app-home.tsx のコードを少し読んでみます。
-{{:stencil:pasted:20190914-042216.png}}
-上の方ばAngularの.tsファイル似ていますが、下の方は、Reactのjsxが混ざったような書き方になっているようです。
-===== app-home.tsxの編集 =====
-src/components/app-home/app-home.tsx　ファイルを編集して、todo listを表示するようにします。
-[[https://www.javascripttuts.com/creating-a-todo-application-using-stencil/|写経元サイト]]の todo-list.tsxのコードをほぼコピペします。
-<html>
-<script src="https://gist.github.com/adash333/bd47521c5a18e7487f85698ed9959f1a.js"></script>
-</html>
-アプリのもつ状態''%%@State()%%''として、"todos"と"newTodo"を定義しています。
-また、componentWillLoad()関数を用いて、コンポーネントがロードされたときに、実行される関数を定義します。
-今回は、todos配列（Todoのリスト）の1要素（Todo1個分）だけ入力しておきます。
-render()関数の部分には、表示する内容をhtmlっぽいものとjavascriptっぽいものを混ぜて記載します。（ReactのJSXのように記載します。個人的にはこれは苦手なのですが、慣れるしか無さそうです。）
-今回は、以下の２つを表示します。
-<code>
-<input>タグのところに、新しいTodoを入力するための場所
-<my-todo>タグは、これから新しく作成するmy-todoコンポーネントを表示する場所です。todos配列の要素を順番に取り出して、<my-todo>を用いて表示します
-</code>
-（変更前）
-{{:stencil:pasted:20190914-052642.png}}
-（変更後）
-{{:stencil:pasted:20190914-052921.png}}
-Ionicを用いて、少し見栄えを変更してみます。
-return()のところで2つ以上の<div>を表示するために、
-<code>
-(<div></div>)から、[<div></div>, <div></div>]
-</code>
-のように記載しなおしています。
-{{:stencil:pasted:20190914-053739.png}}
-まだ、"my-todo"コンポーネントを作成していないので、Todoリストは表示されていません。
-次に、"my-todo"コンポーネントを作成します。
-===== my-todoコンポーネントの作成 =====
-todoリストの個々のtodoを表示するためのmy-todoコンポーネントを新規作成します。
-新規コンポーネントを作成すためには、最低2個のファイルを作成する必要があります。
-src/components/　フォルダ内に my-todo/ フォルダを新規作成し、さらに、その中に、以下の２つのファイルを新規作成します。
-  -my-todo.tsx
-  -my-todo.css