React Server Componentsに感じたフロントエンドの消失
はじめに 新年早々に面白そうな記事を見つけました。ReactでのAPI呼出しを最適化するために「部分的にサーバサイドで実行するコンポーネントを作る」というもののようです。 あるいは去年の記事ですが気になってたものとしてBlitz.jsでReactベースのFWであるnext.jsに永続化層を持たせてRailsのようなFWにしようというアプローチもあります。 どちらの記事も書かれてる内容自体は分かる気がするものの 「それをフロントエンドでやる意味あるの？」 というのが拭えずイマイチ腑に落ちなかったんですが、単純に 「私と最前線でやられてる方々で期待してるものがたぶん違う」 という気がしてきたので、その辺を整理のために書いてみます。 注意書き Vue.js/Nuxt.jsは少し触ったことがありますが、React Server ComponentsやBlitz.jsを触ったことは無いです 「なんで
Nuxt 3を使いこなすために基礎から徹底解説 | アールエフェクト
本文書では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(サーバサイドレンダリング)を含
えっ、まだChatGPT使ってんの？ Bingは無料でGPT-4使えますよ！ - Qiita
はじめに こんなタイトルをしていますが、私はChatGPTを悪く言う意図は全くありません。ChatGPTは非常に優れた製品ですし、実際に、世界はChatGPTによって大きく変わりました。LLMを大きく普及させた先駆者として、とても偉大な存在です。 今回は、利用料金に焦点を当てた話になります。 Chat GPT Plusを使いたいけど（もしくは、使っているけど）、ちょっと金額が高いな･･･と感じている方に向けた記事になりますので、ご理解いただけると嬉しいです。 ChatGPT、ちょっと高い･･･！ GPT-4、精度が高くていいですよね！ 僕もプログラムを書くときや、採用するプロダクトを決めるときなんかによく使っています！ でも、ChatGPTのGPT-4を使うには、月額3,000円(※)を払う必要がります。 会社が払ってくれるのなら全く問題ないのですが、個人で使うとなると、正直ちょっと高いっ
【SASS】@useと@forwardとは何か？違いやメリット、使い方を実例で解説。asで名前空間を変更する方法, as * , with, 変数の値を上書きする方法(.scss)｜（初心者向け、わかりやすい）
SASSではこれまで他の.scssファイルをインポートするときに@importが使われてきましたが、@importは廃止となり、@useと@forwardの使用へと変わっています。 しかし@importをそのまま@useや@forwardに置き換えれば、これまでの処理がそのまま使えるわけではありません。 ここでは@useや@forwardとは何か？やそれぞれの使い方、変数を上書きする方法などを実例で解説しています。
何かのときにすっと出したい、プログラミングに関する法則・原則一覧 - Qiita
エンジニア組織を強くするための本を出版しました Qiitaでエンジニアリングをめぐる様々なコミュニケーションの問題とその解決策や考え方を書いてきた。それらの背後にあるエッセンスをこの度書籍として出版するに至りました。 エンジニアリング組織論への招待 ～不確実性に向き合う思考と組織のリファクタリング この書籍は、エンジニアリングを「不確実性を削減する」という第一原理で捉え直し、様々なエンジニアリングとその間のコミュニケーションをめぐる現象を説明していくものです。 デメテルの法則 別名最小知識の法則。デメテルは、豊穣の女神。アスペクト指向などの研究であった「デメテルプロジェクト」に由来。 基本的な考え方は、任意のオブジェクトが自分以外（サブコンポーネント含む）の構造やプロパティに対して持っている仮定を最小限にすべきであるという点にある。 単純化して説明すると、オブジェクトの"メンバーのプロパテ
GraphQL | A query language for your API
The official GraphQL conference, by the GraphQL FoundationSEPTEMBER 19-21, 2023 • SAN FRANCISCO BAY AREA, CA GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve
dncl [プログラミング言語「ドリトル」]
大小の比較は「>」「＞」、「>=」「≧」、「<」「＜」、「< =」「≦」、「=」「＝」、「!=」「≠」を使います。
50万人が毎年受ける試験で採用、“謎”のプログラミング言語「DNCL」を学ぶ意義とは
日経クロステックが2022年10月に実施したプログラミング言語の利用実態調査によると、メインで利用するプログラミング言語で最も回答が多かったのが「Java（ジャバ）」、2位は「Python（パイソン）」だった。ところが、このランキングでトップ10にも入っていないプログラミング言語が、毎年50万人近く受ける試験に採用される。そんな“謎”のプログラミング言語が「DNCL」だ。 DNCLなんて聞いたことがないというITエンジニアもいるだろう。筆者も高校生の息子に昨年聞いたばかりだ。DNCLを採用した試験とは何か、なぜ、どんな問題に採用されたのか。謎のDNCLに迫った。 試験のためのプログラミング言語 DNCLとは「共通テスト手順記述標準言語」と呼ばれるプログラミング言語で、大学入試センターが実施する「大学入学共通テスト」（2020年までは「大学入試センター試験」）で使用している言語だ。DNCLは
Django ドキュメント | Django ドキュメント
最初のステップ¶ Django やプログラミングは初めてですか？ それなら、ここから始めましょう！ 何もないところから始めるなら: 概要 | インストール チュートリアルはこちら: その 1: リクエストとレスポンス | その 2: モデルと管理サイト | その 3: ビューとテンプレート | その 4: フォームと汎用ビュー | その 5: テスト | その 6: 静的ファイル | その 7: 管理サイトのカスタマイズ | その 8: サードパーティ製のパッケージを追加する Advanced Tutorials: How to write reusable apps | Writing your first contribution to Django 助けを求める¶ 困り事ですか？手を貸しましょう！ FAQ を探してみましょう。よくある質問への答えなら、ここで見つかります。 特定のトピ
使えるRSpec入門・その1「RSpecの基本的な構文や便利な機能を理解する」 - Qiita
はじめに RSpecは難しい、よくわからない、といったコメントをときどき見かけます。 確かにちょっと独特な構文を持っていますし、機能も結構多いので「難しそう」と感じてしまう気持ちもわかります。 （構文については僕も最初見たときに「うげっ、なんか気持ちわるっ」と思った記憶がありますw） しかし、RSpecに限らずどんなフレームワークでも同じですが、慣れてしまえばスラスラ書けますし、実際僕自身は「RSpecって便利だな－」と思いながらテストコードを書いています。 そこでこの記事では、僕が考える「最低限ここだけを押さえていれば大丈夫！！」なRSpecの構文や、僕が普段よく使う便利な機能をまとめてみます。 具体的には以下のような構文や機能です。 describe / it / expect の役割 ネストした describe context の使い方 before の使い方 let / let!
【2024年最新版】オススメのプログラミング学習サービス集 - Qiita
はじめに 今回はプログラミング初心者と中級者向けの、プログラミング学習サービスを紹介します。 自分自身が実際に学んできた中でよかったものだけをピックアップしています。 なお、progateやドットインストールといった誰でも知っている学習サービスは省いています。 web制作向け (1) web-design-textbook まずはじめに紹介するのはWeb制作を基礎から実装手法を網羅的に学ぶことができる「web-design-textbook」です。 こちらは基本編~上級編とレベル別になっているので初心者でも入りやすい構成になっています。 かつ問題数もかなり豊富で図を多数用いて解説をしているので独学でも挫折せずに学習を進められる教材になっています。 ぜひこれからWeb制作の学習をはじめたいという人は使ってみてください。 (2) Codestep 次に紹介するのは、HTMLやCSSといった基礎
CSSで乗算がかけられる!!css3の新プロパティ「mix-blend-mode」でデザインの幅を広げよう!! | 株式会社ウェブ企画パートナーズ
ブラウザ対応状況に伴い、css3の「mix-blend-mode」を使い、テキストや画像にブレンドモードを適用しているサイトを多く見るようになってきました。 今回はその「mix-blend-mode」について使い方や実際の効果などをご紹介します。 ブレンドモードとは？ 普段からPhotoshopなどのグラフィックツールを活用している方にとってはお馴染みのブレンドモードですが、知らない方のためにブレンドモードについて説明します。 ブレンドモードは描画モードとも言い、PhotoshopやIllustratorなどのAdobe系のソフトで、昔からある機能の1つです。 ブレンドモードでは要素と要素を重ねた時の表現を指定することができます。重なる部分のコントラストを強めたり、弱めたり、暗くしたり、明るくしたり色を反転させたりと様々な効果をブレンドできます。 ブレンドモード：「乗算」 例を出してみまし
スタイルガイド - Vue.js
最終更新日: 2021年5月22日 このドキュメントは、 Vue 固有の記法についての公式なスタイルガイドです。もしあなたがプロジェクトにおいて Vue を使用する場合は、エラーや有益でない議論、アンチパターンを避けるための参考となります。しかし、スタイルガイドはすべてのチームやプロジェクトで理想とは限らないと考えていますので、過去の経験や、周囲の技術スタック、個人の価値観に基づいた上で必要に応じて慎重に逸脱することが推奨されます。 ほとんどのパートにおいて、基本的に JavaScript や HTML に対する提案はさけています。セミコロンやカンマの使用の是非はどちらでも良いです。 HTML の属性に対してシングルクォートかダブルクォートどちらかを利用するかもどちらでも良いです。しかし、特定のパターンにおいて Vue のコンテキストが役立つと判明した場合については、その限りではありません
Nuxt.js｜SSRのライフサイクル - dev blog
Nuxt.jsのSSRとCSRのライフサイクルがよく分からず、検証してみたので備忘録として残しておきます。 今回使用しているバージョンはNuxt 2.12です。 SSRとCSR サーバーサイドレンダリング(SSR)とは、サーバー側でHTMLを描画してブラウザに直接表示する手法です。 詳しくは公式ガイドに載っています。 Vue.js サーバサイドレンダリングガイド | Vue SSR ガイド Nuxt.jsでSSRを使う場合は、 初回の描画時はSSRとCSR それ以降の再描画時はCSRのみ となっています。 ライフサイクル ライフサイクルを確認するためにこのようなコードを用意しました。 <template> <div> <h1>SAMPLE</h1> <nuxt-link to="/blue">リンク</nuxt-link> </div> </template> <script> expor
TypeScript Deep Dive 日本語版 | TypeScript Deep Dive 日本語版
出典: https://www.npmtrends.com/typescript TypeScriptはJavaScriptを拡張して作られたプログラミング言語です。トレンドが示すとおり、TypeScriptはJavaScriptに代わって第一に選択される言語になりました。TypeScriptが提供する静的型システムは、コードの保守性と可読性を大幅に向上させます。またブラウザ等の互換性を心配することなく、モダンで便利なJavaScriptの機能を利用できます。 TypeScript DeepDiveは初心者からベテランまで役立つオープンソースのドキュメントです。JavaScriptのモダンな機能からTypeScriptの様々な魔法に至るまで丁寧に説明されています。多くのコードサンプルがあり、具体的なTypeScriptの使い方を簡単に理解できます。TypeScript DeepDive日本
【命名規則】BEMを使った書き方についてまとめてみた【CSS】 - Qiita
実務でCSSをガッツリ書くことになったので、復習の意を込めて自分用のチートシートを作成しました。 今回は現場でよく使われているBEMの書き方について調べたことのまとめです。 BEMとは BEMはBlock Element Modifierの略で、CSSを設計･命名していく手法です。 Block： 大枠となる独立した要素 Element： Block中の要素 Modifier： BlockやElementのスタイル 保守性の高さから1番多く使われている命名規則だと思います。 BEMを使う目的 BEMは名前の衝突を避けるために考案されたCSS設計です。 保守性の高さを解決するための手法は他にもあり、HTMLはシンプルがな書き方が求められますが、まだまだ決定打に欠けています。 BEMは見た目が汚いですが、シンプルを求めて面倒な目にあうよりは、少々汚くても扱いやすいBEMが多くの現場で採用されてい
Vue Composition APIで使えるリアクティブ関連のAPI一覧 - Qiita
Vue Composition APIのリファレンスを見たらリアクティブ周りのAPIが大量に追加されていたのでまとめてみました。 この記事は以下バージョン時点の情報です。 vuejs/composition-api: v1.0.0-beta.1 vuejs/vue-next: v3.0.0-beta.17 Vue Composition APIのAPI Reference に掲載されているいくつかのAPIは、まだVue2系で使えるComposition APIのプラグイン（vuejs/composition-api）でサポートされていません。 そのAPIについては マークを末尾につけています。サポート対応状況についてはこちらの記載をもとにしています。 reactive 引数に渡したオブジェクトのリアクティブなプロキシを返します。 Vue2系のVue.observable()と同等の機能です
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Takumi Daimon's web page
asdf | asdf
Abillyz
