レベル別

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と合わせて是非、活用してみてください。

【MongoDBの基本コマンド】WindowsでMongndoDBのシェルを使う方法

by
mongoshの使い方

前回の記事ではwindowsのPCにMongoDBをインストールしてGUIから実際にデータを作成しました。 今回はコマンドラインを使ってMongoDBのデータ操作をしてみましょう。 なぜMongoDBのコマンドを学ぶべきなのか MongoDBのコマンドを学ぶことにはいくつかの理由があります。 これらの理由から、MongoDBのコマンドを学ぶことは、MongoDBデータベースの管理や操作、パフォーマンスの最適化、システム管理、自動化などに関わる様々なタスクを効果的に実行するために重要です。 MongoDBのコマンドは実際にJavaScriptでコードを書くときに役に立つ MongoDBのコマンドは実際にJavaScriptでコードを書く際に非常に役立ちます。 MongoDBはJavaScriptを使用して操作することができるため、MongoDBのコマンドをJavaScriptコードに組み込んで使用することができます。以下にいくつかの具体的な例を挙げます。 以上のように、MongoDBのコマンドをJavaScriptコードに組み込むことで、データベースの操作や管理、パフォーマンスの最適化、自動化などを効果的に実行することができます。 Windowsの環境変数にMongoDBを登録する では前回の記事でMongoDBをインストールしていることを前提にします。デフォルトでは下記のファイルパスが存在することを確認しましょう。 C:\Program Files\MongoDB\Server\6.0\bin 6.0はバージョン名なので、自分のバージョンにあったものがインストールされていればOkです。 次に公式ページからMongoDB Shellをダウンロードします。Zipファイルなので解凍してmongosh.exeファイルがあることを確認します。このmongosh.exeと一緒に入ってきたdll￥ファイルをC:\Program Files\MongoDB\Server\6.0\binに移動しておきましょう。 ではシステム環境変数に上記のパスを登録してwindowsが認識できるようにしてあげます。 ※私のPCが英語なので分かりづらくてすいません。。。 これでコマンドライン（コマンドプロンプト）からmongoshを入力するとMongoDBに接続できたことが分かりますね。 もしうまくいかない場合は直接mongosh.exeをクリックしてコマンドプロンプトが開くところから確認してください。これでmongoshが起動すれば実行ファイル自体は問題がないことが確認できます。 mognodbの基本コマンド mongoshを使用すると、MongoDBデータベースと対話的にやり取りすることができます。以下にいくつかの基本的なmongoshコマンドを示します。 mongoshを起動し、指定したホスト、ポート、およびデータベースに接続します。 接続されているサーバー上の利用可能なデータベースの一覧を表示します。 指定したデータベースに切り替えます。データベースが存在しない場合、新しいデータベースが作成されます。 現在のデータベース内のすべてのコレクションの一覧を表示します。 指定したコレクション内のドキュメントを検索します。クエリはドキュメントのフィルタリング条件を指定します。 指定したコレクションに単一のドキュメントを挿入します。 指定したコレクション内の最初にマッチしたドキュメントを更新します。フィルタは更新対象のドキュメントを絞り込むための条件を指定します。 指定したコレクション内の最初にマッチしたドキュメントを削除します。 実際にデータを操作してみる では上記のコマンドを例にデータを操作してみます。 “test>”は、mongoshシェルでデフォルトのデータベースが”test”に設定されている場合に表示されるプロンプトです。”test”はMongoDBのデフォルトのテスト用データベースです。 mongoshを起動し、デフォルトで使用するデータベースを指定しない場合、mongoshは”test”データベースをデフォルトで使用します。そのため、mongoshのプロンプトは “test>” と表示されます。 このプロンプトの下でコマンドを入力すると、”test”データベース内での操作やクエリが実行されます。ただし、別のデータベースを使用したい場合は、use データベース名コマンドを使用して切り替えることができます。 ではデータベースの一覧を見てみます。 このようにadminやconfigのデフォルトでついてくるデータベースが表示されました。newdbというのは前回に作成したデータベースです。 ではmydbという名前でデータベースを作成します。MongoDBではデータベース名が存在しない場合には新しいデータベースが作成されます。 ではこのようにmydbが作成されtestmydbに切り替わりました。 次にコレクションを作成します。コレクションはリレーショナルDBでいうテーブルのことです。例としてuserというコレクションを作成します。 このようにokが返ってきてDB操作に成功したことが分かりますね。 ドキュメントの挿入: 作成したコレクションにドキュメント（データ）を挿入します。以下は例です。 では先ほど作成したyoshiさんのデータを検索してみます。 このように自動で作成されたidと作成したドキュメントが結果として返ってきました。 まとめ このように簡単にmongodbへ接続してmongoshを使用してデータを操作することができました。 次回はnode.jsからmongodbに接続する方法を紹介していきたいと思います。 お疲れ様でした。

MongoDBを始めよう！インストールとGUIを使ってデータを作成する方法

by
WIndows MongoDB　インストール

MongoDBとは MongoDBは、NoSQL（非関係型）データベースの一種です。従来の関係型データベース（例：MySQLやPostgreSQL）とは異なるアプローチを採用しており、非常に柔軟なデータモデルを提供します。 よくリレーショナルベータベースのPostgreSQLやMySQLなどと比較されますが、アプリケーションによってリレーショナルデータベースとMongoDBのようなNoSQLが適切であるか判断することが重要になります。 MongoDBの特徴 MongoDBは以下のような特徴を持っています： MongoDBは、スケーラビリティと柔軟性を重視するアプリケーションや、大量の非構造化データを扱う場合に特に有用です。ウェブアプリケーション、モバイルアプリケーション、IoT（モノのインターネット）などのさまざまな領域で広く利用されています。 MongoDBの短所 MongoDBは柔軟性や拡張性に優れたデータベースですが、すべてのアプリケーションに適しているわけではありません。以下にMongoDBを使うべきでないアプリケーションの例を挙げます： これらは一般的なケースであり、MongoDBが適していないというわけではありません。最終的な選択は、アプリケーションの要件、データモデル、パフォーマンスの要件、チームの経験などを考慮することが大切になります。 MmongoDBをインストールしよう（Windows編） Nextを押します。 ライセンスを承認し、チェックボックスをクリックしてNext セットアップの仕方はComplete（すべてのプログラムがインストールされる）方法とCustom（任意で選択）する方法があります。お好きなほうを選択してください。 例としてCompleteを選択します。 次にService　Configrationでサービスとしてインストールするか確認します。ローカルで使いたい場合は簡単に設定できるのでチェックボックスを入れておいてもOKです。 次にMongoDB Compassをインストールするか聞かれます。これはMongoDBのUIなので是非インストールして使ってみてください。特に初めての人には分かりやすいはずです。下記の画像ではチェックを外してインストールをスキップしてしまいましたが後からインストールすることも可能です。 最後にインストールする確認のメッセージが表示されるので、問題がなければInstallボタンを押してインストールを開始します。 インストールが完了したあと、PCの再起動が必要になります。 再起動が終わった後にWindowsのサービスを見てください。 先ほどインストール時に設定したようにMongoDBのサービスが起動していることが分かりますね。 MongoDB Compassを使ってみる ではMongoDBのGUI（グラフィックユーザーインターフェース）であるMongoDB Compassを起動してみましょう。 ConnectをクリックしてローカルのDBに接続します。 このように新しいデータベースを作成してコレクション（リレーショナルDBでいうテーブル）を作成してみましょう。 では試しにデータを作成してみましょう。 このようにidは自動で生成されますが、ストリングや数字のデータを好きなキー名で作成することができました。 更に同じことがコマンドラインからもできます。 次回はコマンドラインを使ってデータを操作する方法を紹介したいと思います。 お疲れ様でした。

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

Vue3 + Vite + TailwindCSSのセットアップの仕方

by
Vite-Vue-TailwindCSS

今日はViteのビルドツールを使ってVue3とtailwindCSSのセットアップの仕方を紹介します。 すでにTailinwdCSSを使ったことがある方ならその良さをVueで発揮したいですよね？TailwindCSSは軽量でさらにデプロイの際に使用していないCSSをファイルから除くことができる優れたユーティリティライブラリです。 GitHubからソースコードを参照してください。 Vueのプロジェクトのセットアップ ではcdのコマンドでプロジェクトのディレクトリに移動してnodeのモジュールをインストールします。 Tailwind CSSのセットアップ Node.js 12.13.0より新しいバージョンであることを確認してください。 ではTailwindCSSをインストールします。 次にTailwindcssをイニシャライズしてコンフィグファイルを生成します。 ではプロジェクトのルート直下にtailwind.config.jsファイルが作成されたのでそちらを下記の様に更新します。 またpostcss.config.jsも自動で作成されていることを確認します。ちなみにnode.jsでエラーが出る場合はファイル名をpostcss.config.cjsに変えると直ります。 使用されていないスタイルを除くには： tailwind.config.jsにあるpurge（パージ）オプションにコンパイルしたcssファイルを出力したいパスを指定します。 次にassets/styles.cssなどのようにグローバルで使用したいCSSファイルを作成し、下記の様にtailwindcssをインポートします。 次にmain.jsからVueアプリの生成時に上記のcssファイルをインポートするように指示します。 main.js では最後にApp.vueにtailwindCSSのclassを使ってスタイリングをしてみます。 これでテスト用のウェブサーバーを起動するとスタイリングがアプライされたことが確認できますね。 デプロイの際には 下記のコマンドでvueアプリをデプロイ用にビルドします。 これでブラウザの検証ツールから確認すると最小限のCSSしか使用されていないことが確認できますね。 お疲れ様でした。

【コピペだけ】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で確認してください。 お疲れ様でした。