Reactの学習を初めて約2週間が経ちました。 Railsの時と違って「とりあえずこれをやっておけば良い」ってものが見当たらずなかなか大変でしたが、試行錯誤の上色々と見えてきたのでまとめていきます。 はじめに React普通にむずいです。 他の言語の経験が無い場合、VueやRailsなどから始めることをおすすめします。 学習前の知識レベル Railsエンジニア JavaScriptは簡単なDOM操作程度ならできる Vue.jsを20時間くらい勉強した(途中でReactがやりたくなった) Webpackで静的ページのコーディング環境を整えている 学習法見定める上での難点 Reactは過去数年で大きく進化しているので、今は主流ではなくなった書き方の記事、チュートリアルがたくさんある 公式チュートリアルもProgateも古い書き方 Railsチュートリアルのような絶対的な教材が存在しない 学習方

更新履歴 追加 2024/04/01 「Epic Easing」を掲載しました 2024/03/07 「Filter Blend」を掲載しました 2024/03/04 「Tooltips & Speech Bubbles」を掲載しました 2023 2023/07/04 「CSS Box Shadows Generator」を掲載しました 2023/06/29 「Regulex」を掲載しました 2023/04/05 「Colorable」を掲載しました 2023/03/09 「Scrollbar.app」を掲載しました 2022 2022/10/04 「CSS Shadow Palette Generator」を掲載しました 2022/09/07 「Wayback Machine」を掲載しました 2022/05/31 「Min-Max-Value Interpolation」を掲載しました

この記事は 「Webアクセシビリティ Advent Calendar 2020」 5日目の記事です。 アクセシビリティ Advent Calenderの記事を寄稿するにあたり、少しの工夫であらゆるユーザーに対して優しいWebサイトを作れるようなHTML/CSSコーディングの方法についてまとめました。より多くの人にとって優しい・使いやすいWebサイトを作ることは訪れてくださるユーザーの方々だけでなく、クライアントにとってもユーザーの機会損失を防ぐことができるので多大なるメリットがあります。（よくコードが適当でもデザインが見えていれば良いって意見を聞くけれどそんなことはない） ただ、アクセシビリティを意識したHTML/CSSコーディングについてのまとめだと内容量が非常に多くなりZennなら記事より本で出したほうがベターになってしまうので、今回は数あるアクセシビリティの視点から「キーボード操作で

はじめに HTML＋CSSコーディングにおける制作者の思考や判断、アプローチ、コード化に至るまでの流れなどを分解し、コードの状態なども含めてそれぞれを短い言葉で言語化しました。 以下のような効果が期待できます。 HTMLとCSSを使っておこなってきた事を客観視・再認識できる 始原的な動機を把握することで、手法を別の視点で捉えられるようになる 認識合わせや熟練度確認に利用し、制作時のコミュニケーションを円滑にする 場合によっては、ぼんやりと捉えていたことや、詰まりやすかったポイントなどがハッキリと認識できるようになるかもしれません。 言語化の概要 まずは、全体像が分かる概要図を掲載します。 この記事は、以下のステップと各項目について順に説明するものになります。 前提事項・環境について 言語化するにあたって前提となる考え方や環境について記載します。 HTMLとCSSの役割 HTML → データ

以下はDuomly ( Webサイト / Twitter )による記事、13 useful JavaScript array tips and tricks you should knowの日本語訳です。 Duomlyはプログラミング学習コースを提供しているWebサイトです。 ただランディングページにたいしたことが書いてないので、詳細はよくわかりません。 ここはもう少し書いておいてほしいところ。 13 useful JavaScript array tips and tricks you should know 配列はJavaScriptで最も一般的な概念のひとつであり、内部に格納されたデータを操作する手段は多数存在します。 配列はJavaScriptの最も基本的なトピックであり、プログラミング学習パスの最初に学習するものだという前提のうえで、この記事ではあなたが知らないかもしれない、しか

前書き プログラミングで一番難しいところの一つは、「見積もり」だと私は思う。人から頼まれてプログラミングをする時、必ず最初に聞かれるのが「だいたいどれくらいで終わるか？」だ。厳しいところだと「何日に納品してくれるのか？」を問われる(むしろこれが普通かもしれない)。まっさらな状況から過去の経験を総動員してかかる時間を予想したり、可能な限りタスクに分解して時間を見積ったりするが、いつも不安に駆られる。多くの人も、見積もりに対して困難と不安を感じているのではないかと思われる。見積もりに対する自分の知識と経験を話して他の人にも参考にしてもらいたいと思って記事を書いた。 見積もりという言葉には色々な意味を含むが、今回の記事では「プロダクトをリリースするまでの期間の見積もり」から「頼まれた一つの機能の完成させるための期間の見積もり」までのスコープで話をしたい。 なぜ見積もりをしないといけないのか？ 見

このリストは何？ MDN web docs を、あたかも書籍の目次かのごとく整理しなおしたものです。それぞれ MDN web docs の記事へリンクしています。 なぜこれが必要になったかというと、人材市場でフロントエンドエンジニアが少なすぎる現状をどうにかするべく教育体制を整えるところから考え始めたのですが、それならまずは日頃お世話になっている MDN web docs を教材として扱いたいなと思ったからです。慣れてきてもよく参照するし「アレどこだっけなぁ？」を軽減もしやすいかなって。 MDN web docs は内容そのものはかなり充実しているものの、リンクがあらゆる方向に張り巡らせられており ある一定の流れに沿って読む ということが少々難しい側面もあります。特に初学者にとっては、迷子になりやすいかもしれません。 ですので、初学者でも学習しやすいように MDN web docs 全体の

PHPでEmmetが使えなくて泣きそうになったあげく解決したのでメモ。 私の環境は以下の通りです。 ・OS Windows ・Editor Atom 解決方法 1. 設定からキーバンドを確認 2. Emmet展開のキーバインドをコピー（赤丸で囲んだ箇所をクリックすればコピーできます） 3. キーマップに貼り付け 4. PHPでも展開できるように以下を追加します atom-text-editor[data-grammar~="php"]:not([mini]) 追加後です。以下をコピペでもOK { 'atom-text-editor[data-grammar="text html basic"]:not([mini]), atom-text-editor[data-grammar~="erb"]:not([mini]), atom-text-editor[data-grammar~="jad

指標についてはこちらの記事がわかりやすいのでぜひご参考ください。 これらの指標それぞれについて先ほどの順位点数を出します(0〜100)。その5つの順位点数に重みを加味して平均値を出したものが、PageSpeed Insightsで表示される点数です。 つまりどういうことか PageSpeed Inshgtsの点数はいかにファーストビューが速く完成して操作できるようになるか、それが全てということです。 例えば、同じ内容のWebページでも、 A ファーストビューが1秒で表示されるが、スクロールしたときのコンテンツはその後4秒かけて少しずつ表示される場合 B 読み込みから5秒は画面が真っ白だが、その後ページの上から下まで一気に表示される場合 PageSpeed InsightsはAの場合を高く評価し、Bの点数は低く評価します。これは実際のページ離脱の感覚として理に適っていると思います。 点数が上

JavaScriptにおける非同期処理は一種の悪夢です。非同期処理は容易にコードを複雑化させ、品質の低下を招きます。そこでこの問題を解決するため、非同期処理を簡単に扱うことができる、Promiseやasync/awaitという機能が導入されました。この記事では、Promiseとasync/awaitを用いた非同期コードの単純化について簡単な解説をします。 実行順序がコード通りにはならない非同期処理 非同期処理とは何でしょうか。非同期な処理は、コードの順番通りには実行されません。どういうことか、簡単な例を見てみましょう。 setTimeout(() => console.log('hello'), 500); console.log('world!'); このコードでは500ミリ秒後に「hello」と表示し、その後に「world」を表示しようとしています。ですが、実際には「world」の後に

皆さん、JavaScriptで「アニメーションAを3秒かけて実行したあと、アニメーションBを実行」などと、順番に処理を実行したいとき、どのようにしていますか？　以下のように setTimeout() を使って実現しているでしょうか？ function serialAnim () { // ...アニメーションAの処理 setTimeout(() => { // ...アニメーションBの処理 }, 3000) } うーん、ダサいですね。 それとも以下のようにコールバックを利用しているでしょうか？ animA(animB) function animA (callback) { // ...アニメーションAを実行した後に、callback(この例ではanimB)を実行する処理 } setTimeout() は、保守性に問題があることはもちろん、そもそもが「◯秒以降」に実行されるという関数なので

商用利用可能なアイコンを即刻ダウンロードできるアイコンサイトです。 ダウンロードした素材は、WEBページやアプリのアイコン、DTPデザインなどに使用可能!!

button要素をflexにすると位置指定が出来ないバグっぽいものを見つけたっぽいので貼り付けておく https://codepen.io/anon/pen/GEbbdE safariでの表示 殆ど何も効かない、強制的に上下中央左寄せになる chrome, firefoxでの表示 強制的に上下中央になる 同じ人を見つけた http://qiita.com/hashrock/items/189db03021b0f565ae27 buttonのレイアウト出来るようにdivを入れるといいみたい。ちょっと汚いHTMLになるから嫌だなぁ…。 (hoverとかイベントとかでアニメーションするのでもワンクッション必要になっちゃう)

IE11 でXMLHttpRequest()を使った JSON 取得ができなかった。 問題点responseType を指定する順番xhr.open("GET", "https://example.jp/rest-api/posts.json", true); xhr.responseType = "json"; xhr.send(); responseType の設定は、open()の後に記述する。 モダンブラウザでは問題ないが、IE11 などではエラーとなる。 IE11 では responseType に JSON が指定できないXMLHttpRequest - Web API インターフェイス | MDNを確認すると、IE11 ではresponseType = 'json'が未対応である事がわかる。

近年のフロントエンドの盛り上がりはすごいですね。プログラミング初心者がJavaScript（最近ではTypeScriptも）から学び始めるなんて昔ではなかなか考えられなかったことです。 そんな世界中で大人気のJavaScriptですが、プログラミングに慣れていても困惑する部分が結構あります。特に初心者にとっては、非同期処理、this、コールバック関数、あたりが難しいのではないかと思います。 非同期処理については前に解説しましたし、thisの解説はネットに大量に転がってるので、今回はコールバック関数について解説します。 コールバック関数ってなんなんだ コールバック関数というとsetTimeoutなんかで使われるアレですね。Node.jsでもたくさん使われます。setTimeoutだと以下のような使い方になります： setTimeout(function() { console.log('He

なぜやるか cssスプライトと違って、 スタイルの変更がcssでできる ベクター画像なのでサイズ変更可能 retina対応のための画像を作ることが不要 色変更のために作り直すことが不要 svgブラウザ対応状況 svg - Can I use... Support tables for HTML5, CSS3, etc IE9-Edge12、Safari 5.1-6にはによる外部ファイルの参照をサポートしていません。 IEで読み込むためには、polyfillが必要です。詳細はIEに対応するで説明します。 polyfills（ポリフィル）というのは、数年前から言われている概念なので、 知っている人もいくらかいるのではないかと思いますが、 モダンブラウザで普通に出来て、レガシーブラウザで出来ない機能を、既存の技術で（あるいはそれらの組み合わせで）同等のものを提供する、という手法です。 (引用元:

WHAT'S ICOOON MONO 商用利用可能なアイコン素材をフリー(無料)ダウンロードできる素材配布サイトです。 WEBデザインやDTPのほか、ビジネスシーンで活用できるアイコン素材をストックしています。 TopeconHeroesが作成したこのサイトに掲載している素材は、どなたでも使用条件に違反しない限りクレジット表記や許可なしで、 自由にご利用いただけます。