OSS 観光名所を貼るスレ - ぽ靴な缶
これは はてなエンジニアアドベントカレンダー2023 2日目の記事です。 はてなエンジニア Advent Calendar 2023 - Hatena Developer Blog はてなエンジニアのカレンダー | Advent Calendar 2023 - Qiita トップバッターは緊張するけど、順番が回ってくるまで長い間ソワソワするのも嫌、という理由で例年2日目を狙うようにしている id:pokutuna です。今年も成功しました。 観光名所とは 目を閉じれば思い出す、あのコード... あの Issue... あなたが Web 系のエンジニアであれ、趣味で開発している方であれ、必要に応じてライブラリやフレームワークのコードを読むのはよくあることでしょう。公開の場で開発されているソフトウェアは、ソースコードだけでなく、開発コミュニティでの議論やバグ報告なども見ることができます。 リポ
【個人開発】最新のNext.js+NextAuth.js+prisma+microCMSでECサイト作ってみた【フルスタックアプリケーション】 - Qiita
【個人開発】最新のNext.js+NextAuth.js+prisma+microCMSでECサイト作ってみた【フルスタックアプリケーション】TypeScriptフロントエンド個人開発Next.jsprisma はじめに 皆さんこんにちは、mamiなのだ！ 今回はバックエンドは作らずにNextAuth.jsやprisma、microCMSなどを利用してNext.jsでECサイトを作成してみたので、その方法や手順などを公開しつつ、認証周りや大型開発案件でも採用されるstorybookなどについても解説していこうと思うのだ！ フロントを勉強し始めた初学者さんや、フロントがメインではないバックエンドエンジニアの方に向けて、丁寧に解説を挟みながら書いていくので「へ〜フロントってこんな感じのことやってるんだ〜」と思ってくれたら嬉しいのだ！ ちなみにこの記事は丁寧に解説しすぎて死ぬほど長くなってしまっ
www.youtube.com Meta(当時Facebook)のReact Core Teamの主要人物たちに直接インタビューしたドキュメンタリー動画 タイムライン 2012年まで 最初はFacebook社内でReactが普及するまでの道程。 当時世の中的にはクロスブラウザの解決策はjQueryに落ち着き、モバイルアプリ化の流れでAPIサーバーとViewは切り離される傾向にあり、JavaScriptのクライアントサイドで大きいアプリケーション作るためにMVCフレームワークとか取り入れないとね〜という雰囲気だった Facebook社はマーク・ザッカーバーグがHTML5に賭けていた頃*1にBolt.jsというFacebook版Backbone.jsを開発していた 広告プラットフォームのコードは当時Bolt.jsを中心に構成されていたが、Jordan Walkeが関数型プログラミングのアイデア
TypeScript Origins: The DocumentaryはTypeScriptの誕生に関わった関係者たちへのインタビューで構成されたドキュメンタリー動画。 www.youtube.com 製作元はOfferZenというアムステルダムの求人プラットームの会社で、以前にはSvelte OriginsやLaravel Originsも公開している。 本作ではReact.js: The Documentaryの次世代フロントエンドフレームワーク開発競争と時期を同じくして起っていたAltJS戦争の中でどうTypeScriptが現在の地位を獲得していったのかに迫る。 laiso.hatenablog.com 私はTypeScriptについては片手間業務プログラマーという感じで全然詳しくないんですけど、TypeScript Originsのゆりかご からRemove TypeScriptの
This guide is open source, please go ⭐️ it on GitHub and make suggestions/edits there! https://github.com/FrontendMasters/front-end-handbook-2024 1. Overview of Field of Work This section provides an overview of the field of front-end development/engineering. 1.1 — What is a (Frontend||UI||UX) Developer/Engineer? A front-end developer/engineer uses Web Platform Technologies —namely HTML, CSS, and
Reactコンポーネントの基本原則と人気のUI/UXデザインライブラリの解説 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
Reactは単なるUIライブラリではなく、コンポーネントベースのアプリケーション開発フレームワークです。UI/UXデザインの基本原則に加え、再利用性や状態管理、データフローなどの概念も重要です。 Reactのコンポーネントベースのアーキテクチャを活用すると、UIと裏側のロジックを分離して管理しやすくなり、効率的なアプリケーションの開発が可能です。 今日は、Reactにおけるコンポーネントの基本原則の解説と、初心者に役立つReactコンポーネントライブラリの紹介を提供します。 コンポーネントの設計原則 UI（ユーザーインターフェース） UX（ユーザーエクスペリエンス） UIのデザインに役立つReact コンポーネントライブラリ React Material UI React-Bootstrap Fluent UI Chakra UI Semantic UI React Ant Design
【2024年版】JavaScript(React)におけるリーダブルコードのチートシート1~3章 - Qiita
概要 リーダブルコードを読んでいて、JavaやC++、Pythonの事例も混じっているのと割とレガシーな例題が多いなーと感じました。 React.js、Next.js、TypeScriptをメインにフロントエンドエンジニアとして仕事をしている自分用に、後で見返せるよう2024年JavaScript版リーダブルコードのチートシート的なものを改めて読み返しながら随時更新していきます。 そもそもリーダブルコードとは ダスティン・ボスウェル著書の良いコードを書くための技術書です。 エンジニアになったら1度は目を通した方が良いとされる代表格の技術書ではないでしょうか？ 意味としてのリーダブル(readable)コード(code)とは、「読みやすいコード」と直訳できます。 チーム開発ではスムーズな開発や保守性を担保するために読みやすいコードが必要とされます。 リーダブルコードではそんな読みやすいという
2. 機械学習・AIチートシート まずは機械学習やAI開発に関わるチートシートからです！ Machine Learning Cheat Sheet | DataCamp 主要な機械学習アルゴリズム、その利点と欠点、および使用ケースをガイドするものです。初心者からエキスパートまで、誰でも役立つリソースです。 機械学習アルゴリズム チートシート MicrosoftのAzureが提供している機械学習アルゴリズムに関するチートシートです。 TensorFlow Cheat Sheet https://zerotomastery.io/cheatsheets/tensorflow-cheat-sheet/ 機械学習と人工知能のためのオープンソースライブラリ、TensorFlowのチートシートです。基本的な概念やベストプラクティスがまとめられています。 （メールアドレスでサブスクライブするとPDFがダ
シンプルなUIライブラリを使おう2023 - Qiita
皆さんこんにちは。昨今の技術選定においては、「シンプルさ」が重視されることが良くあります。 特に「イージー VS シンプル」という対立軸が持ち出されることが多く、規模の大きなアプリケーションを作る際には「シンプル」側の技術を選定するほうが有利だという論調がよく見られます。 本当にそうなのか、あるいはそもそも「シンプル」とはどういう意味なのかについては皆さんそれぞれの考えがあるでしょうから、この記事では深入りしません。 代わりに、実際どのような技術がシンプルなのかが気になるところです。そこで、今回は筆者が比較的得意なWebフロントエンドのUIライブラリの領域において、どのライブラリがシンプルなのか調査してみました。 React 先日プロジェクトでReactを使ってみたら、本当にシンプルな実装でやりたいことが全部できちゃうというか、すぐに画面に反映できて開発効率的にも良いなと感じました。 フロ
目次＃ 前編 準備段階：計画と指標 パフォーマンスを重視する文化、Core Web Vitals、パフォーマンスのプロファイル、CrUX、Lighthouse、FID、TTI、CLS、端末。 現実的な目標の設定 パフォーマンスバジェット、パフォーマンス目標、RAILフレームワーク、170KB/30KBバジェット。 環境の定義 フレームワークの選択、パフォーマンスコストの基準設定、Webpack、依存関係、CDN、フロントエンドアーキテクチャ、CSR、SSR、CSR + SSR、静的レンダリング、プリレンダリング、PRPLパターン。 中編 アセットの最適化 Brotli、AVIF、WebP、レスポンシブ画像、AV1、アダプティブメディア読み込み、動画圧縮、Webフォント、Googleフォント。 ビルドの最適化 JavaScriptモジュール、モジュール/ノーモジュールのパターン、ツリーシェイ
はじめに こんにちは。Magic Momentでエンジニアをしている伊藤です。 いつもはMagic MomentのプロダクトであるMagic Moment Playbookの開発に携わっています。 元々はGo言語エンジニアとしてMagic Moment Playbookのバックエンド開発に参加し始めました。 ですが、今回フロントエンドエンジニアとしてフロント側の開発に参加することとなりました。 Go言語を使っていたエンジニアがReactを使い始めて驚いたこと、理解しづらかった部分などを書いていこうと思います。 これからフロントをやってみたいと思うバックエンドエンジニアの方の参考になれば幸いです。 そもそもReact.jsとは Magic Moment PlaybookのフロントエンドはReact.jsを使って構築されていますが、そもそもReactとはなんなのでしょうか。 ReactはFac
この記事でできるもの デモ https://react-pokemon-app-c3d8a.firebaseapp.com/ ※画像は非表示にしています ソースコード https://github.com/hato-taka/pokemon-app はじめに この記事の目的は React開発の楽しさを伝えることです！ 詳しい内部のロジックには触れていません。 楽しく学んでもらうために、PokeAPIというポケモンデータを集めたAPIを使用します。 https://pokeapi.co/ この記事を作成するにあたり下記２つの動画を参照しました。 【Reactアプリ開発】3種類のReactアプリケーションを構築して、Reactの理解をさらに深めるステップアップ講座 Build Pokemon App Using React Js |Pokemon Api |2022 記事の対象者 Reactの
ヘッドレスCMSの全体観を掴む | ヘッドレスCMSの本質
コンテンツ管理システムの歴史 なぜ、このような新しい性質を持つコンテンツ管理システム（CMS）が求められるようになったのでしょうか。その理由を知るためには、CMSの歴史と時代背景について知ることが一番の近道になります。 1990年代中頃: CMSの誕生 1990年にWorld Wide Webが登場してから、しばらくの間、WebサイトはHTMLの手動編集によってのみ管理されていました。しかし、次第にWebサイトの規模や複雑性が増していき、手作業でのコンテンツ管理が困難になります。 そして、1990年代中頃、HTMLの手動編集によるWebサイト運営の非効率を解消するためのソリューションとして、最初のCMSが登場します。この時、多くの企業が自作のカスタムCMSを作り、いくつかのエンタープライズ向けCMSも登場しました。 2000年代初頭: オープソース化による急速な普及 2000年代前半になる
Ruby on Rails: The DocumentaryはRuby on Railsの誕生に纏わる44分のドキュメンタリー映像作品。 37signalsの関係者やShopifyのTobias LütkeなどのRailsコアチームの人々のインタビューが中心 www.youtube.com JasonとDavidの出会いからRailsの誕生、広く普及するまでを駆け足でおさらいした。React.js: The Documentaryなんやと比べるとあっさり目な内容。 僕も含め、周りでは「How to build a blog in 15 minutes with Rails」の動画でRailsを知った人が多くて、その動画も出てきて懐しかった。 www.youtube.com 中盤で触れられてる「RailsはスケールしないFUD」な話も、Rubyが遅いとかエンプラには早いとか色々評価があったと
2023年のふりかえり - laiso
TL;DR 2023年に学んだ知識で2024年はマネーを獲得 2022年のふりかえり 2023年にやったこと After ChatGPT ChatGPTの使い方 コーディング自動化 アプリケーション開発 クラウドプラットフォーム関連 技術系の動画 フレームワーク関連 AWSコスト最適化大作戦 オライリー本 メインエディタをVSCodeに乗り換えた AndroidからiPhone 15 Proに乗り換えた OSSへの寄付 2023年にやりたかったこと 2024年にやりたいこと LLMを活用したアプリケーションを開発する 技術書を書く ニュースレターを配信する 動画を作る 事業を作る 2022年のふりかえり laiso.hatenablog.com laiso.hatenablog.com 2023年にやったこと After ChatGPT Chat Completions APIのリリースを
私とRxSwift 2013-2014年 2016-2017年 2018-2019年 何がIssueだったのか 非同期処理 Future/Promise パターンのかわり Observableパターン 宣言的UI 状態管理 どう解決されたか Swift Concurrency で非同期処理 UIKitからSwiftUIへ Combine やObservation おわりに 私とRxSwift 2013-2014年 C#な世界でLINQとかReactive Extensionsが高評価なことを知る。 iOSアプリ開発でもこれを生かせないかということを考えはじめる。ReactiveCocoaのことも知る。 MVVM for iOS - Speaker Deck サーバーサイド方面でもReactive Programming の話題が活発なことを知る。 netflixtechblog.com 直
2023-09-29医療 PF 患者アプリチームのデータドリブンな改善はじめにみなさん、こんにちは。エンジニアの山田です。メドレーでは医療プラットフォームで患者が使う「CLINICS」アプリを iOS / Android / Web で開発・運営しています。日々、患者が便利に使えるように改善をしていますが、特徴としてエンジニアがプロダクトマネージャー(以下、PdM)と一緒に数値を見ながら、改善を行なっているという点が挙げられます。 今回は「CLINICS」アプリを開発している吉岡さんに、どのような開発フローで改善を行なっているのかをインタビューしてみました。 自己紹介吉岡さん医療 PF プロダクト開発室第一開発グループグロースチームにて患者向けアプリ「CLINICS」の開発業務を担当。主に薬局に関する機能開発を行っている。大学の専攻は物理で、大学途中からプログラミングを始めた。その後、 大
はじめに みなさんは動画編集をやったことはありますか？ 私は，頻度は低いものの動画編集をして動画投稿サイトに動画をアップロードした経験があります． 動画編集とは元来めんどくさく手間がかかるものではあるのですが，普段からWebアプリの開発をしている私は，以下のようなことを考えていました． HTML/CSSのように複数オブジェクトを一つのコンポーネントのように扱えたら，CSSのように統括して装飾を指定できたら，HTMLのレンダラー(ブラウザ)が相対値から計算して幅や高さを指定するように，動画のオブジェクトの時間長も編集アプリが計算して指定してくれたら，もっと楽に動画編集できるのになぁ，と． そこで私は，HTML/CSSをベースとした，動画の構成を記述する言語を記述することで動画編集を行えるという技術を開発しました． 元々OSSでやるか，未踏のようなイベントに持ち込むか悩んでいたのですが，大学4
業務で仮想スクロールを使った改善に関わる機会があり、その辺りの知見を活かしつつ、個人的にやりたかったことなども盛り込みつつ、React 用の OSS を作成しました。 もしよろしければスターいただけると励みになります。 使い方 以下のように通常の div などの場合とほぼ変わらない記述で、簡単に仮想スクロールによるパフォーマンス改善を導入することができます。 一般的に、仮想スクロールは単に表示するだけでもセットアップが面倒だったり、特に高さが未知もしくは可変の要素を表示した時にうまく動いてくれないものも多いですが、その辺りも自動的にハンドリングしてくれます。また各 component の bundle size も約 3kb(全体で約 4kb)なので導入し易いと思います。 import { VList } from "virtua"; export const App = () => {
React.js LLM Agent for next generation codingReactAgent is an experimental autonomous agent that uses GPT-4 language model to generate and compose React components from user stories. It is built with React, TailwindCSS, Typescript, Radix UI, Shandcn UI, and OpenAI API. Email addressGet updates → ReactAgent v0.1.0 I've been working in the couple of months on an experiment, trying to make GPT-4 much
1. まずは基本から！React.jsとは？ React.jsはFacebookが開発したフロントエンドのライブラリ。コンポーネントという小さな部品を組み合わせて、動的なユーザーインターフェースを構築するのが得意。SPA (Single Page Application) での開発が主流で、ボタンやフォームなどのUI部品を効率よく作れるんだ。 あれ....? じゃあReactでもう良くない...? 結論 ページ数が少ない小規模な開発ならReact!大規模ならNext.jsか他のやつ！ ページ数が多い大規模の開発ならReactだと読み込み遅くなっちゃう！ 2. じゃあ、Next.jsって何？ Next.jsはReactの上に乗っかってるフレームワーク。このNext.jsの一番の魅力は、サーバーサイドレンダリング(SSR) と スタティックサイト生成(SSG)。これにより、クライアントサイドの
Reactを使用したシンプルな計算機アプリの作成 | 初心者向け四則演算対応 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
はじめに プロジェクトの作成 状態管理とリアルタイム表示の実装 数字ボタン処理 四則演算子ボタン処理 小数点ボタン処理と重複防止の実装 バックスペースボタン処理と入力値の編集機能の実装 クリアボタン処理とリセット機能の実装 計算ボタン処理とエラーハンドリング 安全な四則演算の評価 表示部分の実装 初心者向けのスタイリング例 コード保守性向上のリファクタリング 最後に はじめに この記事では、Reactを使用してシンプルな計算機アプリを構築する手法を紹介します。 このアプリは、iOSのiPhone電卓アプリに似たデザインを持っており、特に初心者に向けたプロジェクトです。 今回作成するReactベースの計算機アプリは、使いやすさを重視し、iOSの電卓アプリに見られるような操作感を提供します。コードはシンプルで分かりやすく保守性が高くなるように設計しています。 以下のデモを通じて、この記事で紹介
React 2023 最新 おすすめ 教材 と検索して疲弊しているあなたもしくはサーバーサイドエンジニアの方へ - Qiita
更新(2023.7.18) 現在以下のシリーズを執筆中です。webpackでのReact開発環境構築を通じたコンパイル、バンドル、ビルドについての理解から、最新のビルドツールのviteの凄みまで扱おうと思っています。ぜひチェックお願いします。 更新(2023.6.28) ReactのDockerローカル開発環境構築方法を同僚が執筆しました。HMR(Hot Module Replacement)もしっかり効いて開発者体験かなりいいので、以下チェックしていただいてハンズオン等進めていただけるといいかなと思います。 本編 TL;DR 色々あってよくわからないモダンフロントエンドまわりをキャッチアップするには、まずその歴史や背景から知っていこう 自分が学びたいことや、そもそもの学習目的を明確化すると学習教材選定が捗る 私は「React ハンズオントレーニング」と「りあクト!シリーズ」を学習素材とし
はいさい！ちゅらデータぬオースティンやいびーん！ 概要 最近、Astro.jsに、Next.jsのWebアプリケーションを移行しましたが、本投稿は、Astroの紹介と、移行作業の感想をまとめるものです。 Astro.jsは欧米ではとても注目されているフレームワークですが、日本ではまだまだ話が広まっていない気がします。 Astro.jsとは Astro.jsは、MPAの静的サイトをレンダーするJavaScriptフレームワークです。 フレームワークといえども、Next.jsのように、Reactなどのフロントエンドフレームワーク専用ではないのです。 どのようなJavaScriptを使っても大丈夫なのです。 React.js === React.js、Vue.js => Nuxt.jsなどのように、フロントエンドフレームワークに一体化したバックエンドフレームワークという従来の考え方から完全に脱出
about motemen 美顔器 (@motemen) / Twitter inspired by airreader.hatenablog.com 15パズルの実装 https://ja.wikipedia.org/wiki/15%25E3%2583%2591%25E3%2582%25BA%25E3%2583%25ABja.wikipedia.org 15パズルの機能を実装するにあたり、考えるべき要素はサイズ16の配列と入れ替え操作の2つのみである。 サイズ16の配列 これは盤面そのものに対応する。 0を空のパネルとして以下の配列があるとする [0, 1 , 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15] これを盤面として表現する場合4要素ずつに区切り、縦に並べてやれば良い [ [ 0, 1, 2, 3], [ 4, 5, 6, 7],
「SP版サロンボード」へGraphQL導入と考察
「SP版サロンボード」へのGraphQL導入と考察 目次 はじめに 案件概要 導入背景 BFF GraphQLの導入 GraphQLライブラリの比較 考察 さいごに はじめに リクルートの美容領域でフロントエンドエンジニアをやっている、加納英樹と申します。 今年で新卒4年目になります。この記事では、自分が2022年4月から1年ほど関わっている スマホ版(以下、SP版)サロンボードリプレイス案件の裏側について話したいと思います。 今回は、GraphQLを導入した理由と、今後横展開する際に気をつけるべきポイントを述べたいと思います。 次回、もう少し技術に寄った話を書こうと思います。 案件概要 HOT PEPPER Beautyのサロン向け予約管理システムとして、サロンボード というものがあります。サロンボードはPC版とSP版がありますが、今回はSP版をリプレイスすることにしました。 実際のアプ
The React Ecosystem in 2023
As React celebrates its 10th anniversary in 2023, the ecosystem continues to flourish with constant advancements and innovations. As one of the most widely-used JavaScript libraries, React remains a favorite among developers for building dynamic and high-performance applications. However, with a vast array of tools and libraries available within the React ecosystem, choosing the right combination
React.jsで簡単なユーザー認証アプリを作ろう！初心者向けガイド - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
はじめに プロジェクト作成 スタイリング 親コンポーネント 子コンポーネントの実装 ログイン状態の保持 ユーザー情報の保存 ログアウト処理 注意点 最後に はじめに 本日は、ユーザー登録、ログイン、ログアウトの機能を持つ認証アプリの基本的な構成を初心者向けに解説します。 Reactでは、ユーザーの認証状態を管理するためにReact ContextやReduxなどの状態管理ライブラリを使用するのが一般的です。 初心者には、Reactの状態管理やファイル構造、データフローに関する概念を理解することは初めての課題かもしれません。 そのため、React ContextやReduxのような状態管理ライブラリを使うことが一般的ですが、これらは初心者にとっては少し複雑に感じるかもしれません。 React Contextフックを使った状態管理では、通常よりもファイル構造が複雑になることがあります。 また、
Radix UI と Tailwind CSS を使用して構築された再利用可能なコンポーネント！「shadcn/ui」 - ソフトウェア開発者のための OSS、まとめてみました！
概要 Web アプリやサービスを開発する際、UI 構築はどのように行っていますでしょうか？ 私自身は普段から React.js や Next.js を使用しており、UI 構築は Tailwind CSS を利用したり MUI を利用して簡単に作成してしまうことが結構多いです。 ja.reactjs.org nextjs.org tailwindcss.com mui.com そんな自分ですが、いつもと同じようなフレームワークだったりデザインを利用しているとどのサービスも同じような感じになってしまうのが欠点ですよね。 いつもと同じようなサービスやアプリにならないよう、新しいフレームワークだったりデザインセットがないか GitHub 上で探していたところ、良さそうなデザインセットを見つけることができましたので、今回はこちらについてご紹介したいと思います。 今回ご紹介する OSS は、Radix
単体テストと結合テストガイドライン - HIKKYフロントエンドガイドラインより 本稿では、弊社HIKKYのフロントエンドチームプロジェクトで主に使われる、フロントエンドのテストの概要についての案内をします。 対象読者: JavaScript・TypeScriptわかる テストってよくわからない テストってなに？ どんなのがあるの？ どうやるの？ なお本稿は株式会社HIKKYフロントエンドチーム向けのガイドラインであるものの、内容については筆者に一任されており、株式会社HIKKY及びその意向等とは無関係です。 テストの種類 テストは主に、次の2種類に分けることができます。 手動テスト 自動テスト 本稿では自動テストを主題にします！ 手動テストの概要 その名の通り、テストをする人が実際のテスト対象（サイトや関数）を手動で確認していくものが、手動テストです。 例えば、サイトが 1 フォームのバ
弊社は「dejam」というサイト改善ツールを運営するかたわらで、広告代理店に対して事業を伸張させるコンサルを提供しています。 「dejam」は無料で使えるので気になる方はこちらから、お問い合わせください。 このnoteの目的弊社は1年半オフライン展示会に参加するとことで、アプローチしたい企業には9割ほど接点を持つことができました。 2024年1月を最後に、しばらくは出展しない予定です。 そこで、PDCAを回してきた最終結論をこのnoteに記載することで、みなさまのお役に立てればと思い、キーボードを取りました。 先に結論を書くと、以下のクリエイティブが最強という着地になりました。 大真面目な展示会のポスターふざけてると思いますか？ いいえ、大真面目で社内議論した末、このようになりました。 どんな歩みを経ればこうなってしまうのか。 それも含めて書き留めようと思います。 なぜオフライン展示会にそ
アクセシブルなフロントエンド開発のこれまでとこれから
アクセシブルなフロントエンド開発のこれまでとこれから 2021年11月27日に開催された JS ConfJP 2021 にて登壇してきました。このページはそこで登壇した内容をもとに書き起こした記事です。 アクセシビリティとは何か フロントエンド開発をしている人であれば「アクセシビリティ」という言葉は耳にしたことがあると思います。 では、アクセシビリティとは一体何を意味する言葉なのでしょう。 アクセシビリティはあらゆる人がアクセスできるようになることを指します。 アクセスする、というと想像しづらいのですが、なんらかの情報を得られるようになる、とある機器やサービスを利用できるようになると言い換えるとイメージしやすいかもしれません。 では「ウェブアクセシビリティ」とは何でしょうか。 外務省の定義として 「ホームページを利用している全ての人が、心身の条件や利用する環境に関係なく、ホームペー
Tailwind CSSを使用しておしゃれなウェブサイトを素早く開発する方法 開発者として経験を積んでいくと、少ないコードで、より多くのことを実行できる技術を使用したいと思うようになるもの。Tailwind CSSのような強固なフロントエンドフレームワークは、そんな開発者の望みをかなえる存在です。 この記事では、ウェブページの構築とデザインを支援するCSSフレームワーク、Tailwind CSSについて学びます。Tailwind CSSのインストール方法や、プロジェクトへの統合方法、そしていくつかの実用的なアプリケーションもご紹介します。また、カスタムスタイルやプラグインの作り方についても見ていきましょう。 Tailwind CSSを使ってサイトを構築する方法について、動画での解説もご用意しています Tailwind CSSとは Tailwind CSS Tailwind CSSは、ユーテ
Reactについての備忘録 - Qiita
Reactについて（完全自分用） この記事について 新しいプロジェクトで、reactを使うといわれたので今更ながら勉強。 reactとは？ UIフレームワーク。 代表的なものにreact.js、vue.js、riot.jsなどがある。 reactの特徴として、以下があげられる。 ・SPA ・コンポーネント指向 ・仮想DOM ・宣言型 SPA Single Page Applicationの略 SPAのメリット ・ライブラリの読み込みが最初の一回だけでいいから早い。 （SSR化しない限り、サーバーに読み込みに行かない） ・レンダリングが豊富 SPAのデメリット ・作り方によっては、むしろ遅くなる。 ・SEOに弱い。 参考URL 公式 reactについて なぜconstructorにsuperを書くの？ イベントについて 最後 参考にした記事があれば多分追加していく
最近は地図関係のアプリを開発してて、ライブラリも多く実装したものを定期的にメモに残しておこうと思う Google Map の API が高額でいろいろなレイヤーを重ね合わせるのが少し面倒そうだったので、OpenStreetMap を使う方法を探索した React Leflet (Leaflet) Deck.gl MapLibre GL JS (fork of Mapbox GL JS) react-openlayers OpenSteetMap を使えるライブラリはかなりたくさんあり色々試したが、本記事では React Leaflet でシンプルな地図を表示させたメモです 環境 React 18.2.0 leaflet 1.9.4 react-leaflet: 4.2.1 React Leaflet を使う準備 $ npm i react-leaflet leaflet $ npm i -
Introduction サーバレスな高速キャッシュやスケーラブルなメッセージングを提供するMomento。 このblogでも何度か記事にしてますが、 さまざまなライブラリやプロダクトと連携可能です。 今回は、ChatGPTをはじめとするLLMの拡張/実装を効率よくおこなうためのライブラリ、 LangChainと連携させてみましょう。 また、DevIOのMomento関連記事はここにあるので、 これらもご確認ください。 LangChain? LangChainは(ChatGPTなど)LLMを利用したアプリを構築するためのフレーワークです。 現在（2023年4月）は、PythonとTypeScript用のライブラリが公開されています。 LangChainを使うことで、LLMへのプロンプト構築を効率よく作成できたり、 キャッシュを用いた処理の高速化や履歴管理などが可能になります。 LangCh
はてなブログ独自の集計による人気記事のランキング。5月28日（日）から6月3日（土）〔2023年6月第1週〕のトップ30です*1。 # タイトル／著者とブックマーク 1 ゼルダとジムとやりがい搾取 - やしお by id:Yashio 2 2食付き1万5千円以下で土曜日に1人で泊まれる！リーズナブルな極上湯の温泉宿23軒 - 温泉ブログ 山と温泉のきろく by id:happydust 3 1991年の山下達郎インタビューに見る根深い孤立感と不信感 - YAMDAS現更新履歴 by id:yomoyomo 4 追い詰められている - みんからきりまで by id:kirimin 5 はてな株に投資すべきか - 東雲製作所 by id:shinonomen 6 jq が jqlang organization に移譲されました - プログラムモグモグ by id:itchyny 7 休日にシ
こんにちは！ryskitです。 この記事はスターフェスティバル Advent Calendar 2023の1日目の記事です。 qiita.com はじめに スターフェスティバル株式会社（通称、スタフェス）に2023年の3月に入社してから早くも10ヶ月目になりました。早すぎる... 入社してKitchen Successチームに参加してからすぐ開発に参加して機能開発を始めたのですが、チームメンバーから「馴染むのが早い」「キャッチアップが早い」「WOW（スタフェスのバリュー）」とフィードバックをいただけることがありました！ 入社してから最初の約3ヶ月間ぐらいの振る舞いは、チームメンバーとして将来の仕事のやりやすさに影響する（つまり、チームメンバーに信頼してもらえるか）と考えていて、この期間に何を意識していたかを振り返ってみようと思います。 ※ 言わずもがなですが、継続的に結果を出して信頼しても
React.jsを使ってヘッドレスWordPressサイトを構築する方法 WordPressは、最も人気のあるコンテンツ管理システム（CMS）の1つで、インターネット全体の41%に相当する8億1千万人が利用しています。シンプルでユーザーフレンドリー、多様なカスタマイズオプション、プラグインやその他のリソースの強力なエコシステムを誇り、ウェブサイトを素早く構築したい人にとって優れた選択肢となっています。 WordPressを最大限に活用する方法のひとつが、ヘッドレス化です。 ヘッドレスCMSは、ヘッドレスシステムとも呼ばれ、コンテンツの管理に使用されるバックエンドCMSの一種です。ヘッドレスCMSのAPIを呼び出すだけで、あらゆるシステムやウェブサイトにコンテンツを統合することができます。 ただし、この手法を選択する際には、フロントエンドを別途管理する必要があります。そこで登場するのがAPI
今さら…というツッコミが聞こえてきそうですがちょっと待ってください。 React.js/Auth0はAuth0の公式にサンプルがありますが、今回はNext.jsを選択しています。 そして、 Next.js/Auth0もAuth0公式にサンプルがあるのですがこれはSSRのサンプルであり、SSGのサンプルはありません。 このNext.js/Auth0/SSGのパターンは、ググっても記事が無くハマりどころがあったのでまとめていきます。 本記事を通してNext.js/Auth0/SSGの構成で認証認可の実装を体験できます。 想定所要時間は5〜10分です。 補足 基礎の組み合わせの話なので、React.js/Next.jsをちゃんと理解している方はハマらないと思います。 本記事は、最終的にはCloudFront/S3の静的サイトホスティングを利用する場合を想定しています。 それでは、はじめていきまし
![[Auth0]Next.jsで生成した静的ページに認証を追加してみた | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/8e81bc75025d4e88341afa9e9fc9af0a236024e2/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2023%2F10%2FAuth0ByOkta.jpg)
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React.js: The Documentaryで振り返るReact普及の歴史 - laiso
TypeScript Origins: The Documentaryを観た - laiso
The Front End Developer/Engineer Handbook 2024
2023年版！エンジニア必見のチートシート集 - Qiita
フロントエンドパフォーマンスのチェックリスト2021年版（PDF、Apple Pages、MS Word）-中編 | POSTD
GoエンジニアがReactにチャレンジして驚いた5つのこと
【初学者歓迎🔰】 Reactでつくるポケモン図鑑📖 - Qiita
Ruby on Rails: The Documentary - laiso
いまさら振り返るRxSwift - laiso
医療 PF 患者アプリチームのデータドリブンな改善 | MEDLEY Developer Portal
【VSML/VSS】動画を編集できる言語を作った話 - Qiita
React Server Components 対応の仮想スクロールライブラリを作りました
ReactAgent - The open-source React.js LLM Agent
Next.jsってそもそもなんで必要なんだっけ - Qiita
Astro.js - Next.jsからWebアプリケーションを移行してみた感想 - Qiita
motemen15パズル - homenis
単体テストと結合テストガイドライン - HIKKYフロントエンドガイドラインより
1年半PDCAを回し続けて展示会を完全攻略した話｜株式会社LeanGo
Tailwind CSSを使用しておしゃれなウェブサイトを素早く開発する方法
OpenStreetMap + React Leaflet で地図を表示したメモ - かもメモ
LangChainのメモリ・キャッシュにMomentoを使う | DevelopersIO
今週のはてなブログランキング〔2023年6月第1週〕 - 週刊はてなブログ
どうして入社してすぐにチームに馴染めたのかを振り返ってみる - そうきたか
React.jsを使ってヘッドレスWordPressサイトを構築する方法
[Auth0]Next.jsで生成した静的ページに認証を追加してみた | DevelopersIO