Magic UIUI library for Design Engineers20+ free and open-source animated components built with React, Typescript, Tailwind CSS, and Framer Motion. 100% open-source, and customizable.
私が愛するフロントエンドのツールたち2023
自分がチームでフロントエンドの開発をするときの技術選定について書きます。 ログインしてユーザーごとに個別の情報を扱うことがメインのサービスを前提に書きます。 考え方 メンテナンス性の優れたものを選ぶ 制限が少ないものを選ぶ 余計なことに気を使わない 一気にいろんなことに挑戦しすぎない フレームワーク 正直に書くと最近は問答無用でNext.jsを選択しています。 慎重な性格なので、自分が責任を持って開発、運用するプロダクトであれば自分の経験値が高く、多くの課題をクリアできるNext.jsを選びます。 一部インフラの制約があるものの、ページごとにSSGやSSR、On-demand ISRなどができること、Reactの大きなエコシステムの恩恵を受けられることは非常に大きいです。 採用面でも現状Reactを扱える人は他のフレームワークを扱える人より多く感じます。 次点でCloudflare Wor
SPA Componentの推しディレクトリ構成について語る
こんにちは、よしこです。 この記事は 2020年に立ち上げたWebフロントエンド構成の振り返り の「Componentのディレクトリ構成」項の詳細記事です。単体でも読めますが、よければ元記事もあわせてどうぞ！ この記事では、今わたしが 株式会社ナレッジワーク というスタートアップで開発・運用しているプロジェクトにおいてうまくいっていると感じているComponentのディレクトリ構成についてご紹介していきます。 ディレクトリ構成 Componentは src/components の中にまとめていて、その下に以下の4種類の分類ディレクトリを切っています。 src/components/page src/components/model src/components/ui src/components/functional 分類ディレクトリを考えるにあたって重視したポイントは以下。 新しくco
Laravel5.7でVueを利用した開発をしてみる - Qiita
やりたいこと Laravel + vue + axiosの連携 Laravel mixを利用したワークフローの確認 React版もいちおう書きました。 やること サンプルとして下記のようなTodo管理システムを作ります。 こちらの記事が特に参考になりました。ありがとうございます。 前提知識 vueの開発環境はwebpackやCLIを利用して行うことが普通ですが、LaravelにはLaravel Mixというwebpackを簡単に取り扱うためのラッパーがあります。動作は、webpack.mix.jsに下記のように定義されています。 mix.js('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css'); resources/js/app.jsをいじってnpm run devを実行すると
Vue.js + Vuex + TypeScript ファーストインプレッション - Shin x Blog
日頃は、サーバサイドの開発が主なのですが、その UI として フロントエンドの開発も行うことがあります。最近話題の Vue.js を試してみたのでその感想などを。 前提 これまで利用した構成 Vue.js 構成 雑感 ちょっと試す、がすぐにできる vue-cli が楽 vue ファイル template ディレクティブ scoped css vue-router / Vuex 連携 Vuex mutation を直接呼んで、state を変更 コンポーネントから直接 state を操作 TypeScript Vue.js 入門 さいごに 前提 これまで利用した構成 ベースとして、これまでプロダクションで利用したことがある構成は以下です。いずれも、フォームベースの SPA で、現在も稼働しています。 AngularJS 1.x AngularJS 1.x + TypeScript React
ReactとVueってどう違う？全く同じアプリをReactとVueで作成してみて分かった相違点
日常的にVueを使用している開発者が、Reactはどうなのだろうと思い、ReactとVueで全く同じアプリを作成した時のそれぞれの工程を比較して分かった相違点を紹介します。 I created the exact same app in React and Vue. Here are the differences. 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 隣の家の芝生は青く見える VueとReactで作成したアプリの見た目を比較 VueとReactはデータをどのように変更させるか アイテムの新規作成 アイテムの削除 イベントリスナーを渡す 子コンポーネントにデータを渡す 親コンポーネントにデータを戻す 終わりに 隣の家の芝生は青く見える 私は現在の職場でVueを使用しており、Vueがどのように機能するかかなり理解してい
2018 年 React と Redux のエコシステム総まとめ - Qiita
Angular などの JavaScript フレームワークは大規模向けに設計されており、標準で多くのエコシステムが組み込まれています。 React は単なる View ライブラリです。そのため View ライブラリを補完するためのエコシステムの選択が必須となります。 エコシステムを自由に組み合わせて開発者とプロジェクトに応じた理想的なフレームワークを作成する必要があるわけです。 これは、小規模アプリケーションから大規模アプリケーションまでの様々な要件やニーズに対応できる柔軟性が高いことを意味していますが、エコシステムを選択するためのコストが必要となります。 下記では、筆者が最低限、導入を検討する余地があると考える主要な React のエコシステムとその簡単な概要を記載しています。 筆者の独断と偏見で選択したエコシステムであることを考慮してお読みいただきたいです。 既知のエコシステム (ほ
Reactと一緒に使う時のCSS in JSのライブラリ選定とか所感とか - Qiita
CSS in JSの基礎 原点はこちらのスライドがよく挙げられる。 いわゆる「CSSのあらゆる問題をJSで解決する」という感じのもの。 先行の記事としてはこのような感じ CSS in JS(Elm)したら想像以上に良かった Free-Style のススメ ~ CSS Modules は解決策ではない とりあえず今回はReactと一緒に使う前提のことを考える CSS in JS ライブラリの実装系統 CSS in JSライブラリもかなり色々あるが、だいたい下記の観点で分類できそうだった。 スタイルの再現に関する実装 <style>タグを生成して、<head>にinsertする実装パターン 昨今のスタンダードなライブラリの使っている手法 CSSの疑似要素や@media queryもだいたい使える InlineにCSSを展開する実装パターン わりと絶滅危惧種っぽい（開発止まっていたり） そもそも
Reactを使ったモジュラーCSS : CSS-in-JSとCSS Module | POSTD
Buffer のメンバーはReactが大好きで、フロントエンドの多くのコードベースを徐々にReactに移行させています。ReactにFluxを加えると、モジュラー形式の小さなアプリでできた複雑なプロダクトを構築するための、とても健全な方法になると思います。そこで、１つ１つの新しい小さなアプリと機能を、大規模な構造体に追加される、Reactの新しいブロックと考えます。 私は最近、このような新機能の１つに取り組んでいますが、React＋Fluxのアプリケーションを作るのがいかに簡単であるかと、その理由について、さらに夢中になってしまいました。Reactを使うと有意味なコンポーネントを集めてUIを宣言的に構築するのが楽になり、Fluxはその混成体に妥当なデータフローをもたらします。 複雑なアプリケーションを作るときに発生する課題について多くの考察がなされましたが、React＋Fluxの組み合わせ
ReactとCSS
Reactを少しずつ使い始めていて、コンポーネント指向でコードを書いていけるところが自分の経験だとDelphiのような感じでとても良い。 JavaScriptとHTML(JSX)を1つのスクリプトにまとめることができたのは良いのだけど、そうするとやはりCSSも一緒にまとめたくなってくる。 それでReactとCSSについていくらか調べてみた。ちなみにElectronで動作すれば良いので、Blinkのことしか考えていない。 CSS in JS そもそもReactでCSSは普通どういう風に書くのか調べてみた。 React.js + CSS React: CSS in JS ひとつのやり方ではあるけども、style属性に一つ一つ指定していく方法。 辛くない？疑似要素は？疑似クラスは？継承してもらいたいプロパティとかもあるんだけどな〜 scoped CSS せっかくコンポーネントにするのだし、CSS
reiny v0.3.4時点の新機能 - Qiita
reiny - Reactに最適化したテンプレートエンジンを作り始めた - Qiitaで紹介したreiny、どんどんバージョンあげてて今0.3.4。 mizchi/reiny 発表時点からの細かい改良点は無限にあって列挙できない、というか元がバグりまくってたので、ひたすら直していた。 とはいえだいぶ動くようになったので、v0.3.4時点でのめぼしい機能を紹介したいと思う。コメントが怪しい以外はちゃんと動いてると思うが、実験的な段階は脱していない。 中身の詳細はここに。 reiny開発メモ - mizchi's blog Natural Inline Style 次のように比較的自然なCSSを記述できるようになった。 会社でこれ頼むと言われた。今まで通りの backgroundColor = 'red' みたいな書き方もできる。url()だとかシステムカラーとかはサポートしていない。 システ
フロントエンドを楽にするために
フロントエンドを楽にするために Qiitaを支えたい技術 at 時雨祭 About HN: mizchi Qiitaの方からきました(入社半年たったらしい) Reactオジサンはそろそろ飽きてきた Angularに興味が無いのでこっちにきた 最近の業務 Kobito for Windows Closedβ中: もうちょい待ってろ お前らウェブエンジニアはWindows使わないのでβユーザー集めにくいんじゃ 省力モード 一昨日がClosedβリリースだったんで察してくれ！！！ ついさっきまでバグフィックス用のビルド作ってた Qiitaを支える技術? 4ヶ月ほどほぼソロ作業 正直カウボーイぎみ OSSでドキュメントガンガン書いてカバー(したい) 業務から派生したOSS mizchi/arda Flux フレームワーク mizchi/stone-skin IndexedDb ラッパー mizch
歌舞伎座.tech#6「VirtualDOMとReact」 アウトラインメモ
歌舞伎座.tech#6「VirtualDOMとReact」 - connpass に参加して来たのでメモ。 すべてのCSSに死を！これはJSerの叫び！- @kyo_ago スライド: CSSに死を！これはJSerの叫び！ #kbkz_tech CSSが辛い CSSはカプセル化とか継承とか、プログラムからの概念がそのまま持ってこれない ReactStyle js-next/react-style JS内にStyleを埋め込むことができる そのままオブジェクト的に入れられる Template Stringsと合わせればその場でCSSを入れることができる styles=にスタイルを入れる セレクタをあまり考えなくていい style属性でスタイリングする 擬似要素、擬似クラスが全滅 :hover :active などが使えない。 CSSの継承などの概念が消える 自分で頑張る必要がある ユーザプレ
React Nativeがスマホアプリのフロント開発を変えるのか - ワザノバ | wazanova
Reactは当初、「Huge step backwards（これではメンテできなくて、かえって大きく後退してしまっている。）」「Rethink established best practives（皆が積み上げてきたベストプラクティスを変えようとしている。）」と揶揄されたりもしましたが、最近は他のJavaScriptフレームワークにもその思想の一部が反映されるようになって、メインストリームに近づきつつあるようです。 さて今回Facebookが、React Nativeを発表 & オープンソースとして公開して話題になっていますが、Tom Occhinoは React.js Conf 2015のキーノートスピーチで、「一度書けば、どのプラットフォームでもうまく動作する。」ではなく、「一度覚えれば、どのプラットフォーム向けにも書けるようになる。」ものであることを強調しています。 同社の開発メンバ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【2024年】React, Tailwind CSSでメルカリクローンサイトを作ろう【入門】