stencil:01.stencilでtodoアプリ
差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン前のリビジョン次のリビジョン | 前のリビジョン | ||
stencil:01.stencilでtodoアプリ [2019/09/15] – [開発環境] adash333 | stencil:01.stencilでtodoアプリ [2019/09/16] (現在) – [01.StencilでTodoアプリ] adash333 | ||
---|---|---|---|
行 1: | 行 1: | ||
====== 01.StencilでTodoアプリ ====== | ====== 01.StencilでTodoアプリ ====== | ||
- | | + | |
- | + | ||
- | 以下のサイトを写経してみたいと思います。 | + | |
- | + | ||
- | https:// | + | |
- | {{: | + | |
- | + | ||
- | ===== すること ===== | + | |
- | -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が混ざったような書き方になっているようです。 | + | |
- | + | ||
- | + | ||
- | ===== app-home.tsxの編集 ===== | + | |
- | src/ | + | |
- | + | ||
- | [[https:// | + | |
- | + | ||
- | < | + | |
- | <script src=" | + | |
- | </ | + | |
- | + | ||
- | アプリのもつ状態'' | + | |
- | + | ||
- | また、componentWillLoad()関数を用いて、コンポーネントがロードされたときに、実行される関数を定義します。 | + | |
- | 今回は、todos配列(Todoのリスト)の1要素(Todo1個分)だけ入力しておきます。 | + | |
- | + | ||
- | render()関数の部分には、表示する内容をhtmlっぽいものとjavascriptっぽいものを混ぜて記載します。(ReactのJSXのように記載します。個人的にはこれは苦手なのですが、慣れるしか無さそうです。) | + | |
- | 今回は、以下の2つを表示します。 | + | |
- | < | + | |
- | < | + | |
- | < | + | |
- | </ | + | |
- | (変更前) | + | |
- | {{: | + | |
- | + | ||
- | (変更後) | + | |
- | {{: | + | |
- | + | ||
- | Ionicを用いて、少し見栄えを変更してみます。 | + | |
- | return()のところで2つ以上の'' | + | |
- | < | + | |
- | (< | + | |
- | </ | + | |
- | のように記載しなおしています。 | + | |
- | + | ||
- | {{: | + | |
- | + | ||
- | まだ、" | + | |
- | 次に、" | + | |
- | + | ||
- | + | ||
- | ===== my-todoコンポーネントの作成 ===== | + | |
- | + | ||
- | todoリストの個々のtodoを表示するためのmy-todoコンポーネントを新規作成します。 | + | |
- | + | ||
- | 新規コンポーネントを作成すためには、最低2個のファイルを作成する必要があります。 | + | |
- | + | ||
- | src/ | + | |
- | -my-todo.tsx | + | |
- | -my-todo.css | + | |
- | + | ||
- | まずは、Todoを追加できるようにします。 | + | |
- | + | ||
- | {{: | + | |
- | + | ||
- | さらに編集して、update, | + | |
- | + | ||
- | {{: | + | |
- | + | ||
- | この状態ではまだできず、さらに、app-home.tsxを以下のように変更して、やっとupdate, | + | |
- | + | ||
- | 残念ながら、add しても、inputの中身は空欄になりません。やり方もわかりませんでした。。。 | + | |
- | + | ||
- | しかも、この後、updateとdeleteのコードを写経したりして苦戦しましたが、結局、削除も編集もできませんでした。。。 | + | |
- | + | ||
- | がっくし、、、 | + | |
- | + | ||
- | あきらめて、以下のサイトを写経しなおしてみようと思います。 | + | |
- | + | ||
- | https:// | + | |
- | {{: | + | |
+ | 以下に記載しました。 | ||
+ | https:// | ||
+ | StencilでlocalStorage利用のTODOアプリを写経してみる | ||
+ | 2019年9月16日 | ||
stencil/01.stencilでtodoアプリ.1568508932.txt.gz · 最終更新: 2019/09/15 by adash333