はじめに フロントエンドもバックエンドもTypescriptで書きたい！ということで、T3 Stack（T3スタック）について調べてみました。 T3 Stackを利用したプロジェクトを作成するためのCLIツールcreate-t3-appが用意されており、簡単に雛形プロジェクトが作れるため、実際に使ってみました。 この記事は以下の内容をメインに紹介します。 create-t3-appの環境構築手順 雛形プロジェクトの解説（特にtRPCを用いたAPIの呼び出し方法について） T3 Stackとは T3 Stackとはsimplicity（簡潔さ）、modularity（モジュール性）、full-stack type safety（フルスタックの型安全）を追求した思想に焦点を当てています。 そしてそれらを実現するために以下6つの技術スタックが採用されています。 ✅ Next.js ✅ tRPC
Did Google Just Kill Streamlit?
Sitting on my couch, browsing through YouTube recommendations, I came across a video by Prompt Engineering on Google’s latest open-source Python framework named ‘Mesop,’ which is used by teams at Google for internal tooling and rapid prototyping. If you are wondering what ‘Mesop’ means, stop overthinking. Not everything in life makes sense. Will, if you are reading this, drop it in the comments be
せっかくなのでフロントもバックも TypeScript を使おう、ということで、アレコレ考えて作った構成を共有します。何かの参考になれば幸いです。 下記の Web サービスを開発するときに使いました。 システム構成 ランタイム：Bun フレームワーク： Express ORM：Drizzle ORM インフラ：Docker 私的にはバックエンド中心で処理・出力し、そのうえでフロントエンドを使うのが好きです。 ディレクトリ・ファイル構成の例 あまり深くディレクトリを掘りたくなかったので、ルートに散在しています。 ├── assets ：ビルドされたフロントエンドのファイルが入る ├── constants ：定数関係 │ └── index.ts ├── controllers ；コントローラー │ ├── _Controller.ts：ルート(/)のコントローラー │ └──
授業内開発で部室予約システムを開発した話
はじめに こんにちは。calloc134 です。 前回の授業内ハッカソン記事において、200 いいねを頂きました。ありがとうございます！ 自分の大学では、これ以外にも授業内で開発を行う実践的な授業がいくつか存在します。 前回の授業とは別に授業内開発を行う機会があったため、半年ぶりに大学の授業として開発を行いました。 簡単な概要 この授業では、チームで開発の分担を行いながら決められた期限までにコンテンツを制作していきます。自分は後輩とチームを組み、開発を行いました。 本来であればここで開発する内容は静的サイトで十分なのですが、せっかくなので動的サイトを作ることにしました。 後輩に聞いてみたところ、 「自分は軽音楽部に所属しているので、練習室の予約システムを作りたい」とのことでした。 丁度いい機会だと思い、自分の気になっている技術を利用しながら開発を行っていくことを決めました。 全体像 まずは
Franken UI
Home Changelog About Getting Started Introduction Installation Updated JavaScript Updated Web Components New Dark Mode Hooks Theming Typography Accessibility UIkit Components Accordion Alert Align Animation Article Background Badge Breadcrumb Button Card Close Column Comment Container Countdown Cover Description List Divider Dotnav Drop Dropbar Dropdown Dropnav Filter Flex Form Grid Heading Height
記事概要 先日のBloggerからAstroへ移行した記事の別途詳細 ※参考 - Blog移行記事 目的 AstroのBlogサイトにモバイル表示用のタブバー（以降、TabBar）を追加する このBlogのモバイル表示時に使用しているものと同じ 今回、次の3つを配置する ホームへ戻る Topへ戻る 目次を表示する 一連の実装手順についてまとめる 用語説明 Astro とは？ Astroは、ブログやマーケティング、eコマースなど、コンテンツ駆動のウェブサイトを作成するためのウェブフレームワークです。Astroは、新しいフロントエンドアーキテクチャを開拓し、他のフレームワークと比較してJavaScriptのオーバーヘッドと複雑さを低減することで知られています。高速でSEOに優れたウェブサイトが必要なら、Astroが最適です。 -- Astro公式Docs より引用をDeepLで翻訳 参考記事
はじめに GPT-4o miniが発表されたので、APIを使ってNext.js App routerにて簡単なAIチャットページを実装してみました。Vercel AI SDKを使用しています。 以前にも記事を書きましたが実装内容が古くなりましたので新たに記事にしてみました。（今回はLangChain JSは使っていません） GPT-4o mini また、今回はローカルLLM（Ollama）でも利用できる内容としています。 ※ マシンスペックが足りないなど環境がない方は、Ollamaの部分は読み飛ばしてください。 以前の記事 読者対象 Next.js開発の経験者 事前準備 OpenAI プラットフォームから API キーを作成＆取得しておく。 https://platform.openai.com/ Ollamaも使いたい場合は起動しておきます。 参考ドキュメント コードを書く ステップ N
GitHub - franken-ui/ui: Franken UI is an HTML-first, open-source library of UI components that works as a standalone or as a Tailwind CSS plugin. It is compatible with UIkit 3. The design is influenced by shadcn/ui.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
はじめに 本記事について 最近、以下の記事を見て下さった方が多いようで、Reflexの注目が大きくなっているように思います。 しかし、日本語の記事が少なく、Reflexってなにかわからない。 インストールして動かしてみないとわからないことがありますよね。 そんなわからないことのうち、使うか使わないかの参考にできそうな情報を集めました。 まだReflexを触っていない方から、何度も使っている方まで、どんな方でも見れるように記事にしました。 自己紹介 山梨に住んでいる研究開発系のSEです。 主にPythonを使っていて、個人でライブラリの公開もしています。 Reflexのコントリビュートを2023年2月から行なっています。 Reflexとは PythonのみでフルスタックWebアプリケーションを作成できるライブラリです。 Reflexのメリットとは？ Pythonの実装以外、基本的に要りません
Wordpress テーマ開発をすることになり、先日無事リリースを迎えたので備忘録的にツール選定や構成の記録を残しておく。 普段は Web エンジニアをしていて、Wordpress も PHP もほぼ初めてなので最適ではない箇所もあるかも。 方針 納品後の追加改修等は別のエンジニアが担当する可能性が高いので、可能な限り Wordpress テーマとして王道な選択肢で学習コストを下げたい。 静的解析・テスト・継続的デプロイなど、開発生産性を上げるものについては取り入れたい。 スターターテーマ https://underscores.me/ を利用した。2012 年の公開と少々古いが、今でも使われているようで情報量も多い。 Template Hierarchyもあまり理解していない状態だったため、一般的な構成を知りたいと思いベースとなるテーマを探したところ、スターターテーマやブランクテーマとい
ちなみにchatgptに聞きまくるけど嘘っぽいものも入ってるかもしれないからそこは適当にね レイアウトシステムの変遷まちょっとコンテナクエリとかは置いといて…今回は主にflexboxとcss gridってことになりますね flexboxのサンプルtailwind cssはセットアップ済みです。まずflexboxのサンプルコードをお願いしますまあいろいろズバっと出力してもろた <body class="p-10"> <!-- 水平にアイテムを並べる例 --> <div class="mb-10"> <h2 class="text-lg mb-2">水平にアイテムを並べる例:</h2> <div class="flex"> <div class="bg-blue-500 text-white p-4">Item 1</div> <div class="bg-red-500 text-white
2024/07/19 FREEWHEELERS and COMPANY / "U PATCH LOGO" CREST VENT CAP (OLIVE DRAB/BLACK) アップしました! 2024/07/19 FREEWHEELERS and COMPANY / "ORIENTAL DIAMOND UT"SET-IN S/S POCKET T 2カラーアップしました! 2024/07/19 FREEWHEELERS and COMPANY / SET-IN S/S SWEAT SHIRT "ANCIENT MONSTER"2カラーアップしました! 2024/07/17 素敵眼鏡MICHIO / 一寸一杯 Get My Mojo Back (BLACK×GREEN) 再入荷しました! 2024/07/12 Porter Classic / Roll Up Linen Cotton Shi
Lambda function URL活用案件として、Lambdaだけを使ってアンケートフォームを作ってみた。 実際は回答の閲覧用にSlackも使ってるが、ほかは本当にLambdaだけ。 アーキテクチャ コード 冗長な部分もあるので、要点だけ抜粋。フルのコードはこちらに載せた。 これをLambdaのマネコンでデプロイし、Function URLを設定すれば良い。 また、 SLACK_WEBHOOK_URL 環境変数を設定すれば、アンケート結果をSlackに送信できる。 const https = require('https') exports.handler = async (event) => { console.log(event) const req = event.requestContext.http; const sourceIp = req.sourceIp; // can
短時間でできるNuxt3入門（Vue3, Naive UI, Tailwind CSS, pinia） Nuxtの最新バージョンを使ってサンプルアプリを作りました。 Nuxt3の最新機能を豊富に使っています。 APIにはjsonplaceholderを使って、ユーザーやポストの情報を管理できるようなシステムとなっています。 下記が本プロジェクトの環境です。 - Nuxt 3.12.2 - pinia 2.1.7 - tailwindcss 3.4.4 - naive-ui 2.38.2 動画で学習できるコースも出してるので、ぜひご覧ください。 https://www.udemy.com/course/nuxt3-introduction/?referralCode=70826E31016926E92545
はじめに こんにちは！ yu-Matsuです！ 今回はReactベースのWebフレームワークである Remix に関する記事になります。というのも、今年の6月8日にサイバー攻撃を受けダウンしたニコニコ動画の復旧までの繋ぎとして公開されている ニコニコ動画(Re:仮) というサイトがあるのですが、こちらがなんと、Remixを使って3日で実装された とのことなのです！ こんな話を知ってしまったら、エンジニアとしては触らないわけにはいきません！ とはいえ、Remixのドキュメントを読み込んで勉強するのも時間がかかるので、今回は Anthropic Artifacts を利用して実現した、プログラマーと化したずんだもんに教えてもらいながら、簡単なWebアプリケーションを実装したいと思います！ (イラスト：坂本アヒル様(https://www.pixiv.net/artworks/92641351)
WebサイトのスクショやFigma、ワイヤーフレーム画像などを元にTailwindベースで自動コード生成、更にプロンプトで調整も可能なオープンソースのフロントエンド開発向けAI Copilot・「WebCrumbs」
WebCrumbs WebCrumbsはWebサイトのスクショやFigma、ワイヤーフレーム画像などを元にTailwindベースで自動コード生成、更にプロンプトで調整も可能なオープンソースのフロントエンド開発向けAI Copilotです。 長いタイトルですが、要は任意の画像に合わせて自動でコーディングしてくれる、というもの。レイアウトはTailwindベースのclassが付与され、CSSも提供されます。さらにAsk AI機能でプロンプトを入力すれば指示通りに調整してくれます。よくあるAIチャット形式ではないので、回数を減らすため出来る限り細かい指示を出すと良いでしょう。 プロンプトはもちろん日本語でOKです。また、画像が無くてもプロンプトのみでTailwindベースのWebサイトを生成してくれます。プロンプトさえ適切なら望み通りのWebページが即完成します。上のSSはおとといのdamini
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【T3 Stack】フロントエンド・バックエンドTypescript開発入門
Web サービスをフロントもバックも TypeScript で作る時の構成例
AstroのBlogにモバイル表示用のタブバー（TabBar）を追加する
Next.jsでAI Chat UIを作る（ローカルLLMとGPT-4o mini）
Reflexとは？PythonのみでフルスタックWebアプリを構築
2024年にWebエンジニアがWordpressテーマ開発をした備忘録
AIとtailwind cssで学ぶgridとflexbox｜mocotech
TOPページ/Select Shop River Online Store
AWS Lambdaだけでアンケートフォームを作れる - maybe daily dev notes
短時間でできるNuxt3入門（Vue3, Naive UI, Tailwind CSS, pinia）
ずんだもんと学ぶ！ Remixの基礎のキソ - Qiita