サルでもわかるWEBプログラミング

フリーソフトのみでホームページ作成

ユーザ用ツール

サイト用ツール

現在位置: index.html » stencil » 01.stencilでtodoアプリ
トレース:
stencil:01.stencilでtodoアプリ


差分

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

この比較画面へのリンク

両方とも前のリビジョン前のリビジョン
次のリビジョン		前のリビジョン
stencil:01.stencilでtodoアプリ [2019/09/14] – [my-todoコンポーネントの作成] adash333stencil:01.stencilでtodoアプリ [2019/09/16] (現在) – [01.StencilでTodoアプリ] adash333
行 1: 行 1:
 ====== 01.StencilでTodoアプリ ====== ====== 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アプリを写経してみる 
- +2019年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 +
- +
-まずは、Todoを追加できるようにします。 +
- +
-{{:stencil:pasted:20190914-084228.png}} +
- +
-さらに編集して、update, deleteができるようにします。 +
- +
-{{:stencil:pasted:20190914-093056.png}} +
- +
-この状態ではまだできず、さらに、app-home.tsxを以下のように変更して、やっとupdate, deleteができるようになります。 +
- +
-残念ながら、add しても、inputの中身は空欄になりません。やり方もわかりませんでした。。。+
  
  


stencil/01.stencilでtodoアプリ.1568453535.txt.gz · 最終更新: 2019/09/14 by adash333
Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki