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 =
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く