フロントエンド

フロントエンドはユーザーに見える部分のことになります。

Web開発では、UXデザインやフロントエンジニアが大活躍します。また、会社によってはクライアントとの打ち合わせを直接行うこともあります。

HTMLとCSSを学び、JavaScriptを学ぶのが通例ですが、これに限ることはありません。

Webデザインやウェブアプリケーションに興味がある人は是非フロントエンドの道を進んでいきましょう。

Nodeで.envファイルを活用しよう

by
.envってなに

環境変数は、プログラムの外部で設定される変数です。主にクラウドプロバイダやオペレーティングシステムを介して設定されます。 Node.jsにおいて、環境変数を利用することで、URLや認証キー、パスワードなどの頻繁に変更されない設定を安全かつ便利に構成することができます。これにより、プログラム内部のハードコーディングされた値を避け、柔軟性とセキュリティを向上させることができます。環境変数を使用することで、プログラムを異なる環境で簡単に設定でき、再利用性も高まります。 またGitHubなどにリポジトリを公開する際はこの.envファイルを.gitignoreファイルに登録して大事なキーなどを公開しないようにすることが一般的です。 環境変数の作成方法 Node.jsでは、環境変数はデフォルトでサポートされており、envオブジェクトを介して利用することができます（このオブジェクトはprocessグローバルオブジェクトの一部です）。 具体的に使ってみるために、NodeのREPL（対話型シェル）で環境変数を自分で作成することができます。そのためには、process.envオブジェクトに直接変数を追加するだけです。 例えば、スーツケースパスワードを保存するための環境変数を作成する場合は、次のように変数に値を割り当てます：process.env.LUGGAGE_COMBO=“12345”。 （ちなみに、環境変数は通常、全て大文字で書かれるのが一般的です。） ただし、アプリケーションでは通常、NodeのREPLを使って環境変数を作成することはありません。実際のアプリケーションで環境変数を作成するには、DotEnvなどのパッケージを使用することが一般的です。これにより、プロジェクト内の環境変数を簡単に管理できます。 NodeのREPL（Read-Eval-Print Loop）は、Node.jsの対話型シェル環境を指します。REPLは、コマンドを入力し、それを評価（実行）、結果を表示し、次のコマンドの入力を待ち受けるというループ形式で動作します。 REPLは、開発者がNode.jsのコードを素早くテストしたり、JavaScriptの試し書きやデバッグを行ったりするための便利なツールです。コマンドラインでnodeと入力すると、デフォルトでREPLが起動します。 REPLは、JavaScriptのコードを直接実行し、その結果を即座に表示するため、コードの試行錯誤や動作確認に役立ちます。また、変数の値を確認したり、関数をテストしたりする際にも便利です。 REPLは、Node.jsの開発やデバッグの初期段階で特に役立つツールですが、実際のアプリケーションの開発では、通常はエディタや開発環境を使用してコードを作成・実行します。 DotEnvの使い方 DotEnvは、軽量なnpmパッケージであり、.envファイルに定義された環境変数を自動的にprocess.envオブジェクトに読み込みます。 DotEnvを使用するには、まずコマンドを使用してインストールします: npm i dotenv。その後、アプリ内で以下のようにDotEnvをrequireして設定します: require(‘dotenv’).config()。 なお、一部のパッケージ（例: Create React App）にはDotEnvが既に含まれている場合があり、クラウドプロバイダによっては環境変数の設定方法が異なる場合もあります。したがって、この記事のアドバイスを実行する前に、使用しているパッケージやプロバイダのドキュメントを確認してください。 .envファイルの作成の仕方 DotEnvをインストールして設定した後、ファイル構造のトップレベルに.envというファイルを作成します。ここに、すべての環境変数をNAME=valueの形式で記述します。例えば、ポート変数を3000に設定する場合は、以下のように記述します: PORT=3000。 .envファイルで複数の変数を宣言することもできます。例えば、以下のようにデータベース関連の環境変数を設定することができます: 文字列を引用符で囲む必要はありません。DotEnvが自動的に処理してくれます。 このファイルを作成したら、認証キーやパスワードなどの機密データが含まれている可能性があるため、GitHubにプッシュしないように注意してください。.gitignoreファイルに追加して、誤って公開リポジトリにプッシュされないようにします。 環境変数にアクセスする方法 環境変数へのアクセスは非常に簡単です。グローバルにアクセスできるprocess.envオブジェクトに格納されているため、process.env.KEYのパターンを使ってアクセスすることができます。 もし環境変数の値を変更する必要がある場合は、単に.envファイルを編集すればOKです。 process is not defined エラー process is not defined エラーは、おそらくブラウザ環境でprocessオブジェクトにアクセスしようとした場合に発生するものです。processオブジェクトは通常、Node.jsの環境で利用されるグローバルオブジェクトですが、ブラウザ環境では直接使用することはできません。 もしブラウザ環境で環境変数を扱う必要がある場合は、以下の方法を検討してください: Viteを使って.envを使う これは2つの環境変数を定義しており、VITE_でプレフィックスが付いているものはVueクライアントアプリからアクセス可能であり、プレフィックスのないものはサーバーサイドのコードからのみアクセス可能です。 Vueでインポートしたい場合はこのように記載しましょう。 Vueのようにクライアントが側で使用したい場合はVITE_を環境変数の頭につけることが必要になります。

Vue.jsにVuetifyのMaterial Design Iconを追加する方法

by
Vueにマテリアルデザインのアイコンを追加する方法

今日はVueにMaterial Designのアイコンの追加の仕方を紹介します。公式のドキュメンテーションが分かりづらかったので、役に立つと思います。 Vuetifyのインストールはこちらを確認してください。 Material Designとは Material Designは、Googleによって開発されたデザインシステムであり、ユーザーインターフェース（UI）のデザイン原則とガイドラインの集合体です。現実の物理的な素材や表面の振る舞いを模倣することで直感的なインターフェースを提供し、ユーザーエクスペリエンスを向上させます。シンプルでクリーンなデザインと視覚的な一貫性を重視し、さまざまなプラットフォームで使用されます。 Material Design Iconsとは Material Design Iconsは、Googleが提供する無料のオープンソースのアイコンセットです。Material Designシステムに基づいており、さまざまなカテゴリやテーマのアイコンが含まれています。ベクターフォーマットで提供され、拡大縮小しても画質が損なわれません。デザイナーや開発者にとって便利なリソースであり、一貫性のあるデザインを実現するのに役立ちます。オープンソースであり、自由に使用できます。 ①VuetifyからMDIをインポートする方法 MDI（Material Design Icons）をVuetifyからインポートする方法です。  src/plugins/vuetify.jsもしくはmain.jsに下記を追加 テンプレートでこのように定義できます。 ②Material DesignのSVGを使う方法 これは、アプリケーションを本番環境向けに最適化する際に推奨されるインストール方法です。Vuetifyコンポーネントで内部的に使用されるアイコンのみがアプリケーションバンドルにインポートされます。アプリケーションの他の部分には、独自のアイコンを提供する必要があります。 src/main.js ではMDIからアイコンをインストールします。 これでコンポーネントから必要なアイコンをインポートしてv-iconコンポーネントで使えるようになります。 他にも、FontAwesomeが使えたりするので必要に応じて調べてみましょう。 お疲れ様です。

VueでGoogleでログインしているユーザーのみにFirestoreのCRUD権限を与える方法

by
VueとFirebaseでログインしたユーザーのみにVRUD権限

今日はVue3のフレームワークを使ってGCP（Google Cloud Platform）のAuthenticationの機能からGoogleでログインしているユーザーを認知し、ログインしているユーザーのみにFirestoreのデータベースのCRUD権限を与える方法を紹介します。 まず初めにこの記事を読んで理解しておきましょう。 完成したコードはGitHubから確認してください。 https://github.com/DanNakatoshi/Vue-userLogin-Firebase-CRUD 今日の目的 VueとFirebaseを使ってGoogleでログインしているユーザーにデータベースの書き込み権限を与える（記事の投稿など） プロジェクトのセットアップ では上記の記事をもとにしてプロジェクトを作成します。 本日は、Googleの認証システムに集中するので詳しいセットアップやGoogleクラウドの説明は省きます。 では下記のようなコードをApp.vueに記載しましょう。 テンプレート（Template）セクション： スクリプト（Script）セクション： このコードは、Vue.jsとFirebaseを組み合わせて、ユーザーのログイン状態に基づいて表示内容を切り替えるシンプルなアプリケーションの一部です。ユーザーがログインしている場合、表示名やプロフィールへのリンクが表示され、ログアウトボタンが表示されます。ログアウト状態では、ログインボタンが表示されます。 では、main.jsはこのようになります。 このコードは、Vue.jsを使用して作成されたアプリケーションのエントリーポイントです。以下では、コードの主な機能と各セクションについて説明します。 ※APIキーは環境変数からインポートするようにして他人とシェアはしないように！ では、vue-routerをインストールして、index.jsをこのように書きます。 このコードは、Vue Routerを使用してルーティングを設定し、Firebase Authenticationを使用して認証状態を監視するためのルーターファイルです。以下では、コードの主な機能と各セクションについて説明します。 このコードでは、Vue Routerを使用してアプリケーションのルーティングを設定し、Firebase Authenticationを使用して認証状態を監視し、必要な場合には適切なページにリダイレクトするルーターナビゲーションガードを実装しています。 ではnpm run devのコマンドでログインとログアウトができることと、ユーザー名の取得ができることを確認しましょう！ ここまでできたら、次にFirestoreのデータベースを作成して、デフォルトで表示させるデータとユーザーのプロフィールページを作成してみます。状態管理はPiniaで行うとコードもスッキリするのでまずはPiniaをインストールしましょう。 詳しいPiniaの使い方はこちらの記事を参照して下さい。 ではpinia.jsなど適当なファイルを作成してPiniaを定義していきます。 App.vueではこのようにインポートしてPiniaにユーザーのデータを保管します。 下記の様にdataStoreからPiniaにユーザーのデータを保管させます。 ※必要に応じてこの記事を参照してください。 次にこちらのGitHunのリポを参考にFirestoreのデータベースに接続して初期のデータをロードできるようにしましょう。 例としてpost（記事）コレクションを作成してGoogleのユーザーに付属するuidの情報を割り当てます。これでどのユーザーが記事を作成したか、またuidが一致するユーザーのみ記事の編集や削除が行えるようにします。 まずはfirestoreをmain.jsでインポートしてイニシャライズします。必要な部分だけ追加してください。 次にApp.vueに下記の様なコードを追加します。 postsはVue.jsのリアクティブなデータ(ref)です。refはVue.jsでデータを監視し、変更を追跡するために使用されます。 onMountedはVue.jsのライフサイクルフックの1つであり、コンポーネントがマウントされた後に実行される関数です。つまり、コンポーネントが表示された後に実行される処理を指定するために使用されます。 このコードでは、コンポーネントがマウントされた後に非同期関数が実行されます。非同期関数は即時関数(() => {})として定義されています。 即時関数内部では、FirestoreのgetDocsメソッドを使用して、’post’というコレクション内のドキュメントを取得します。取得したドキュメントはquerySnapshotというオブジェクトに格納されます。 querySnapshotオブジェクトは、取得したドキュメントのスナップショットであり、forEachメソッドを使用して各ドキュメントに対してループ処理を行います。 ループ内部では、各ドキュメントのデータを取得し、postオブジェクトとして作成します。postオブジェクトには、ドキュメントのID、タイトル、および完了フラグの情報が含まれます。 また、console.logを使用してドキュメントのIDとデータをコンソールに表示し、fbPosts配列にtodoオブジェクトを追加します。その後、fbPosts配列もコンソールに表示されます。 最後に、posts.valueにfbPosts配列を代入します。これにより、Vue.jsのリアクティブなデータであるpostsが更新され、コンポーネント内でこれらのデータを使用できるようになります。 では、実際にFirestoreにデータを作成してみましょう。 ではHome.vueに下記のようなコードを書きPiniaに保管したFirestoreのデータベースを読み込ませます。 テンプレート部分では、v-forディレクティブを使用して、dataStore.posts内の各要素に対して反復処理を行います。dataStore.postsは、データストアから取得した投稿データの配列を指します。 v-forディレクティブ内では、postという名前の変数を定義し、dataStore.posts内の各要素を参照します。:keyディレクティブは、各要素の一意な識別子であるpost.idを指定します。これにより、Vue.jsが要素を効率的に追跡し、リレンダーの最適化を行うことができます。 v-cardコンポーネントは、Vue Materialのカードコンポーネントであり、データストア内の各投稿に対して表示されます。:title、:subtitle、:textなどのプロパティには、投稿のタイトル、ユーザー名、コンテンツなどのデータがバインドされます。 これでランディングページにForestoreのデータが表示されるようになりました。 … Read more

Svelteを始めよう！Reactよりも使いやすい？

by
Svelteとは

今日はSvelteのフレームワークを紹介します。 Svelteってどんなフレームワーク Svelteは、JavaScriptベースのフロントエンドフレームワークです。Svelteは、コンパイル時にコンポーネントを効果的に変換し、ブラウザで実行可能なJavaScriptコードを生成することで、高速なパフォーマンスと効率的なバンドルサイズを提供します。 Svelteの特徴的な点は、実行時にライブラリコードを含まずにコンポーネントをビルドすることです。ReactやVueなどの他のフレームワークと異なり、Svelteは仮想DOM（Virtual DOM）を使用せず、変更を追跡するための高度なリアクティビティシステムを備えています。これにより、ブラウザでの実行時のパフォーマンスが向上し、アプリケーションの応答性が向上します。 Svelteのコンポーネントは、HTML、CSS、およびJavaScriptを組み合わせて記述します。コンポーネント内の変数や状態を宣言することができ、これらの変数の変更は自動的にコンポーネントの再レンダリングを引き起こします。また、Svelteではトランジションやアニメーションの作成も容易であり、ユーザーインターフェースを豊かにするための強力なツールが提供されています。 Svelteの他の特徴には、ReactやVue.jsなどの他のフレームワークで使われている機能や構文のいくつかが組み込まれていることがあります。また、Svelteアプリケーションは、単一のJavaScriptバンドルファイルとして出力されるため、配信やホスティングが容易です。 総合的に言えば、Svelteは、高速なパフォーマンス、効率的なバンドルサイズ、シンプルな構文、および強力なリアクティビティシステムを提供するモダンなフロントエンドフレームワークです。 Svelteを開発した人は誰 Svelteは、Rich Harris（リッチ・ハリス）という開発者によって作成されました。Rich Harrisは、The New York TimesやThe Guardianなどのメディア企業でフロントエンド開発者としての経験を積んでいました。 彼は、既存のフロントエンドフレームワークが仮想DOMに基づいて動作することに対する懸念を抱いていました。そのため、Svelteを作成し、仮想DOMの代わりにコンパイル時に効率的なコードを生成することで、高速で効率的なフレームワークを提供しました。 Svelteは2016年に最初に発表され、以降、多くの開発者によって利用されています。Rich Harrisは、Svelteのリードデベロッパーとして、フレームワークの進化と改善に取り組んでいます。彼の革新的なアイデアと貢献により、Svelteはフロントエンド開発コミュニティで注目を集めています。 日本でSvelteを使っている会社 ではSvelteの利点や使うべき状況が理解できたところで早速Svelteのプロジェクトを作成します。 SvelteKitとSvelteの違い SvelteとSvelteKitは、どちらもSvelteフレームワークをベースにしたツールですが、いくつかの重要な違いがあります。 これらはSvelteとSvelteKitの主な違いです。Svelteは効率的なUIの構築に特化しており、SvelteKitはフルスタックのフレームワークであり、ルーティングやサーバーサイドレンダリングなどの機能を提供しています。どちらを選択するかは、プロジェクトの要件と目標によって異なります。 Svelte / Svelte Kitを始めよう ①Node.jsのインストール: SvelteはNode.js環境で動作しますので、まずはNode.jsをインストールしてください。公式ウェブサイト (https://nodejs.org) から最新の安定版をダウンロードし、インストールしてください。 ②Svelteアプリケーションの作成: Svelteプロジェクトを作成するために、ターミナル（コマンドプロンプト）を開き、以下のコマンドを実行します。 myappの部分は自分のプロジェクト名を入れましょう。 ※ちなみにViteでもプロジェクトの作成ができます！ では実際にnpm run devのコマンドでアプリを起動してみましょう。ダイナミックでインタラクティブなウェブアプリが表示されましたね。（demoをインストールするとサンプルコードが見れます。） Svelte Kitのファイル構成 Svelteの一般的なファイル構成は、以下のような形になります。 SvelteKitの一般的なファイル構成は、以下のような形になります。ただし、プロジェクトの設定や追加のモジュールの導入によって、構成は変化する可能性があります。 終わりに いかがでしたでしょうか？Svelteを学ぶことは、モダンなフロントエンド開発において非常に有益です。Svelteはシンプルで直感的な構文を持ち、パフォーマンスに優れたアプリケーションを構築することができます。ReactやVueと合わせて是非、活用してみてください。

Nuxt.jsの静的サイトジェネレータ（SSG）とは

by

Nuxt.jsとは Nuxt.jsはVue.jsフレームワークをベースにしたJavaScriptのフレームワークであり、Nuxt.jsのSSG（Static Site Generation）はその中でも特定の機能の一つです。 ではNuxt.jsで実際にコードを書く前にSSGについて知識を深めておきましょう。 SSGとは SSGは、静的サイト生成とも呼ばれ、事前にサーバーサイドでページを生成し、それを静的なHTMLファイルとして提供する手法です。これにより、クライアントのリクエストごとにサーバーがページを生成する必要がなくなり、パフォーマンスやスケーラビリティの向上が期待できます。 Nuxt.jsのSSGは、開発者がNuxt.jsを使用して静的なサイトを構築する際に便利な機能です。 Nuxt.jsのSSGの特徴 Nuxt.jsのSSGは、サーバーサイドで動的なデータの取得やAPIの呼び出しが必要な場合には、ビルド時に事前生成するデータを取得するための特別なメソッドを提供しています。 要約すると、Nuxt.jsのSSGは開発者が静的なサイトを効率的に構築できる機能であり、パフォーマンスやSEOの向上に貢献します。 Nuxt.jsを使用したSSGの短所 Nuxt.jsのSSGにはいくつかの短所があります。以下にいくつかの一般的な短所を挙げます： 以上が一般的な短所ですが、これらの制約はプロジェクトの要件や目標によって異なる場合があります。Nuxt.jsのSSGは、静的サイトのパフォーマンスやSEOの向上に役立つ機能であり、適切な使用場面で優れた選択肢となることがあります。 では、Nuxt.jsのSSGの短所も理解できたところでNuxt.jsの強みであるSSRと比較してみましょう。 SSRとSSGの比較 SSR（サーバーサイトレンダリング）とSSG(静的サイトジェネレータ)のパフォーマンスの違いを表にしました。 SSR SSG 最新のページを表示できる ★★★ ★☆☆ リスポンススピード ★★☆ ★★★ ホスティングの柔軟性 ★★☆ ★★★ ビルドのスピード ★★★ ★★☆ 上記に上げられたようにSSRと比べてホスティングに制約がないこととサイトのリスポンスが早いことは理解できましたがSSRに比べるとビルドのスピードが遅くなることと、SSRのようにページの柔軟性がなくなります。 また状況によってはSSRとSSGを組み合わせたハイブリッドのサイトを作成することも可能になります。 Nuxt.jsのプロジェクト作成 では下記のコマンドでNuxtのプロジェクトを作成しましょう。 ではデフォルトではapp.vueがランディングページになっていることを確認します。 ちなみにこの＜NuxtWelcome/>のコンポーネントはライブラリから引用されるデフォルトのコンポーネントなので消してしまってOKです。 静的サイトのビルド では下記のコマンドで静的サイトをビルドしましょう。 ビルドが終わると.output/publictディレクトリが作成されウェブサイトに必要なファイルがコンパイルされましたね。この中にindex.htmlがあるのでクリックしてください。 これがSSGのエントリーポイントになります。 まとめ Nuxtを使うことでクライアント側のレンダー、サーバー側のレンダーを意識することが増えるようになります。またSSGを意識することによってさらにウェブ開発の見方が広がることになります。是非試してみてください。

分かりやすい！シングルサインオン(Single Sign-On / SSO)を説明します。

by
SSOの流れ

SSOは認証システムの手法のうちの一つです。 初めてSSOがリリースされたのは2011年になります。それからGoogleやAmazon、Facebookなどのソーシャルメディアのアカウントを使って特定のアプリ、例えばチケット販売、ストリーミングのアプリなどにログインできるようになりました。 このSSOが連携している場合は、メインの画面とは別にポップアップのウィンドウが表示されGoogleなどのログインで使えるプロバイダが選択できるようになります。 このおかけでユーザーはアプリケーションごとにアカウントを作成することなくGoogleなどの一つのアカウントで複数のアプリのアカウントにログインできるようになります。 SlackのSSOの例：下記画像参照 SSOの認証の手法 SSOではメインとして2つの方法が使われます。 ①SAML（ Security Assertion Markup Language ） ②OpenID Connect SAMLはXMLベースで作成されたテクノロジーになります。OpenID Connect（オープンIDコネクト）はOAuth 2.0のフレームワークをベースに作成されたテクノロジーになります。OpenIDはJWT(JSON Web Token)を使いサービスとユーザー間でID（個人情報）を交換します。 SAMLについて では下記のイメージ図を参考にしながらSMALの認証の流れを見ていきます。 ①ユーザーがGmailなどのアプリにアクセスします。SAMLの概念ではGmailなどはサービスプロバイダと呼ばれます。 ②Gmailにログインしたあと、GmailサーバーがSARをブラウザに返します。 ③その後にブラウザがユーザーをIdP（SMAL認証を提供するプロバイダ）にリダイレクトします。例としてoktaやAuth0があげられます。 ④IdPがポップアップなどでユーザーにログイン情報を入力させます。 ⑤ユーザーがログインします。 ⑥ユーザーがログインした後、IdPがSAMLリスポンスを作成してブラウザに返します。この流れをSAML Assertion（アサーション）といいます。SAML Assertion（認証トークン）は暗号化されたユーザ情報を含むXMLドキュメントになります。 上記のステップが完了すると、ブラウザがサインされたSAML Assertionをサービスプロバイダに送ります。 認証されたユーザーはアプリケーション内の保護されたデータにアクセスできるようになるということです。 Open IDの流れ ではSAMLの流れが理解できたところで、Open IDの認証の流れを見てみましょう。 Open IDもSMALに似たプロトコル（手段）になります。しかしサインされたXMLを使う代わりにJWTを使います。 どちらの方法も主流であり、セキュリティ対策がされているので選ぶのはプログラマーの好みになると思います。 お疲れ様でした。

Nuxtでマウスで画面をドラッグしてスクロールさせる

by
Nuxtマウスでスクロール

お疲れ様です。最近のモバイルではユーザーが横幅に入りきらないボタンやメニューのアイテムをスクロールすることが当たり前ですね。 これを同じようにデスクトップで行おうとしてもブラウザではデフォルトでその機能が付いていません。 ですのでこのように見た目の汚いX軸のスクロールバーを使用するしかありません。 では今日はNuxtを使ってデスクトップでスクロールバーをなしでマウスでドラッグしてスクロールする方法を紹介します。 環境 今日はVueのSSRフレームワークのNuxtを使います。Vueの場合はクライアント側でレンダーされるのでWindowオブジェクトにアクセスできますが、Nuxtはサーバーサイドでレンダーされるのでデフォルトではwindowオブジェクトが使えません。この意味が分からない人は、まずはバニラJSでどうやってマウスを使ってスクロールができるのか知っておきましょう！Nuxtのプロジェクトができていることを想定して進めていきます。 VueUseライブラリ 今日はVueでもよくつかわれるライブラリのVueUseを使います。このuseMouseの機能を使ってVueでも簡単にマウスの現在の位置を手に入れることができるので自作で作るのが面倒な場合はこれが使えそうです。このVueUseのライブラリはSSRのNuxtも対応しています。 ではVueUseをインストールします。 インストールが完了したらNuxtのコンフィグファイルにこのモジュールを登録します。 カーソルの位置を知る ではモジュールを登録したところでグローバルでモジュールが使えるようになります。 これでカーソルが移動するたびにリアクティブに位置を取得できるようになりました。こんな簡単にできるとはすばらしいですね。 クリックイベントを作成 ｄえは下記の様にマウスイベントのクリック、マウスムーブ、マウスアップを作成してスクロールのポジションを変更していきます。 これでエレメント内でマウスクリックするとカーソルがつかむイラストに変わることが分かりました。 さらにつかんでいる間にマウスを移動させることでスクロールが移動できるようになりました。 const scrollcontainer=ref(null);はテンプレートrefでVueのやり方でHTMLタグにアクセスする方法です。 const{x}=useMouse();は、先ほど説明した通り現在のマウスの位置を知るモジュールです。今回はx軸だけ必要になります。 const isDragging=ref(false);はマウスがスクロールをつかんだかどうかをリアクティブに保管するための変数です。逆にisDraggingがfalaseの時は何も実行されないようにします。 const startingPosition = ref(0);x軸のスタートの位置です。初期では0にしておいて、クリックイベントで値を入れるようにします。 const postionDiff = ref(0);クリックが始まってからマウスを移動している際にリアクティブでその差を保管する変数です。では上記のデータをもとにmousedownScrollbar、mousemoveScrollbar、mouseupScrollbarを見てください。詳しい内容は関数内に書いたままになります。 最後に::-webkit-scrollbar要素を非表示にしてスクロールバーを隠して完成です！

Vue3+FirebaseでリアルタイムCRUD操作ができるアプリを作成しよう

by

今日はFirebaseのFirestoreデータベースを使ってリアルタイムで更新される、つまり、他のブラウザで更新されたデータベースが自分のブラウザでも更新されるCRUDアプリを作成します。 記事を始める前に知っておくべきこと 完成形はこのようになります。 完成したコードはGitHubから確認してください。 VueのToDoアプリ 今日はVueの説明は省きますがこちらのスターターテンプレートを使用するとFirebaseに集中して理解ができると思います。Gitでクローンして使ってください。 Vue-ToDoリストスターター 今日使用するテクノロジーはこちらです。 ToDoスターターのリポジトリの説明 基本的に理解しておく部分はApp.vueのみです。 App.vue 上記のようにデータベースに接続されていないので更新したデータはブラウザをリロードすると消えてしまいますね。 これからこのプロジェクトにFirebaseのFirestoreデータベースを連携させ、toDoの追加、編集、削除（CRUD操作）ができるようにします。 レッツゴー リポジトリのクローン Gitを使ったことがない人は似たようなファイルを作成しても良いですしGitHubからZipでダウンロードしてもOKです。Gitは必須ツールですので是非学んでおきましょう。Gitの使い方（YouTube） Firebaseのプロジェクトの作成 Firebaseのプロジェクトの作成の仕方はこちらの記事でくわしーく説明しているので先に確認しておきましょう。 Firebaseのモジュールをインストール では下記のコマンドでFirebaseのモジュールをインストールします。 次にプロジェクトの設定の歯車のアイコンの中にある全般のタブをクリックします。 そこにFirebaseのSDKのコードのスニペットがあるのでコピーしておきます。 これは大切な情報なので他人とシェアしないように！ 次に、このコードを読み込ませるファイルを作成します。 src/plugins/firebase.js（名前は何でもOKです。） つぎにfirestoreにサンプルのtodosタスクを追加します。 Firestoreの設定 次にfirestoreの設定を行います。 公式ドキュメンテーションにも詳しい説明があるので読んでおきましょう。 こちらにも書いているようにimport { getFirestore } from ‘firebase/firestore’;を記載してそこからデータベースの操作を行うメソッドを活用していきます。 では下記の様にdb変数にFirestoreのデータベースを格納してエクスポートします。 これでどのコンポーネントでもfirestoreのデータベースが使えるようになります。 firestoreのtodosデータを表示させる こちらのfirebaseのドキュメンテーションを参考にしてデータベースのデータを1回読み取る機能を実装していきます。下記がFirebaseのデータベースからドキュメントを読み込む関数になります。 では下記のように変数todosにfirebaseから呼び出したデータを格納してみます。 これで、Vueアプリからfirebaseのデータを読み込みレンダーすることができましたね。 データをリアルタイムで更新する firebaseの強みであるリアルタイムデータベースの機能を使ってみます。 今のコードのままだとFirebaseで直接データを変更したとしてもVueアプリ側のデータは更新されません。 今回のアップデートで、複数の人が同時にデータベースを更新した際にすべてのVueアプリで表示されるデータが最新のものに更新されます。 Firebaseのリアルタイムアップデートのドキュメンテーションはこちら。 参考にするコードはこちら では下記のようにonSnapshotの関数をtodosように変更してみます。 これで試しにfirestoreにデータを追加するとブラウザをリロードすることなくデータが更新されたことが分かりました。 データの変更をリッスンしているので削除と変更にも対応しています。 Firesotreにデータを追加 次にVueアプリからFriestoreにデータを追加する機能を追加します。 公式のドキュメンテーションはこちら。 今回はIDをVue側で指定しないaddDocメソッドを使用します。 参考になるコードはこちら … Read more

【コピペだけ】NuxtJSでCodePenのクローンを作成しよう

by

皆さん、CodePenは使ったことがありますか？CodePenはHTML、CSS、JavaScriptを入力してその結果をブラウザで見れるウェブアプリになります。CodePenはCSSやJavaScriptを使ってアニメーションを探したりするときにつかったりします。 今日はシンプルなCodePenのクローンを作成したので紹介します。 CodePenの例： 今日は自作でJavaScript、HTML、CSSを入力できるエディターとその結果が表示されるアプリのベースを作っていきます。 完成形は画像のようになります。完成したコードはこちらのGitHubリポからどうぞ。 この記事を読む前に知っておくこと このコードで使用するテクニック リポジトリのクローン では下記のコマンドを使用してリポジトリからデモアプリをセットアップします。 ファイル構成 nuxt.config.ts Nuxtのコンフィグファイルです。 monaco editorのモジュールの登録と、PrimeVueのUIライブラリで使うスタイルのインポートをしています。 plugins/primevue.js pluginsディレクトリはNuxtで指定されているディレクトリでレンダー時にNuxtが自動で読み込んでくれます。ここでは、グローバルで使えるPrimeVueのコンポーネントを登録しています。 詳しいPrimeVueのセットアップの仕方の記事はこちらから。 pages/code.vue pagesも同じようにNuxtで指定されている、自動で読み込んでくれるディレクトリです。pages/index.vueがランディングページになります。 /codeのページに行くとcode.vueのページ（コンポーネント）が読み込まれます。 components/code/editor.vue componentsディレクトもNuxtで指定されているディレクトリになります。 ここで登録されたvueファイルはグロバーバルで<CodeEditor>のように使用することができます。ファイル名の最初が大文字になることと、componetsディレクトリからディレクトリ名を当ててパスをしてするような方法になります。 TabViewとTabPanel：PrimeVueのコンポーネントです。 MonacoEditor：monaco editorのNuxtライブラリで使えるコンポーネントです。 valueJS、valueHTML、valueCSS：初期値とユーザーが入力できるリアクティブな値 iFrameのsrcdoc：iframeDoc変数（computedのHTMLファイルをレンダーします） monacoConfig：テキストエディターのパラメーター（ダークテーマ、ミニマップの表示、行数の表示など） 上記で説明した部分が今回のメインとなるロジックになります。 追加できなかった部分 JavaScriptを実行した際にconsole.logの値をブラウザ（consoleタブ）に表示 これは、以下の理由より完成できませんでした。 お疲れ様でした。

Viteとmonaco-editorを使ってVSCodeと同じテキストエディタを作成しよう

by
Viteでmonao editorを使う

今日はMicroSoft社のテキストエディタVSCodeで使われているmonaco-editorを紹介します。Viteと組み合わせることで今後VueやReactなどにも簡単に組み込むことが可能になります。 VSCodeはどんどん進化しており、Co Pilotも公開されてからAIで次のコードを推測して予測してくれる機能はどのテキストエディタにもかないません。 完成例はこのようになり、ユーザーがVSCodeと同じようにコードを書くことができます。 ちなみにVSCodeをブラウザ上で起動したい場合はhttps://vscode.dev/からアクセスしてコードを書くことができます。 今日紹介するmonaco editorはこちらのURLで試してみることができるので是非使ってみてください。 https://microsoft.github.io/monaco-editor/ まずはmonaco editorのGitHubリポジトリを見てみましょう。 https://github.com/microsoft/monaco-editor このmonaco editorはオープンソースでMITライセンスになります。つまり。。。コードの商用、個人の利用に関わらず、改変でも、再配布でも、商用利用でも、有料販売でも、どんなことにでも自由に無料でつかうことができます。 Reactのコンポーネント ちなみにReactのコンポーネントとして使いたい場合は下記のURLからどうぞ。ライブラリがあるのでそちらを使うと簡単にReactで細かい設定までできるようになります。 https://www.npmjs.com/package/@monaco-editor/react monaco editorでできること monaco editorはVSCodeのです。つまりVSCodeのテキストエディタの部分と同じことができるようになります。 なぜVite monaco editorはESMとAMDの2つのモジュールのバージョンが使えます。今回はESMの方を使います。 どちらにしてもWeb packというバンドラーが入っているのでそれを使わないといけません。 良いことにViteではビルドインのWeb packのworkerのサポートができます。Viteは軽量かつ完成度の高いビルドツールとして標準化されてきているので是非、使うことをお勧めします。 Viteのプロジェクトを作成 では、monaco editorをインストールする前にViteでJavaScriptのプロジェクトを作成していきましょう。 詳しいViteの使い方はこちらの記事を参照してください。 monaco editorをインストール では下記のコマンドでmonaco editorをインストールしてみましょう。 では、サンプルのcounter.jsを削除してmain.jsをこのように書きます。 こちらのコードはGitHubのmicrosoft/monaco-editorから引用しました。 ちなみにダークカラーにしたい場合、テキストエディタをRead Onlyにしたい場合などの細かい設定は下記のようにできます。その他の例は、monaco-editorのPlay Groundで確認してください。 次にstyles.cssを適当に書きます。 重要なのは#contianerのサイズを指定しているところだけです。 このid=contianerにmonaco editorがレンダーされるようになるからです。 完成したコードはGitHubで確認してください。 お疲れ様でした。