はじめに PWAとは PWA って何？ っで、どんな技術？ 出来上がりはこんな感じです アプリをPWA対応にするには 最初からPWAでやる 既存のアプリをPWAにする アプリを公開するには 出来上がり！ 謝辞 はじめに 前回、indexedDB を使ってTodoアプリを作ってみま…
はじめに 出来上がりはこんな感じです！ IndexedDB って何？ IndexedDB どう使うの？ indexedDBと接続する indexedDBにアクセスする indexedDBの中身を見てみる コンポーネント＆クラス構成 さぁ 作ってみましょう プロジェクトの定義 indexedDBへの接続 cur…
はじめに 出来上がりはこんな感じ！ Reactの開発環境 Typescriptを使うプロジェクトの作成 React版の移植 プリミティブ変数の型宣言 オブジェクト変数の型宣言 Typescript対応版のコード メソッドの型を指定 イベントの型 出来上がり！ 謝辞 はじめに このと…
はじめに ２つの疑問 Vue のディレクティブって React ではどうする？ イベントハンドラの呼び出しコンテキストは？ まとめ 謝辞 はじめに 前回、『スクローラブルリスト』をReact でやってみました。 今回は、それを通して分かった Vue と React の違いにつ…
はじめに 出来上がりはこんな感じです。 MemberList コンポーネントの追加 コンストラクタ フィルタのテキスト入力イベント 列タイトルのクリックイベント チェックボックスイベントハンドラ index.jsを変更する 出来上がり！ 謝辞 はじめに 前回、Reactをや…
はじめに Step1. 環境構築 Step2. プロジェクト作成 Step3. ビルド 謝辞 はじめに これまでは主にVueを中心にフロントエンドのちょこっと記事を幾つか書いてきました。 ここいらで別のフレームワークも試してみようと思います。 候補はAngularとReactのどち…
はじめに 出来上がりはこんな感じです！ LocalStorage どう使うの？ LocalStorage を見てみる コンポーネント＆クラス構成 さぁ作ってみましょう プロジェクトの定義 LocalStorageへのCRUD 出来上がり！ 謝辞 はじめに WebアプリのフロントエンドをSPAで開発…
はじめに 出来上がりはこんな感じです！ 考え方 プロジェクトの構造 HTMLの構造 振る舞い ドラッグ開始、終了イベント ドラッグ操作イベント 幅方向のリサイズ 高さ方向のリサイズ 出来上がり！ 謝辞 はじめに とあるWebアプリのダッシュボード画面を開発し…
はじめに 出来上がりはこんな感じ！ 自動補完の構造と振る舞い プロジェクトの作成 自動補完付き入力コンポーネント HTML構造 振る舞い コード実装のポイント 選択候補フィルタと候補リスト更新 Enter操作による確定処理 ↓、↑キーに連動したスクロール 親コ…
はじめに 出来上がりはこんな感じ！ SVGアイコンの準備 SVGアイコンの埋め込み方 クリックベントの補足と伝搬 クリックしても… 出来上がり！ 謝辞 はじめに 前回はPNG形式のアイコンを操作する方法を紹介しました。ですが、PNGやJPGの様な画像形式のアイコン…
はじめに SVGとは InkscapeのXMLエディター transformの影響 transformの影響を排除 図形データを切り出す 謝辞 はじめに 前回はInkscapeを使って自前のアイコンを作り、Webアプリで表示、イベントをハンドリングする記事を書きました。これらの記事では、PN…
はじめに こんなアイコン Inkscape とは 図を描く PNGでエキスポート 出来上がり はじめに Webアプリを作っていく中でどうしてもオリジナルのアイコンが必要になるときってありませんか？そんなとき、ちょっとしたデザインであれば手軽に作れる方法があると…
はじめに 出来上がりはこんな感じ！ アイコンの準備 表示してみる クリックイベントをハンドルする 見栄えが… もっとカッチョよくするには 謝辞 はじめに アプリの必須アイテム アイコン。複習もかね、Vue＋Typescriptでアイコンを表示しクリックイベントを…
はじめに JavaScriptのオブジェクト指向 JavaScriptのオブジェクト生成 プロトタイプチェーンで継承を実現？ プロトタイプチェーンのメリット メモリモデル なぜプロトタイプベースなのか まとめ 謝辞 はじめに JavaScriptはオブジェクト指向開発を実現する…
はじめに 出来上がりはこんな感じ！ モーダルダイアログの出し方（考え方） 開発環境 プロジェクトの作成 コンポーネントの構成 親コンポーネント（ModalDialogSample.vue) HTML Script 子コンポーネント（ModalDialog.vue） HTML Script 出来上がり！ 謝辞 …
はじめに 出来上がりはこんな感じ 背景色の変え方 変更内容 行ごとの背景色 選択行の背景色 出来上がり！ まとめ はじめに 前回の記事【Vue＋TypeScriptで作る『レスポンシブでスクローラブルなリスト』】 techblo.shikataramuno.com では、メンバをリスト表…
~ 目次 ~ はじめに 出来上がりはこんな感じ 仕様 開発環境 プロジェクトの作成 クラス設計 HTML（構造）の設計 ファイル構成 Member クラス SrotOrder クラス ResponsiveScrollableGrid コンポーネント Appコンポーネント 出来上がり！ 次への展開 はじめに …
組込みソフトウエアの古参エンジニアが、ふとしたきっかけでモダンなフロントエンドをマスターすることを決意。しかし、実際にやってみると四苦八苦することだらけで最近のフロントエンドの技術レベルは相当に高いことを実感。その悪戦苦闘の経験や、そのと…
