本記事について この記事では、Blitz.jsを触ったことのない著者が公式ドキュメントを読んで、１から学んだものになります。 随時更新中... 参考文献 Ship. Fast. Blitz.jsはNext.jsアプリケーションのフルスタックツールキットです。 型安全なAPIレイヤー Blitz RPC を使用すると、REST、GraphQL、またはバニラ API ルートよりも 10 倍高速に機能を構築して反復できます。HTTP やシリアル化で混乱することなく、完全なタイプセーフでクライアントからデータを読み書きします。 認証 Next.js の強力で柔軟な、実戦テスト済みの認証と認可が実現可能です。他の API よりもシンプルな API で、より詳細な制御が可能になります。Google、Github、Auth0 などのソーシャル サードパーティ統合を簡単に追加できます。 規約とコード生成

(私の中で)神のライブラリと名高いSWRですが、見かけのシンプルさによらず意外と多くの機能があります。 今回はドキュメントに記載されていることで、ドキュメントをちゃんと読んでないユーザーが知らないがちのことについて書きます。 大体下に行くほどマニアックな知識になります。 fetchを抑制する(conditional fetch) 条件付きフェッチに書いてあることそのままですが、swrはkeyにnullな値を渡すことでfetchを抑制できます。これを使ってログインしてない時はfetchを抑制するなどの書き方や、あるfetchが終わってから初めて次のfetchを実行するなどの書き方ができます。 const { data: user } = useSWR('/api/user') // userのfetchが終わるまで以下のfetchは抑制される const { data: projects }

As we announced at Next.js Conf, Next.js 12 is our biggest release ever: Rust Compiler: ~3x faster Fast Refresh and ~5x faster builds Middleware (beta): Enabling full flexibility in Next.js with code over configuration React 18 Support: Native Next.js APIs are now supported, as well as Suspense <Image /> AVIF Support: Opt-in for 20% smaller images Bot-aware ISR Fallback: Optimized SEO for web craw

LINEが定期的に開催する技術者向けミートアップ「LINE Developer Meetup」の72回目は、Vue.js Communityと共同で開催。ここではLINEの花谷拓磨氏が「How to development library to Vue 3」というテーマで、Vue 3でパッケージを開発する上でのノウハウを共有しました。 LINEとしてVue.jsのスポンサリングを開始 花谷拓磨氏（以下、花谷）：「How to development library to Vue 3」という内容で登壇いたします。よろしくお願いいたします。私はLINE株式会社のFront-end Dev9 Teamに所属している、フロントエンドエンジニアの花谷と申します。Vue.jsのコミュニティとは3年ほど前からつながりがありまして、詳しくはスライドを参照してほしいのですが、それに付随してOSS開発なども行

本書は、Micro Frontends Architecture Patternsというタイトルを付けていますが、モノリスからJAMstack、Micro Frontendsまで、Webフロントエンドを包括した様々なアーキテクチャパターンの詳細を体系的に紹介しています。 ソフトウェアとしてのアーキテクチャ全体を俯瞰し、他のシステムとのやりとりを設計するような考え方が役に立つことは多いです。フロントエンド観点で、様々なアーキテクチャパターンをまとめることで、Web開発の助けになればと考えています。 また、アーキテクチャの歴史と変遷を知ることで「Micro Frontends」への理解を深めることができると筆者は考えました。Micro FrontendsはThoughtWorksのTechnology RadarではすでにADOPTとなり、海外で多くの事例が存在します。Micro Fronte

A few months ago, we introduced Lightning Web Components, a new JavaScript framework that leverages the web standards breakthroughs of the last five years. Today, we are excited to announce the open sourcing of the Lightning Web Components framework, allowing developers to contribute to the roadmap and to use the same framework whether they are building applications on Salesforce or on any other p

Lviv MD Day 2015 Іван Лаврів "Mobile development with React Native"Lviv Startup Club

この記事は「Nuxt.js で Markdown ベースのブログを構築する」シリーズの一部です。 Nuxt.js で Markdown ベースのブログを構築する（Markdown 編） Nuxt.js で Markdown ベースのブログを構築する（Nuxt.js 編） Nuxt.js で Markdown ベースのブログを構築する（サイトパフォーマンス編） ← ここ 今回はサイトのパフォーマンスをあげるためにやったことをまとめる。 サイト構築初期の状態 サイトを構築したばかりの頃の Lighthouse のスコアは次のような感じだった。 サイト構築初期の Lighthouse のスコア 「Progressive Web App」のスコアが低いのは、Service Worker を使っていなかったのが要因で、「Accessibility」と「SEO」のスコアが低いのは、単に自分が書いたマー

--headless時代の本命？ Chrome を Node.jsから操作するライブラリ puppeteer についてJavaScriptChromee2e puppeteer はHeadless Chrome をNode.jsで操作しやすくしたライブラリです。今日(※ 2017/8/17)一日で凄い勢いでGitHubのトレンド入りしており、TLでも話題になっていたので、早速触ってみました。 Node.jsでChromeを操作するというコンテキストにおいては、Nightmare.jsと同じレイヤに属するプロダクトですね。Nightmare.jsはElectronを介在させることで、Chromeの操作を実現していましたが、今年の5月にChromeでheadlessモードが利用可能になって以降1、headless Chromeを直接操作するライブラリが色々と出始めていますね。この系統は、chr

この投稿は Increments Advent Calendar 2017 の14日目の記事だよ。Hyperapp という JavaScript ビューライブラリを自作しているので、その説明と作った理由について話す。 Hyperapp ができるまでのプロセスや、どんな価値観で作ったかなどを書く。新しいフレームワークを作る時の参考になれば嬉しい。 Hyperapp とは？ Web アプリのフロントエンド用 JavaScript ライブラリ。React, Preact, Vue といった代表的なものよりもずっと小さく、1 KB という超軽量サイズ。他のライブラリに依存することなく使えて、さらにスピードもある Elmアーキテクチャーに基づいてて、アプリケーション設計はElmやReact、Reduxと似てるけど、ボイラープレートは少ないし、TypeScriptにも対応して、とにかくシンプル。 El

Make you a React How to make your own SPA library? goo.gl/UKjXiC

Firebase Advent Calendar 2017 21日目の記事です。 フリーランスでフロントエンドを中心にエンジニアをやっているpotato4dです。 普段はVue.jsを中心に、案件を進めたりコミュニティに関わったりしていますが、今回はそんなVue界隈で今アツいフレームワークであるNuxt.jsとFirebaseを組み合わせて、SPA + SSRにAuthと Firestore を組み合わせたアプリケーションを高速で作る方法を、サンプルとあわせてご紹介します。 2019/10/16 追記 このサンプルは Firestore が存在しない Nuxt v1.x + RTDB 時代のコードを愚直に移行している ので全体的に資料が古くなっています。 インフラ構成については順次更新していますが、特にデータストア操作周りについては できるだけ参考にしないでください。 2019/07/02

2017.11.18 HANATANI Takuma(@potato4d) #jsfes

ReactにするかVue.jsにするか、jQueryだけ触っていたエンジニアがサンプル作って比較してみたJavaScriptVue.jsReact 今のタイミングでWebサービスを、何か新しく開発しよーって思ったら、フロントサイドをどうしようか悩みますよね？ 特にVue.jsかReact.jsか... そんな悩んでいるあなたへの記事になります。 自分の仕事領域について あまり普段javascript触ってません 触るとしてもjQueryが多いです そんな人が書いた記事だと思って下さい 今回作ったもの ReactとVue.jsで簡単なカレンダーを作成しました。 React https://github.com/ykyk1218/react-calendar-sample Vue.js https://github.com/ykyk1218/vue-calendar-sample コンポーネン

2024-09-10 テクノロジア魔法学校の体験談と評判 「テクノロジア魔法学校」というプログラミング教材をご存知ですか？ ホームページの広告などで一度は目にしたことがある人も多いのではないかと思いますが、ディズニーが提供する子供向けのプログラミング教材です。 今回は、この「テクノロジア魔法学校」の体験版を実際に体験してみての感想や、「テクノロジア魔法学校」がどのようなものか、その評判などを見ていきたいと思います。 テクノロジア魔法学校とは 料金 エント […] 2024-09-10 レンタルサーバー「クイッカ」の評判と使い勝手 レンタルサーバーとして有名なサーバーの一つに、「クイッカ」があります。 名前は聞いたことのある人も多いのではないかと思いますが、今回はこの「クイッカ」について、料金やスペック、評判などを見ていきたいと思います。 レンタルサーバー「クイッカ」の基本情報 レンタルサー