【図解解説】これ1本12分でReactのコンセプト全20種を理解できる教科書 - Qiita
はじめに こんにちは、Watanabe Jin(@Sicut_study)です。 ReactはAIブームなども相まって人気のJavaScriptフレームワークです。今後も更にReactを利用したアプリケーションは増えることが想像できます。 Reactのコンセプト(基礎)をしっかりと理解することは、効率的で保守性の高いアプリケーション開発において不可欠です。今回はそのなかでも特に大切なものを20個解説していきます。 この記事を読むことで Reactの基礎から応用までの体系的な知識を一箇所で習得できる コンポーネント設計やステート管理など、直面する課題に対する解決策を理解できる パフォーマンス最適化やエラー処理などアプリケーション開発に必要な知識を得られる 最新機能（React 19、Suspenseなど）について学び取り入れられる 面接や技術的な議論の場で、Reactについて自信を持って説明
【完全比較】VS Code最強の3大AIアシスタント！Cline vs Roo Code vs CoolCline - Qiita
Cline : シンプルかつ導入しやすいオープンソースAI Roo Code : Clineを拡張し、UIや役割切替が充実 CoolCline : 機能総合版。自動承認やコスト管理などを備えた最上級仕様 それぞれの特色や目的に合わせ、最適なツールを選んでみてください。 以下では、それぞれの詳細を見ていきます。 （長い割に上部でまとまっているので、以降は興味のある方のみ読んでください。） 1. Cline（クライン） 概要 Clineは、VS Code上で動作するオープンソースのAIコーディングアシスタントです。 VS Code拡張機能としてインストールし、コマンドラインインターフェース（CLI）やブラウザ操作とも連携できます。 GitHub Copilotのようなコード補完とは異なり、プロジェクト全体を理解して複数ファイルにわたる修正やビルド・テスト実行まで自律的に行える点が強みです。 ま
【爆速UI設計術】モダンなwebデザイン素材集 - Qiita
特徴 女性らしいイメージがやや多い 下記のような柔らかい印象のイラストが多いです。 【ガジェットストック】 ガジェット関連のものを使用したい場合は、下記を使用すると良いと思われます。 【アイコン系】 【human pictogram 2.0】 オリンピックで流行ったやつです。 本サイトでは、アタッチメントをつけたりすることでかなりカスタマイズ性が高いのが特徴です。 【EXPERIENCE JAPAN PICTOGRAMS】 特徴 海外から見た日本が表現されている これはシンプルにUIが凝ってたので紹介します。 和テイストを演出したい場合は、良さそうですね！ 【ICOOON MONO】 こちら色・サイズも変更可能です！ 【Icon-rainbow】 ICOOON MONOと異なり、こちらは、中が肉抜きされているのが特徴。 【IFN FREE ICONS】 このデザインはどのようなパターンにマ
オブジェクト指向でUIを考えられるようになりたい。 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 1. 目的 UIデザインを勉強し始めました。現在「オブジェクト指向UIデザイン-使いやすいソフトウェアの原理」を読んでいます。そのため、学習進行の記録と復習を兼ねて、学んだことを記事にしようと思います。 以下「1. オブジェクト指向UIとは何か」という本書のさわり部分についてまとめています。 この記事で載せている例には私が考えたものも含まれていますので、間違い等ありましたらコメントにてご指摘いただけますと幸いです。 2. オブジェクト指向UI(OOUI) UIをオブジェクト(ユーザーが操作する時の対象物)を起点に設計します。GUIももと
【閲覧注意】イライラ不可避なUIデザイン10選 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 人は見た目が9割 皆さん一度はこの言葉を耳にしたことがあるのでしょう。内面がどれほど素晴らしくても、外見がそれに見合わないと、なかなか本当の価値を認めてもらえないものです。 この話は人間だけでなく、アプリケーションにも当てはまります。どれだけ内容が素晴らしくても、見た目がイマイチだったり使い勝手が悪かったりすると、ユーザーに敬遠されてしまいます。(私は以前ネ⚪︎フリからア⚪︎プラに切り替えたのですが、使いにくく感じたため、すぐに元のサービスに戻しました) エンジニアの皆さん、優れた技術力を持ちながら、デザインが原因でユーザー離
【CSS】「なんかドロップシャドウがダサくなるんだけど」を解決する。 - Qiita
概要 みなさんは、このドロップシャドウを見てどう思いますか？ ドロップシャドウの色が濃かったり、ドロップシャドウの向きが変な方向だったり、 あまり綺麗なドロップシャドウとは感じないですよね？ この記事では、これが発生する原因 と 綺麗なドロップシャドウの使い方を解説していきます。 この記事を読んで理解すれば、これからドロップシャドウに悩むことはなくなるでしょう！ ドロップシャドウが綺麗にならない原因 1. デザインを3次元として捉える UIやグラフィックデザインは、複数の平面が重なりながら、組み合わさって作られています。 例えばUIだと、 ベースとなる平面に、カードの平面が重なっていたり、 カード平面の上に画像やボタンといったオブジェクトが置かれています。 このように、UIやグラフィックデザインは２次元で作られているのではなく、 各平面・オブジェクトがZ軸上に重なることで作られています。
Adobe製デザインシステム「React Spectrum」がすごいので紹介したい - Qiita
React Spectrum 🚀 Super excited to announce: ♿️ React Aria — Accessible UI primitives for your design system. 👑 React Stately — State and core logic for your design system. 🌈 React Spectrum — Adobe’s design system. Learn more: https://t.co/ucVguh3rqp Github: https://t.co/e8aOfLgCVK — Devon Govett (@devongovett) July 15, 2020 7月15日にAdobeのデザインシステム react-spectrum がリリースされました。 デザイン製も優れていますが、他の部分でのクォリ
Flutter入門のためのDart入門 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 最近自分の中でWeb開発はReactJS、モバイルアプリ開発はFlutterが良いという結論がでました。 Flutterでの実装はDart言語で行います。 基本的なモダン文法をサポートしているため、他言語から入ってくる人には入りやすい言語だとは思います。 とはいえ、日本語情報でステップバイステップでDart文法がまとまっているところは少ないので まとめてみようと思ったのがこの記事です。 Flutterがよい理由 【翻訳記事】なぜFlutterにおいてDartを使用するのか？ ・hot reloadが高速(AOT、JITの2段階のコンパイ
【初心者向け】Atomic Design っぽい、Figma の使い方 - Qiita
はじめに みなさま、いかがお過ごしでしょうか。Figma 流行ってきてますね〜。 他にも Framer X や STUDIO 、そして Figma の上位互換かもしれない Phase が盛り上がりを見せています。 導入記事も増えてきているので、具体的な 作成フロー を紹介したいと思います。 作成済みのファイルは探せばいっぱいあるので、Atomic Design ぽいプロセスで、よく使う UI パーツを作るところまでハンズオン形式で書いてみます。 ただし、原理主義的なプロセスや理論 ではなく、誰でも順を追って Figma を使える状態を目指します。 ストラテジストとエンジニア、そしてデザイナの作業が分断されている時点でイノベーティブではありません。 この三者が統合的にデザインできること、すなわち ワークフローそのものを最適化することが目標 です。 *Figma と Atomic Design
Vue.js おすすめライブラリ 21選（おまけ+1） - Qiita
どーも、8ビットエンジニアです。 今更感はいなめませんが、まとめます。 対象者 ・これからVue.jsを勉強する人 ・Vue.jsに興味がある人 ・npm or yarn をある程度理解している人 機能側 1. vue-chartjs vue-chartjsはvueのChart.jsのラッパーです。 再利用可能なチャートコンポーネントを簡単に作成できます。 デモ 公式ドキュメント 2. vue-fa Vue.js で使用するアイコンですね。 FontAwesome5 を使用しています。 公式ドキュメント 3. vee-validate vee-validateは、入力を検証してエラーを表示することを可能にする、Vue.js用のテンプレートベースの検証フレームワークです。 テンプレートベースであるため、値が変更された時にどの種類のバリデータを使用するべきかを入力ごとに指定するだけで済みます。
JS ? ReactNative × Redux ? ダサいよ... Flutter × Reduxにしましょう... - Qiita
今回は初めて記事を書くことになりますが、よろしくおねがいします。私はiOSエンジニア（Swift）をやっていました。２ヶ月前あたりにはちょうどiOSとAndroid両方対応しないといけないプロジェクトを始めたのでいろいろを検討をしていました。最初はReact Nativeを検討していましたが、Expoがすごくよかったと思いますが、やっぱり自分はJSとフロントエンド開発には向いていないと思いますので、Nativeで両方iOSとAndroidを別々でやろうと思いました。TypeScriptをReact Nativeプロジェクトに入れようとしてもいろいろいじらないといけないのでめんどくさいなと思っていましいた。その時、ちょうど友人がちょっとFlutterをやってておすすめされました。Flutterをインストールして、VSCodeのPluginもよくできているので、FlutterとDart（言語的
SwiftでもObjective-Cでもコードで簡単にAutoLayoutする - Qiita
はじめに コードでAutoLayoutを適用しようとすると、Swift、Objective-Cにかかわらず、どうしても長くなってしまいがちで見難くなってしまいます。その見難くなる問題を解決するために、MisterFusionというライブラリを使用して改善する例を挙げていこうと思います。 レイアウト 下記のスクリーンショットは 赤いViewと緑のViewと黄色のViewが同じ高さ 黄色のViewと緑のViewは同じ幅 すべてのスペースは10px という条件のレイアウトになります。このレイアウトを SwiftでMisterFusionを使って再現した例 Swiftで使わずに再現した例 Objecive-CでMisterFusionを使って再現した例 Objecive-Cで使わずに再現した例 という形で書いていきます。 Swift MisterFusionを使ったコード 上記のレイアウトをMis
UITableViewのUX改善(今すぐ出来る！) - Qiita
はじめに deselectRowAtIndexPath(indexPath: NSIndexPath, animated: Bool) UITableView上にあるセルの選択状態を解除するときに使うメソッドですが、 呼び場所を替えるだけでUXを大幅に改善することが出来ます。 経緯 アプリによってはセル押下後に画面遷移するにもかかわらず、 押下直後にdeselectRowAtIndexPathを呼ぶような挙動になっていたりします。 これは悪いことではないですが、画面遷移から戻ってきた時に セルの選択状態を解除してあげたほうがどのセルを押したのか ユーザーに視覚的に伝えることが出来るのでUX的に良いと思ったからです。 例 セル押下直後に解除 この方法だとどのセルを押したのかをユーザーは思い出さなければいけません。 遷移から戻ってきた時に解除 こちらはどのセルを押したのか視覚からはっきりと分か
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
AutoLayoutでアニメーションを設定する方法(Swift版) - Qiita