Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
こんにちは だだっこぱんだと言います。だだっこではないです。 今回は初めてしっかりした個人開発をしたので、技術的な部分についていろいろとお話しします。 つくったもの Aivy というAI作品に特化した画像投稿サイトを作りました🍃 👇よかったらこれ拡散してくれるとうれしいですの ScreenShot ホーム画面 投稿ページ ユーザーページ 検索 投稿管理 なにこれ AI作品に特化した画像投稿コミュニティサービスです。 ただ画像を投稿するだけでなく、プロンプトやモデル等のAI画像生成に使う情報を一緒に投稿できます。 この記事では この記事では技術面にフォーカスしてお話しします。 どうして作ったの? とかその辺の話は下記リンクのNoteにまとめてありますので合わせてご覧ください。 開発体制 メンバー ぼく(高校生) 開発フロー 完成まではゴリゴリローカルでした。タスク分けとか何も管理しません
@G4RDS が、 @uhyo_ と @AlanGDavalos に、SolidJSの登場を踏まえたUIライブラリの考え方について、話を聞いてみました。 https://www.solidjs.com/ Virtual DOMのないUIライブラリ コンポーネントの記述方法がReactのFunction Componentに似ている Type Narrowingについて https://www.solidjs.com/guides/typescript#control-flow-narrowing @uhyo_ のベンチマークについて Reactに有利なベンチマークを作ってみた https://qiita.com/uhyo/items/35cb243557df5e1a87fc React脳によるUIライブラリ書きやすさランキング https://qiita.com/uhyo/items/ff
パフォーマンスなんか気にしたくない Give a man a bug and he'll work for a day. Give a man a benchmark and he'll work for a lifetime.1 https://twitter.com/awesomekling/status/1318615899910307850 パフォーマンスなんかに気をとられながら実装したくないんですよ。 React の memo() や useCallback() のような最適化のためだけの API を呼ぶ呼ばないで 1 ミリ秒も悩みたくないんです。そんな API は存在しないでほしい。 でも気になっちゃうんです。というか、まったく最適化せずに React でアプリを構築していくと、カクつきを体感するぐらいには遅くなりますよね。気にせざるを得ません。 つい最近も React のパフ
SolidJS とは 最近 1.0 が公開された JavaScript の UI フレームワークです。[1] JSX テンプレート 仮想 DOM なし 事前コンパイルによって、フレームワークのコードが「消える」 パフォーマンスが高い といった特徴があります。 詳しくは公式サイトをご覧ください。 日本語ドキュメント 左側のメニュー(スマホなどの場合は右上の > ボタン)から言語を切り替えてください。[2] Get Started: https://www.solidjs.com/guide Docs: https://www.solidjs.com/docs/latest/api これらは両方とも自分が翻訳しました!🎉 翻訳について もともと 5 月くらいに SolidJS のことを知り、軽く触ってみて面白いと思っていました。 6 月末に 1.0 のリリースとともに公式サイトが公開され、リ
こんちには。 データアナリティクス事業本部機械学習チームの中村です。 今回は機械学習ではなくてフロントエンド話で、SolidJSのチュートリアルやってみた記事を書いてみたいと思います。 ちょっと前にフロントエンドを少しやっていたのですが、久しぶりに余暇を使って何か触りたいなと思い、SolidJSというものが目に入ったのがきっかけです。 なお本記事は以下のチュートリアルをやってみて、ココは結構Reactと違うなとか、個人的にハマった部分などフォーカスしています。 詳しく知りたい方はぜひチュートリアルをやってみてください! 環境セットアップ お手元で動かしたい場合は、以下でOKです。 $ npx degit solidjs/templates/ts sample-solidjs $ cd sample-solidjs $ npm i $ npm run dev バンドラがViteだからかもしれ
It's been a long road to get here. It's been so long I can't even remember when I started. I logged on to an old private Bitbucket Repo and found "initial commit" on a repo aptly named "framework" from August 21st 2016. But I'm pretty sure that was my second prototype of a Reactive JavaScript Framework that would eventually become SolidJS. So I can safely say a stable release has been 1000s of hou
SolidjsとSolidStartが個人的にかなり来てるので、今回はSolidStartでSSGだったりSSRだったりをする方法を紹介します。 👇SolidStart 👇Solidjs とりあえず動かしてみる まずはとりあえずで動かします。 超ざっくり解説です。 Create Solid !! Solidjsプロジェクトをつくります。 パッケージマネージャーはお好きなものを。今回はpnpmで行きます テンプレートを選択します。今回はとりあえずbareで。 そのほかのオプションはこんな感じで行きます。 Server Side Rendering?... はSSRするかどうか。 Use TypeScript?... はTypeScriptを利用するかどうか。 ファイルが生成されて入れば成功です。 Run SolidStart !! とりあえず開発サーバーを立ち上げてみます。
SolidJSとは https://www.solidjs.com/ 仮想DOMを使わない、Reactライクに書ける新しいフロントエンドのフレームワークです。 同じく仮想DOMを使わないフレームワークとしてSvelteがありますが、Svelteと違ってReactと近い書き方で記述できるのが特徴です。 今回はReactもSvelteもがっつり使っている私が思うSolidJSの良いところ・もうちょっと改善してほしいところを挙げていきます。 SolidJSの良いところ 高パフォーマンス SolidJSの最大のポイントは仮想DOMを使わずに直接DOMを更新することで高パフォーマンスを発揮することです。 Svelteと同様にコンパイル時点で、このステートが更新されたらこのDOMを更新するというのを紐づけることで仮想DOMいらずにReactのようなアプリケーションを作ることが出来ます。 公式にパフォー
const Component = (props) => { const { isLoading } = props return ( <Show when={!isLoading} fallback={<div>Loading...</div>}> <div>Some Content</div> </Show> ) } こうやってisLoadingを分割代入すると、値が変わっても表示が切り替わらなくなります。 createSignalやcreateStoreによって作成された状態に関しても同じです。 なぜなのか 公式ドキュメントのこのページの2番目のポイントに詳しく書いてありますね。 個人的な解釈をざっくりと書きます。 まず分割代入とは const { isLoading } = propsというのは言い換えると、isLoadingという名前の変数にprops.isLoadingの値をア
はじめにSHIFT DAAE(ダーエ) 開発グループ所属の武藤です。 うっかりSolidJSに触れてみたら、沼にハマりそうです。そんな個人的に第一印象抜群のSolidJSは、高パフォーマンス&Reactの様にコードが書けることが特徴の、最近注目を集めるJavaScriptフレームワークです。 早速、ご紹介していきます。入門編としてご覧ください! SolidJSとは概要ReactやVueと同じく。宣言型のJavaScriptフレームワークです。仮想DOMを使用せず、一度作成された実DOMノードをSignalやMemoといったプリミティブの変化に伴い部分的に更新させることで、高パフォーマンスなUIを実現しています(SignalとMemoについては後程の実装で触れますので、分からない場合はとりあえず読み飛ばしていただいて大丈夫です)。 Reactの様に書けるJSX, Fragment, Cont
以下の公式ドキュメントに書いてあることをコードをふんだんに使って長々と説明してみました。 私もまだ理解出来ていないところがあるので、詳しい方はぜひ記事を書いてください(懇願)。 SolidJS? ReactやVueのようなライブラリです。React Hooksっぽい書き味ですね。 import { createSignal, createMemo, } from 'solid' import { render } from 'solid/web' // コンポーネントはただの関数 const Counter = () => { // createStateではなくcreateSignal const [count, setCount] = createSignal(0) // computedな値を作ることもできる const msg = createMemo(() => `count =
It has come to my attention this article is the first some people are hearing of SolidJS. If you want to learn more about Solid, this is NOT where to start. I suggest looking at the github or the links at the bottom of the article. This just details my personal journey and is highly biased. The number of times I've asked myself that over the years is staggering. Even after hitting 2k stars on Gith
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く