Atomic Designを理解する② - Qiita
①デザインの効率が格段に上がる Atomic Design では画面要素を細かくコンポーネント化しています。ですので、一度作成したコンポーネントを配置するだけで、画面に表示することができました。特に効率が格段に上がった場面として、画面開発中にUIが追加された際に、すでに作成済みのコンポーネントを再利用することで、新たなパーツをすぐに作成※することができたという場面がありました。 ※すでに作成済のボタンコンポーネントとテキストコンポーネントを組み合わせて、ボタンテキストコンポーネントをデザインできたこと ②ページデザインに統一感が生まれる 今回複数人で複数の画面開発を行いました。全員が同じ画面を実装したわけではないため、画面によって必要なコンポーネントは異なります。しかし、画面の実装方法が定まっていたため、誰が実装しても画面の統一感を保つことができました。実際に、手順に沿って開発するだけで初
Atomic Designを理解する① - Qiita
はじめに みなさんはAtomic Designと聞いてすぐにイメージできますか？ 私は最近仕事でAtomic Designに触れるようになり、なんとなーくイメージは掴んできていますが、分かりやすく他者へ説明できるかなと少し不安でした。そこで今回はAtomic Designについて簡単に言語化してまとめてみます。 今回の記事は二本立てとなっております。初心者でも理解できるような内容ですので、ぜひ読んでみてください！ Atomic Designとは Atomic Designとは、webページや画面をパーツ・コンポーネント1単位で定義し、それらを組み立てて作るUIデザイン手法の一つです。画面構成要素を段階的に分解・部品化することで、画面部品の統⼀性や再利用性を高める手法となっています。 これだけだとよくわからないと思うので、もう少し簡単に説明しますと... UIコンポーネントを粒度に応じたカテ
Vue.js2で作ったサイトがIE11で表示されなくなった調査の軌跡 - Qiita
前提 pakcage.jsonにbrowserslistは指定してあって、ある時点まではIE11でも動いていた。 エラーの原因を特定 こちらの記事と似たような事象だと思ったが。 キャプチャのようにエラーがバンドルされて１つになったJS内で起きていたためどこに原因があるのか全く分からなかった。 そこでまずはこちらの記事を参考に読み込んでいるモジュール単位にビルド後のファイルを分割するようにした。 configureWebpack: { optimization: { runtimeChunk: 'single', splitChunks: { chunks: 'all', maxInitialRequests: Infinity, minSize: 0, cacheGroups: { vendor: { test: /[\\/]node_modules[\\/]/, name(module)
[フロントエンド] multipart/form-dataを理解してみよう - YoheiM .NET
こんにちは、@yoheiMuneです。 ファイルアップロードを実装する時はいつも苦戦するのですが、multipart/form-dataというデータ形式を理解できたらすんなりと実装できるようになりました。今日は、ファイルアップロードでは必須とも言えるmultipart/form-dataについて、ブログにまとめました。 目次 サンプルコード 本記事のサンプルをGithubに置いてあります。Node.JSのサーバーで実装しています。実際に動かすと理解の助けになると思いますので、必要あればご参照ください。 コンテンツの種類とは multipart/form-dataを扱う前に、まずは「コンテンツの種類」について理解する必要があります。 フロントエンドとバックエンドとのデータのやり取りでは、html、javascript、png、jsonなど様々な種類のデータを扱います。その際に、どんなデータを
![[フロントエンド] multipart/form-dataを理解してみよう - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/7d80990ede359a073780852697adcc8f75324a62/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F539.jpg)
application/x-www-form-urlencoded ‐ 通信用語の基礎知識
データはid=dataの形式で、formが複数ある場合は&で区切られる(form1=data1&form2=data2)。 dataはURLエンコードされる。 英数字と3種類の記号 _ . - はそのまま、スペースは+に変換され、それ以外の文字は%xxの16進形式になる。 RFC 1866(HTML 2.0)以来、HTML5草案まで使われ続けてきた。 トラックバックpingでも、このContent-Type名を使用する。 しかし、x-という問題がある。この改善のためapplication/www-form-urlencodedをIANAに登録する提案は以前からなされていたが、HTML5のために再び草案が復活した(I-D[hoehrmann-urlencoded-01])。このドラフト仕様では、8ビットであり、符号はUTF-8に固定。このためcharsetパラメーターは不正であるとしていた。
fetch API でも POST したい！ - Qiita
ちなみに fetch API は WHATWG HTML Living Standard で定義されていて、W3C HTML 5.1 でもなければ ECMAScript2017 でもないです。 2017年現在 Safari や IE では未サポートなので https://github.com/github/fetch などの polyfill を使うと良いです。 post (application/x-www-form-urlencoded) const obj = {hello: "world"}; const method = "POST"; const body = Object.keys(obj).map((key)=>key+"="+encodeURIComponent(obj[key])).join("&"); const headers = { 'Accept': 'appl
[HTML5] Fetch API で GET/POST で通信する - ねこの足跡R
Ajaxによる通信は長きに渡りXMLHttpRequest(XHR)で書かれていましたが、HTML5からFetchAPIが実装されずいぶんとシンプルに記述することが可能になりました。今回は基本的な使い方についてまとめておきたいと思います。 基本的な使い方 GET 最初のthen()は何やってるの？ クエリーを指定する POST ファイルをアップロード 共通 エラー処理（通信時） エラー処理（400,500番代） Cookieを自動で送りたい サンプル GET 実行例 ソースコード HTML JavaScript POST 実行例 参考ページ 基本的な使い方 GET fetch()に取得したいURLを指定するだけでGETによるリクエストが可能です。fetch()はPromiseを返してくれますのでレスポンス内容を処理したい場合にはthen()内で処理を行います。 以下の例はhttps://e
![[HTML5] Fetch API で GET/POST で通信する - ねこの足跡R](https://cdn-ak-scissors.b.st-hatena.com/image/square/27d23e4616258c63e839856060764773e98cc5ad/height=288;version=1;width=512/https%3A%2F%2Fogimage.blog.st-hatena.com%2F820878482973262145%2F6801883189061406765%2F1701425486)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TechCrunch