タグ

ブックマーク / qiita.com/teradonburi (5)

  • 綺麗なReactコンポーネント設計でモノリシックなコンポーネントを爆殺する - Qiita

    まずはじめに Reactはユーザインターフェース構築のためのJavaScriptライブラリです。 React は、インタラクティブなユーザインターフェイスの作成にともなう苦痛を取り除きます。アプリケーションの各状態に対応するシンプルな View を設計するだけで、React はデータの変更を検知し、関連するコンポーネントだけを効率的に更新、描画します。 - React公式より Reactプロジェクトである程度規模が大きくなっていくと問題になっていくのは きちんと設計しないとビジネスロジック、コンポーネントのステート、表示 これらが入り混じって数百行の巨大なコンポーネント(モノリシックなコンポーネント)ができてしまう場合があることです。 確かにReactはユーザインタラクティブなViewの作成には強力な力を発揮しますが、 綺麗なコンポーネント設計に関しては利用者に委ねられています。 (Re

    綺麗なReactコンポーネント設計でモノリシックなコンポーネントを爆殺する - Qiita
  • コードレビュー虎の巻 - Qiita

    レビューガイドライン(Review GuideLine) ここで述べているレビューはピアレビューについての方法です。 (作業成果物の欠陥と改善の機会を探すレビュー) 「最悪を最初に」を基としてレビューすべき、 たとえば、仕様やアルゴリズムに欠陥があるのに、typoにこだわってもしょうがないので、なにが最悪かを考え、それを防ぐための物からレビューをします。 誤りがプロダクト全体に影響し、手戻りのコストが高くつく、あるいは失敗するようなリスクがないかを考慮にいれてレビューの対象を選択します。 たとえば、基的な初期フェーズの要求仕様や、クリティカルな決定の基礎になる仕様、使用頻度が高いモジュールなどを重点的にレビューします。 以下に書く項目はレビュアーに負担をかけないようにするのが前提なのでレビュアーに出す前にそもそもテストしたい項目です。 参考: あなたのおっしゃるレビューってどのことかし

    コードレビュー虎の巻 - Qiita
  • 【保存版】Webフロントエンド基礎力(初心者向け) - Qiita

    ブラウザで動くWebページのプログラミング実装をフロントエンドと呼びます。 最近はJSON色つけ係と呼ばれてたりしますが、 Web開発未経験・初心者向けに最低限知っておいたほうが良い基礎知識とテクニックに関して体系的にまとめておきます。 (CodePenによる動作例付き) 環境構築に関しては(兎に角)早くプロトタイプを作る技術(初心者向け)を参考にしてください。 HTMLCSSJavaScriptはブラウザ自体の実装に依存します。 この記事では比較的汎用的に使える書き方やHTMLCSS、JSを記載したつもりですが 最新のJavaScript APICSS3の機能によってはブラウザによってサポートされていない機能もあります。(特にIE) 各機能に関してはCan I useで現在のブラウザの対応状況を確認することができます。 HTML HTML(Hyper Text Markup La

    【保存版】Webフロントエンド基礎力(初心者向け) - Qiita
  • (兎に角)早くプロトタイプを作る技術(初心者向け) - Qiita

    とにかく早くプロダクトのプロトタイプを作るための技術についてまとめます。 この技術は運用しやすく作る技術とはまた別の技術です。 (綺麗に作るのは後でやる) かなり偏った考え方もあると思いますがご容赦ください。 プロトタイプを作る上でやらないことを決めます。 実はやることよりもやらないことを決めることの方が難しいです。 UXに基づいて後回しにするという意思決定が必要です。 プロトタイプでやるべきこと コンセプトの決定/チャネルの調査: なぜ作るのか、誰をターゲットとして作るのか、競合プロダクトの調査 コア機能の実装: ユーザの苦痛を解消させるプロダクトのコア機能の実装をします。 ここで想定しているコア機能とは一画面に収まるアプリケーションのメイン機能の事を指します。 デザインはモックレベルではなく、ユーザが使う想定のデザインテーマ、レイアウト、アフォーダンス、メンタルモデル、UI、アニメーシ

    (兎に角)早くプロトタイプを作る技術(初心者向け) - Qiita
  • Apolloでの綺麗なAPI実装(GraphQL)を試す - Qiita

    はじめに 今回のサンプルは以下に用意しました。 Apollo Server & Apollo Clientサンプル 以前こんな記事を書きました。 React(+Redux)+gRPCで実現するクリーンアーキテクチャ+マイクロサービス構成 BFFのフロントエンドAPI部分に関して、次の記事を見てクライアント通信の部分をGraphQLで実装できるとより柔軟で堅牢な気がしたので試してみました。 世のフロントエンドエンジニアApollo Clientを布教したい REST APIGraphQLの違いに関しては下記を参考にしてください アプリ開発の流れを変える「GraphQL」はRESTとどう違うのか比較してみた GraphQLを導入するメリットはざっくり以下の通りです。 APIのインタフェース定義(送信パラメータのデータ型定義)ができる(それにともない、データの型定義によるAPIパラメータの

    Apolloでの綺麗なAPI実装(GraphQL)を試す - Qiita
  • 1