はじめに CSSによるページレイアウト Webページのレイアウトを作るとき、要素の位置を操作するCSSはいくつかあります。 代表的なものとしては下記です。 通常フロー フレックスボックス グリッド フロート（ほとんど使わない） 位置指定（position） 表レイアウト(table) など 通常フロー CSSが何も適用していない場合、Webページ上の要素はもともとHTMLが持つルールで表示されます。 ブロックレベル要素のコンテンツは、親要素の幅の100%で、高さがコンテンツに準じます。 インライン要素は、コンテンツと同じ幅・高さを持ちます。 視覚的にみると以下のような感じです。 <div class="container"> <div>ブロック要素です。</div> <span>インライン要素です。</span> </div> .container{ height: 200px; back
Chakraは詰め込みすぎだけど、tailwindのheadlessuiは貧弱すぎ、、という中でまさに欲しかったものが出てきたので簡単に紹介。 2023/01/26更新： 本記事は書かれてから時間が経っており、自分の認識が変わった部分もあるのでアップデートを記載しました。 Radix is 何 Radix（読み方:レイディックス）は、次世代のheadless uiコンポーネントです。headlessというのはstyleがあたっていないということで、UIを「見た目」と「振る舞い」に分けた時、「見た目」が取り除かれているようなイメージです。似た既存ライブラリだとtailwindのheadlessuiが近いですが、より完成度や網羅性が高い印象です。 radix-ui配下には、メインのコンポーネント群であるPrimitives、カラーシステムを提供するColors、Icon群を提供するIconsが
こんにちは、フロントエンドチームの亀ノ上です。 最近は画像生成AIやテキスト生成AIなど、AIによる自動生成に関する話題をよく目にします。特にここ最近は ChatGPT の勢いが凄まじく、毎日のようにニュースを見かけるような気もしています。 今回はそんな ChatGPT でも使用されている言語モデルである GPT-3 を用いて、Nuxt3 で簡単なテキスト生成アプリを作成します。 Nuxt3について Nuxt3とは Nuxt3の機能 Nuxt3インストール インデックスページの設定をする フロントエンド開発 バックエンド開発 OpenAIのAPI Keysを作成 フロントエンドとバックエンドを連携 おわりに 参考 Nuxt3について Nuxt3とは Nuxt3 とは、Vue.js アプリケーションを構築するためのフレームワークです。特徴としては、高速な開発、シンプルな設計、高機能な機能など
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに Nuxt3はVue.jsベースのフレームワークで、より効率的にフロントエンド開発を行うことができます。 本フレームワークを使用する様々なメリットについて、またフロントサイドで私が良いなと感じたポイントを紹介します。 サンプルコードを交えて解説しますので、少しでもNux3を使ってみたいと思っていただければ幸いです。 (Nuxt3に関連するサービスなど、いくつか説明を省略しています。興味のある方は調べてみてください。) こんな人に読んでほしい Vue.jsの経験がある Nuxt.jsを使ってみたい もっと効率的にフロントエンド開発
2023年12月29日00:30 カテゴリプログラミングNuxt Nuxt DevTools の探索 Original: Exploring Nuxt DevTools Nuxt の主な目標は、Web 開発を直感的かつ強力にし、開発者が自信を持ってパフォーマンスに優れた運用グレードのフルスタック Web アプリケーションと Web サイトを作成できるようにすることです。 Nuxt は最近、Nuxt 開発者にとって非常に役立つ開発者ツールキットをリリースしました。 Nuxt プロジェクトをより深く理解し、問題をより迅速に解決するための特別なツールを提供します。 Nuxt 開発者のスーパーヒーローの相棒として想像してみてください。 この記事では、Nuxt Devtools を詳しく見て、その機能と利点を探っていきます。 インストール Nuxt Devtools は Nuxt バージョン 3.7
本文書ではVue.jsのフルスタックフレームワークであるNuxt 3を使ってアプリケーションの開発を効率的に行いたいという人を対象に Nuxt 3についての解説をできるかぎり簡単なコードを利用しながら行っています。Vue.jsのComposition APIのコードが理解できることを前提に記述しているのでVue.jsを使って記述したコードの詳細について解説は行なっていませんが、本文書を読み終えるとNuxt 3の全体像と基礎的な理解を深めることができます。 Nuxtを利用したファイルのアップロードについては別の記事で公開しています。 Nuxt 3とは NuxtはVue.jsをベースに開発されたフルスタックのWEBフレームワークです。 Vue.jsはUI(User Interface)を担当しますがNuxtではVue.jsが持つUIに関わる部分だけではなくSSR(サーバサイドレンダリング)を含
Nuxt.js 3 Vue.jsベースのフレームワーク🚀 Vueアプリケーションの開発を簡素化し、効率化するための多くの機能と最適化を提供します。 Nuxt2からいくつかの新機能と改善を導入していますが こちらの記事では、その比較については取り扱いません。 vue系の経験があるけど、Nuxt3も入門してみたい！という方に向けて、 環境構築からルーティング、デフォルトレイアウトなど基本的な内容をまとめました。 想定読者 VueとTypeScriptちょっとわかる Nuxtの環境構築から概要、基本的な内容だけ手っ取り早く学びたい 環境構築 node、npmがインストールされていることが前提です。 インストールしていない場合は、まずこれらをインストールしてください💁♂️ 公式ドキュメントに記載の通り、 npx nuxi init <project-name>を実行することで、 <proje
はじめに※ Vue 2の知識があることを前提の記事となっています。 今回の題材である Composition API 導入により、Vueの<script>部分の記述が大きく変わります。 Vue 2からVue 3への変更で一番大きなものは Composition API の導入と言っても過言ではないでしょう。 Composition APIは、Vue 2でも拡張機能として導入することはできましたが、多くのユーザーは基本的な Options API を使用していたはずです。 Options APIでは、オブジェクトプロパティとしてdataやmethodsなどの役割ごとにまとめて記述していました。 <script> export default { data: () => ({ count: 0, }) methods: { increment() { this.count++; }, decr
はじめにNuxtJSをメインに使用していることもあって、執筆時点でも今だにVue 2を使用している筆者ですが、 Nuxt3がRC版になったということでようやく重い腰を上げてVue 3を触っていきたいと思います。 この記事では、Vue 2からVue 3への変更点について、いくつかピックアップして紹介していきます。 参考：はじめに | Vue.js 導入Vue 3の導入（インストール）については公式ドキュメントを参考にしてください。 参考：インストール | Vue.js 導入方法自体は変わらないと思います。 CLIについては、Vue 2と同様に公式のVue CLIが提供されていますが、 Vue 3からはViteというツールも使用できます。 Viteについては割愛しますが、Vue CLIよりもビルドがかなり速いため、快適に開発を進めたい方にはおすすめです。 筆者も簡単にしか試したことがないので、
本記事では便宜上以下で表記しています。 Vue.js バージョン 2 -> Vue2 Vue.js バージョン 3 -> Vue3 JavaScript -> JS TypeScript -> TS また Nuxt.js については本記事の対象外となります。 はじめに Vue.js 2 は 2023 年 12 月 31 日に EOL となり、サポートが終了されます。 サポート終了後はセキュリティリリースも行われなくなる予定です。 Vue 全盛期だった 2019~2020 年辺りに作成されたアプリだとまだまだ Vue2 からアップデートできず、現状大分苦労している現場も多いように考えている。にもかかわらず、Zenn を含め記事が殆ど投稿されていないことに驚きを隠せません（React やりたい気持ちはわかる）。 本記事ではこれからアップデート作業に入る or 対応中の人たちのために、以前筆者が
はじめに前回の記事で、Options APIと比較しながらComposition APIの基本的な使用方法について説明しました。 Composition API を初めて知る方は、この記事を事前に読んでいただけていると幸いです。 この記事では、reactiveやrefなどのリアクティビティAPIについて深掘りしていきます。 reactivereactiveの実体reactiveはオブジェクトのリアクティブなコピーを返します。 正確には、対象のオブジェクトをTargetに設定したProxyを返します。 オブジェクトとしての使用感は変わりませんが、ProxyのHandlerによってリアクティブが実現されているようです。 以下の例を見てください。 Proxyについてはこちらを参照してください。 <script setup> import { reactive } from 'vue'; cons
If you've been developing with Vue prior to 2021 there's a good chance that your build tool of choice was the Vue CLI. It's been the de-facto standard for scaffolding Vue.js projects for a while. Now though, Evan You's next generation build tool Vite, has been garnering a lot of attention and is a great alternative to the Vue CLI. The primary reason for making the move is all about speed. Vite's d
はじめに 皆さん、初めまして！ 当アカウント（BlueberryAIxR）での初投稿となる今回は、ChatGPTを最強にするはじめの一歩として、LangChainをテーマにお話してみたいと思います。 ChatGPTとLLMモデル 皆さんがよく使っているChatGPTというのは、LLM（大規模言語モデル）を使ったWebアプリです。ユーザは実際にはLLMを直接使っているわけではなく、あくまでChatGPTというWebアプリが提供している機能を使っているに過ぎません。 これが例えば、OpenAI APIを使っている場合には、このWebアプリを経由する事なく直接（厳密にはAPIサーバ経由で）LLMを利用する事が可能です。しかし、ネット検索ができなくて2021年9月（GPT-4は2022年1月）以降の新しい情報には対応できないとか、ちょっと複雑な計算になると簡単に間違った回答をしてしまう等の問題はO
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
