stencil:01.stencilでtodoアプリ
差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン前のリビジョン次のリビジョン | 前のリビジョン | ||
stencil:01.stencilでtodoアプリ [2019/09/14] – [src/components/app-home/ 配下の4つのファイルの名前の変更] adash333 | stencil:01.stencilでtodoアプリ [2019/09/16] (現在) – [01.StencilでTodoアプリ] adash333 | ||
---|---|---|---|
行 1: | 行 1: | ||
====== 01.StencilでTodoアプリ ====== | ====== 01.StencilでTodoアプリ ====== | ||
- | | + | |
- | 以下のサイトを写経してみたいと思います。 | + | 以下に記載しました。 |
- | https://www.javascripttuts.com/creating-a-todo-application-using-stencil/ | + | https://i-doctor.sakura.ne.jp/font/?p=40983 |
- | {{: | + | StencilでlocalStorage利用のTODOアプリを写経してみる |
+ | 2019年9月16日 | ||
- | ===== すること ===== | ||
- | -Stencil.jsでTodoアプリを作成する(Reduxを用いない) | ||
- | ソースコード | ||
- | DEMO | ||
- | ===== 開発環境 ===== | ||
- | < | ||
- | 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 | ||
- | </ | ||
- | 今回構築した環境 | ||
- | < | ||
- | </ | ||
- | ===== Stencilアプリの新規作成 ===== | ||
- | |||
- | C:/stencil/ フォルダ内に、stencil-todo/ | ||
- | |||
- | C:/stencil/ フォルダを右クリックして、『Open with Code』をクリックして、VisualStudioで開き、Ctrl+@でターミナル画面を出します。次に、以下を入力して新規stencilアプリを作成します。 | ||
- | |||
- | < | ||
- | npm init stencil | ||
- | // ionic-pwaを選択 | ||
- | </ | ||
- | |||
- | {{: | ||
- | |||
- | {{: | ||
- | |||
- | Project Nameは、今回は、stencil-todo と入力しました。さらに、Enterを2回押します。 | ||
- | |||
- | {{: | ||
- | |||
- | いったん、開発サーバを起動してアプリを確認します。 | ||
- | |||
- | < | ||
- | cd stencil-todo | ||
- | npm i | ||
- | npm start | ||
- | </ | ||
- | |||
- | すると、自動的にブラウザが開き、以下のようになります。 | ||
- | |||
- | {{: | ||
- | |||
- | {{: | ||
- | |||
- | ここまでのソースコード | ||
- | https:// | ||
- | |||
- | ===== ionic-pwaのファイル構造 ===== | ||
- | とりあえず、この時点でのファイル構造を見てみます。 | ||
- | |||
- | {{: | ||
- | |||
- | src/ | ||
- | -app-root | ||
- | -app-home | ||
- | -app-profile | ||
- | 今回は、トップページは、app-homeコンポーネントが表示されています。 | ||
- | |||
- | app-rootコンポーネントは特別で、ルーティングrouting(URLの値によって、表示するコンポーネントを振り分ける)を示しているだけのようです。 | ||
- | |||
- | {{: | ||
- | |||
- | 詳細はわかりませんが、src/ | ||
- | < | ||
- | < | ||
- | < | ||
- | < | ||
- | < | ||
- | </ | ||
- | <ion-nav /> | ||
- | </ | ||
- | </ | ||
- | |||
- | 次に、src/ | ||
- | |||
- | {{: | ||
- | |||
- | 上の方ばAngularの.tsファイル似ていますが、下の方は、Reactのjsxが混ざったような書き方になっているようです。 | ||
- | |||
- | |||
- | ===== src/ | ||
- | src/ | ||
- | |||
- | [[https:// | ||
- | |||
- | < | ||
- | import { Component, State, Listen } from ' | ||
- | |||
- | @Component({ | ||
- | tag: ' | ||
- | styleUrl: ' | ||
- | }) | ||
- | export class AppHome { | ||
- | @State() todos: any; | ||
- | @State() newTodo; | ||
- | |||
- | componentWillLoad() { | ||
- | this.todos = [{ id: 1, value: 2 }]; | ||
- | } | ||
- | |||
- | render() { | ||
- | return ( | ||
- | <div> | ||
- | <input onChange={e => this.updateNewTodo(e.target)}/> | ||
- | |||
- | <ul> | ||
- | {this.todos.map((todo) => { | ||
- | return <my-todo | ||
- | value={todo.value} | ||
- | id={todo.id}></ | ||
- | })} | ||
- | </ul> | ||
- | </ | ||
- | ); | ||
- | } | ||
- | |||
- | } | ||
- | </ | ||
- | |||
- | アプリのもつ状態@State()として、" | ||
- | |||
- | また、componentWillLoad()関数を用いて、コンポーネントがロードされたときに、実行される関数を定義します。 | ||
- | 今回は、todos配列(Todoのリスト)の1要素(Todo1個分)だけ入力しておきます。 | ||
- | |||
- | render()関数の部分には、表示する内容をhtmlっぽいものとjavascriptっぽいものを混ぜて記載します。(ReactのJSXのように記載します。個人的にはこれは苦手なのですが、慣れるしか無さそうです。) | ||
- | 今回は、以下の2つを表示します。 | ||
- | -< | ||
- | -< | ||
- | |||
- | |||
- | |||
- | |||
===== リンク ===== | ===== リンク ===== |
stencil/01.stencilでtodoアプリ.1568438040.txt.gz · 最終更新: 2019/09/14 by adash333