「Svelte」でWebページの内容を動的に更新する、リアクティブ機能とバインディング機能の活用方法
本連載では、Webページ用UIフレームワーク「Svelte」の活用方法を順を追って説明しています。前回はプロジェクトの構成とSvelteコンポーネントの実装方法を説明しました。今回はデータ内容をWebページの内容に反映して更新させる、Svelteのリアクティブ機能とバインディング機能について説明します。 はじめに SvelteはWebページのUIを構築するためのフレームワークです。コンパイルによりプレーンなJavaScriptを生成し、実行時にSvelte固有の実装を利用しないことで、実行ファイルのサイズを小さくできる特徴があります。 本連載ではSvelteの活用方法を、順を追って説明していきます。前回はSvelteでWebページを実装するプロジェクトの基本的な構成や使い方と、SvelteにおけるWebページの構成単位であるコンポーネントの実装方法を説明しました。 今回は、コンポーネントに
Webページ用UIフレームワーク「Svelte」とは？ プレーンで軽量なJavaScript生成を体験しよう！
「Svelte」はWebページ用UIフレームワークで、コンパイル時にプレーンなJavaScriptを生成するといった特徴があります。本連載ではSvelteの活用方法を順を追って説明していきます。初回となる今回は、Svelteの概要と特徴を説明するとともに、実際にプロジェクトを作成して実行させ、Svelteを体験します。 はじめに WebページのUIを構築するためのライブラリやフレームワークは、ReactやVue.js、Angularといったさまざまなものが存在します。本記事で取り上げるSvelteも、そのようなフレームワークの1つです。 図1 Svelteの公式ページ 他のライブラリやフレームワークでは、それ自体のコードがブラウザーに読み込まれて実行されるのに対して、Svelteでは、Svelte自身のコードを含まないプレーンなJavaScriptをコンパイルで生成するため、実行ファイルサ
TypeScriptとも相性抜群なライブラリ──Vue.jsで状態管理を行う新定番「Pinia」を解説！
本連載では、JavaScriptフレームワーク「Vue.js」を、型定義が利用できるようJavaScriptを拡張した言語「TypeScript」で活用する方法を、順を追って説明していきます。前回は複数のコンポーネントをURLによって切り替え表示できる「Vue Router」の利用法を説明しました。今回はVue.jsの状態管理ライブラリ「Pinia」について説明します。 はじめに 本連載では、JavaScriptを利用して動的なWebページを構築できるフレームワークVue.jsを、データの型定義ができるように拡張されたAltJS（コンパイルしてJavaScriptにする言語）であるTypeScriptで活用する方法を、順を追って説明しています。 一般にWebページは、ユーザーの入力値やWeb APIから取得したデータなど、さまざまな状態を持ちます。これらの状態がさまざまなコンポーネントに散
FlutterのBuildContextとは？──その役割と制限をきちんと理解しよう
今回は、これまでコード上でなんとなく使ってきたBuildContextを中心に説明します。そして、Flutterだけではなく他のフレームワークを利用する際にも通用する共通概念として理解できるようにします。そして「なんとなく」の意味が「ぼやっとした理解」から「抽象的な理解」という意味へ変わることをお助けできればと思います。 Contextとは BuildContextの具体的な内容を説明する前に、まずはContextという言葉からプログラミングにおける抽象的な用途について言及します。 Flutterに限らずさまざまなフレームワークではContextという用語がよく利用されます。そして、多くの場合、それらもなんとなく利用されている状況です。そこで、まずはContextという言葉についてより深く考えてみます。特に、FlutterにおけるBuildContextの説明ではよくわからないという方は、
FirebaseでPush通知を実現しよう！ Firebase Cloud Messagingを用いた通知システム
Firebase Cloud Messagingとは Firebase Cloud Messaging（以下FCM）は、Push通知の実装やコンバージョン取得等、運用をサポートする便利なツールです。簡易的なモック開発を行う際はもちろん、通常リリースするAndroid／iOSのアプリに共通の通知機能があるものを開発する際に非常に有効活用でき、モバイルアプリ開発では「なくてはならないもの」となっています。 今回はそんな便利なFCMのPush通知の機能について記述させていただきます。 （2023年8月時点でのFirebase管理画面上では、”Messaging”として今回の主題となる「通知（Push通知）」以外に「In-App Messaging」の2つの機能がまとめられています） FCMが対応するプラットフォーム FCMはiOS、Android、さらにはブラウザへのWeb Pushなど、主要な
LINEでメッセージの送受信を行おう！ Messaging APIの基本的な使い方から解説
Messaging APIの概要 LINEでチャットメッセージの送受信をするためには、Messaging APIを使って行います。Messaging APIを利用したメッセージの送受信でのシステムとの関係は図1のようになります。 図1：LINE Messaging APIでの処理の流れ Messaging APIではチャットメッセージだけではなく、LINEでの友だち登録や、ブロックをした際もメッセージを受信します。 また、メッセージの送信ではテキストだけではなく、リンクやボタンなどを含んだメッセージ形式も可能です。そして、それらの操作イベントも同様にメッセージとして受信します。 送信タイミングという観点では（1）のようなサービス側が任意のタイミングで送信する場合と、（2）のようにメッセージを受信したタイミングで返信する場合があり、これらでは利用するAPIが異なります。そして、利用料金にも関
Web ComponentsのUIライブラリ「Ionic Framework」を解説──既存のデザインシステムを活用する方法とは？
Web Componentsを使うことで、再利用可能なUI部品を自作できますが、特にデザインにこだわりがない場合は他人が作ったUI部品を使って楽をしたいケースもあります。今回は、Web Componentsで開発されたUI部品のライブラリであるIonic Frameworkについて解説します。 対象読者 再利用可能なHTMLやCSSを整備したいJavaScriptエンジニア 前提環境 筆者の検証環境は以下の通りです。 macOS Ventura 13.0.1 Google Chrome 110.0.5481.100 @ionic/core 6.5.4 Web Componentsとデザインシステム これまでの連載で、Web Componentsの仕組みを使うことで、再利用可能、かつスタイルや振る舞いを内包したHTML要素（カスタム要素）を自作できることがわかりました。Web Compone
Vue.jsでページを切り替える「Vue Router」の利用法を解説！ TypeScriptの型定義とともに活用しよう
本連載では、JavaScriptフレームワーク「Vue.js」を、型定義が利用できるようJavaScriptを拡張した言語「TypeScript」で活用する方法を、順を追って説明していきます。前回はVue.jsのコンポーネントについて説明しました。今回は複数のコンポーネントをURLによって切り替え表示できる「Vue Router」の利用法を説明します。 はじめに 本連載では、JavaScriptを利用して動的なWebページを構築できるフレームワークVue.jsを、データの型定義ができるように拡張されたAltJS（コンパイルしてJavaScriptにする言語）であるTypeScriptで活用する方法を、順を追って説明しています。 本連載でこれまで扱ってきたサンプルは、基本的に1ページだけを表示するものでしたが、実際のWebページでは、URLによって異なる内容のページを切り替え表示します。Vu
Flutterでデータを端末に保存する方法は？～Key-Valueでの値の保存とファイルへの保存～
前回までは、サンプルアプリケーションのログイン部分を想定してhttpリクエストについて説明しました。今回は、チャット部分の実装の前にその準備知識として必要になるデータを端末に保存する方法について紹介します。例えば、ログイン機能の場合、毎回アプリを起動する度に最初から入力する必要があり、面倒なため、前回ログインしたアカウント情報を保存しておきたくなるはずです。また、サーバから取得したコンテンツデータなどを端末上に保存してできるだけサーバへのリクエストはさせたくないというケースもあります。このように、スマホアプリではできるだけ前回利用した状態のデータは端末に保存しておきたいと思うはずです。 データを端末に保存する方法 Flutterでデータを端末に保存する方法には、大きく分けて以下の3種類があります。 Key-Valueで値を保存する方法（shared_preferences） ファイルに保存
JavaScript／TypeScriptの非同期処理に向けたライブラリ「Axios 1.0.0」が登場
Axiosは、JavaScript／TypeScriptで非同期API呼び出しを容易にするライブラリ。各種WebブラウザやNode.jsと組み合わせて使用する。 JavaScript／TypeScript、Node.jsでは、処理の完了を待つことなく、完了したときにコールバック関数を呼び出すようにする「非同期処理」を多用する。しかし、非同期処理は回数が多くなるとコードの入れ子が深くなり、混乱しやすい。また、処理完了の順序を事前に特定できないため、順不同でやって来る処理完了の知らせを適切に処理しなければならない。 これらの問題を解決するために、「Promise」という非同期処理の状態を監視するオブジェクトが導入されている。これを利用することで、非同期処理の記述はある程度容易になるが、まだ面倒は残る。 そこで、Promiseオブジェクトを強く意識することなく非同期処理を記述することを可能にした
Vue.jsの基本記法をおさらいしつつ、Nuxt 3ならではの「useAsyncData」「useFetch」機能を試してみよう
本連載では、Webページのユーザーインタフェース（UI）構築に「Vue 3」を利用したフレームワーク「Nuxt 3」の活用方法を紹介します。前回は、Nuxt 3の概要、Nuxt 3プロジェクトの生成・実行、Nuxt 2のプロジェクトでNuxt 3の機能を利用するNuxt Bridgeを紹介しました。今回は、Vue.jsの基本記法を簡単に確認した後、Nuxt 3で利用できる「useAsyncData」「useFetch」機能を紹介します。 はじめに Nuxt.jsは、Webページのユーザーインタフェース（UI）を構築できるVue.jsとともに、様々な追加機能をまとめて提供するフレームワークです。現在次期バージョン「Nuxt 3」が開発中で、2022年4月にリリース候補（RC）版がリリースされました。 前回は導入編として、Nuxt 3の概要を説明するとともに、Nuxt 3プロジェクトを生成・実
Vue 2系列最後のマイナーリリースとなる「Vue 2.7」がリリース
「Vue」では、すでにバージョン3が標準となっており、2.xを使っている開発者は互換性などの問題でやむを得ずとどまっていると考えられる。「Vue 2.7」では、バージョン3の一部重要な機能を取り込むことで、2.xを使っている開発者に新機能による恩恵を受けてもらうことを考えた。 Vue 3から取り込んだ機能としては、Composition API、SFC（Single-File Components）上での ＜script setup=""＞、同じくSFC上でのCSSのv-bindディレクティブの3点が挙げられる。Composition APIは、大規模プロジェクトの開発時にソースコードの見通しをよくするための各種機能を提供する。 ＜script setup＞は、SFCでComposition APIを使うときに使用する構文で、糖衣構文（シンタックス・シュガー）の一種だが、使用することで同じ
ViteがLaravelにおけるデフォルトのフロントエンドアセットバンドラに
オープンソースのPHPによるWebアプリケーションフレームワーク・Laravelの開発チームは、これまで取り組んできたLaravelへのViteの統合に向けた作業の結果、 ViteがLaravelにおけるデフォルトのフロントエンドアセットバンドラになったことを、6月29日（現地時間）に発表した。 Viteは、Vue.jsなどに対応するフロントエンド開発ツールで、ネイティブESMによって要求時にファイルが提供されるのでバンドルが不要であり、HMR（hot module replacement）機能や、TypeScript／JSX／CSSのサポートなど、先進的な機能を備える。 LaravelとViteの統合にあわせて、Laravel BreezeおよびLaravel Jetstreamも更新されており、Laravelの開発チームは、LaravelとともにViteの使用を開始するにあたって、フロ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「Svelte」の活用に不可欠──プロジェクト構成とコンポーネント利用法を解説！
サーバーレスNoSQLデータベース「Firestore」を安全に扱うライブラリが公開
再利用性とカプセル化のためのWeb Componentsを基礎から学ぶ一覧
LINEで始めるアプリ開発一覧
ChatGPT×Flutterで迅速なスマホアプリ開発を実現する「FlutterPrompts」がリリース
1年ぶりにリリースしたPHP 8.2──気になる新機能は？ 型やクラス定義の強化ポイントも解説
GoogleのmBaaS「Firebase」を活用したスマートなアプリ開発一覧