stencil:01.stencilでtodoアプリ
差分
このページの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アプリ ====== | ====== 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が混ざったような書き方になっているようです。 | ||
- | |||
- | |||
- | ===== app-home.tsxの編集 ===== | ||
- | src/ | ||
- | |||
- | [[https:// | ||
- | |||
- | < | ||
- | <script src=" | ||
- | </ | ||
- | |||
- | アプリのもつ状態@State()として、" | ||
- | |||
- | また、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 | ||
stencil/01.stencilでtodoアプリ.1568450316.txt.gz · 最終更新: 2019/09/14 by adash333