しかたらむーの てっくぶろ

組み込みソフトの古参エンジニアがモダンなフロントエンドエンジニアに転生 その進化の記録です

Vue + TypeScript の ToDoアプリをPWAにしてみる

はじめに PWAとは PWA って何? っで、どんな技術? 出来上がりはこんな感じです アプリをPWA対応にするには 最初からPWAでやる 既存のアプリをPWAにする アプリを公開するには 出来上がり! 謝辞 はじめに 前回、indexedDB を使ってTodoアプリを作ってみま…

Vue.js + Typescript で IndexedDBを使ったToDoアプリを作ってみる

はじめに 出来上がりはこんな感じです! IndexedDB って何? IndexedDB どう使うの? indexedDBと接続する indexedDBにアクセスする indexedDBの中身を見てみる コンポーネント&クラス構成 さぁ 作ってみましょう プロジェクトの定義 indexedDBへの接続 cur…

『レスポンシブでスクローラブルなリスト』を React で!~Vueと違う2つのポイント~

はじめに 2つの疑問 Vue のディレクティブって React ではどうする? イベントハンドラの呼び出しコンテキストは? まとめ 謝辞 はじめに 前回、『スクローラブルリスト』をReact でやってみました。 今回は、それを通して分かった Vue と React の違いにつ…

Vue.js + Typescript で LocalStorageを使ったToDoアプリを作ってみる

はじめに 出来上がりはこんな感じです! LocalStorage どう使うの? LocalStorage を見てみる コンポーネント&クラス構成 さぁ作ってみましょう プロジェクトの定義 LocalStorageへのCRUD 出来上がり! 謝辞 はじめに WebアプリのフロントエンドをSPAで開発…

Vue.js + Typescript で『リサイズ可能なレイアウト』をやってみる

はじめに 出来上がりはこんな感じです! 考え方 プロジェクトの構造 HTMLの構造 振る舞い ドラッグ開始、終了イベント ドラッグ操作イベント 幅方向のリサイズ 高さ方向のリサイズ 出来上がり! 謝辞 はじめに とあるWebアプリのダッシュボード画面を開発し…

Vue.js + Typescript で 入力自動補完(Autocomplete)コンポーネントを作ってみる

はじめに 出来上がりはこんな感じ! 自動補完の構造と振る舞い プロジェクトの作成 自動補完付き入力コンポーネント HTML構造 振る舞い コード実装のポイント 選択候補フィルタと候補リスト更新 Enter操作による確定処理 ↓、↑キーに連動したスクロール 親コ…

Vue.js + TypescriptでSVGアイコンを操作してみる

はじめに 出来上がりはこんな感じ! SVGアイコンの準備 SVGアイコンの埋め込み方 クリックベントの補足と伝搬 クリックしても… 出来上がり! 謝辞 はじめに 前回はPNG形式のアイコンを操作する方法を紹介しました。ですが、PNGやJPGの様な画像形式のアイコン…

Vue.js + Typescriptで自前のアイコンを操作する

はじめに 出来上がりはこんな感じ! アイコンの準備 表示してみる クリックイベントをハンドルする 見栄えが… もっとカッチョよくするには 謝辞 はじめに アプリの必須アイテム アイコン。複習もかね、Vue+Typescriptでアイコンを表示しクリックイベントを…

Vue.js + Typescriptで作る『モーダルダイアログ』

はじめに 出来上がりはこんな感じ! モーダルダイアログの出し方(考え方) 開発環境 プロジェクトの作成 コンポーネントの構成 親コンポーネント(ModalDialogSample.vue) HTML Script 子コンポーネント(ModalDialog.vue) HTML Script 出来上がり! 謝辞 …

Vue.js + Typescript『リストに条件付きStyle』で行の背景色を変えてみる!

はじめに 出来上がりはこんな感じ 背景色の変え方 変更内容 行ごとの背景色 選択行の背景色 出来上がり! まとめ はじめに 前回の記事【Vue+TypeScriptで作る『レスポンシブでスクローラブルなリスト』】 techblo.shikataramuno.com では、メンバをリスト表…

Vue.js + Typescriptで作る『レスポンシブでスクローラブルなリスト』

~ 目次 ~ はじめに 出来上がりはこんな感じ 仕様 開発環境 プロジェクトの作成 クラス設計 HTML(構造)の設計 ファイル構成 Member クラス SrotOrder クラス ResponsiveScrollableGrid コンポーネント Appコンポーネント 出来上がり! 次への展開 はじめに …