宣言的UIって何なん？ 〜日本昔ばなし「やめ太郎」〜 - Qiita
昔々、あるところに「やめ太郎」と言う中年ザコーダーがおったそうじゃ。 ある日、やめ太郎はこんな画面をコーディングしておったそうじゃ。 テキストフォームに文字を入力すると、それと連動して下の文字列も変わる。 一番下の行には、それを大文字にしたものが表示される。 という仕組みだったそうじゃ。 HTMLでいうと、こんなイメージじゃ。 <main> <input type="text" value="hello!"> <!-- ↑入力フォーム --> <p><!-- 上のフォームに入力した文字列がここに表示される --></p> <p><!-- それを大文字にした文字列がここに表示される --></p> </main>
CLSエラーが出た時に確認すること試すこと - Qiita
やりたいこと ・GoogleのSearchConsoleで「CLSエラー」が出ているので改善したい 「CLSエラー」がでていると、SearchConsole > ウェブに関する主な指標 > モバイル のところで『不良URL』として表示されます。 そもそも『CLS』とは？ CLSとは、『Cumulative Layout Shift』の略で、視覚の安定性を測る指標です。 例えば、サイトを見ていたら突然ガクッとレイアウトがズレたり、突然画像が表示されてテキストが下に落ちたりしたら不快ですよね。 これが起きない状態を安定していると考えるとシンプルかな。 これを独自に測定した値がCLSの数値です。0.1未満がGOODとされています。 ついでに『LCP』『FID』について LCPは『Largest Contentful Paint』。ページの表示速度を測る指標です。 ページが読み込みを開始してから2
6歳娘「パパ、flexにしたら幅が余っちゃったよ・・・」 - Qiita
flex-growとflex-shrinkのお話です。 ある日の我が家 娘（6歳）「ねぇ、パパ？」 ワイ「なんや、娘ちゃん？」 娘「パパはいつも、お仕事でどれくらいコードを書いてるの？」 ワイ「どれくらいって、沢山やで」 ワイ「それはもう山のように書いてるで」 娘「へー、山のようにかぁ」 娘「動かざること山の如しって感じ？」 ワイ「そうそう、ワイのコードはたいがい動かへん・・・コラッ！」 ワイ「誰がバグ製造機やねん」 娘「ところで、そんなパパに聞きたいことがあるの」 ワイ「なんや？」 お買い物サイト製作中 娘「実は今ね」 娘「お友だちから受注したショッピングサイトを制作してるの」 ワイ「受注て」 ワイ「最近の6歳児は受発注すんのかい」 ワイ「まあええわ、そんでどうしたんや」 娘「えっとね」 娘「今、デザインデータを見ながらコーディングをしてるんだけど」 娘「↑このデザインが、CSSで上手く
今起きている革命、「因果革命」とは - Qiita
みなさまは"The Causal Revolution" (因果革命)という言葉を聞いたことがあるでしょうか？ 私は今月(2021年6月)に初めて知りました。Google Trendsでもデータ不足によりトレンドが表示されません。 つまりまだ全然マイナーな概念で、聞いたことがないほうが自然かと思われますが、これは「来る」と確信したため本記事を投稿しました。この確信の根拠の箇所を記事中で太字で書いた他、最後にもまとめたため、本記事を読む価値がありそうかの判断には先にそちらを読んでもらってもいいかもしれません。しかしながら、因果革命ないし統計的因果推論は学ぶ価値のある分野です。本記事を読まなくても下記に挙げた書籍を未読の方はぜひ一読してみてください。Qiitaでも因果推論についての記事はいくつもあります。しかし、私が感動した点を明示化した記事は見当たらなかったため本記事を投稿しました。 この記
ブラウザの「戻る」ボタンでキャッシュが表示されてしまう際の対策 - Qiita
はじめに 各ブラウザの「戻る」ボタンを押すと、ブラウザのキャッシュをクリアしていても、 JavaScriptでリンク遷移時にローディングアイコンをページ全体に表示 「戻る」ボタンを押す ローディングアイコンが全体に表示されたページが読み込まれる といったことが発生する場合があります。 これはキャッシュには下記の2種類あり、ブラウザバックの場合はbfcache用の対策が必要となるためです。 通常のキャッシュ（ページや画像など、ブラウザの”キャッシュを削除”で削除できるもの） bfcache(戻る/進むボタン用のキャッシュ) 確認環境 IE11 iOS7 戻るボタンで不具合が起こる理由 「戻る」ボタン用のキャッシュは、JavaScriptの処理が全て完了した状態をメモリ上に保持しています。 キャッシュとしてメモリ上の情報を読み込むことで表示を高速化しているのですが、 JavaScriptの処理
プログラミングスクールのメンターを辞めました - Qiita
追記 2021/1/25 あとがきを追加しました。 概要 半年近くとあるプログラミングスクールでメンターをしていましたが、諸事情で辞めました。これは決してネガティブな理由でやめたわけではないのはお断りしておきます。半年間メンターをしてみて、SNSでの悪評なども踏まえた上でプログラミングスクールに通うという選択についてどう思うのか個人の意見として書きます。内容は鵜呑みにはせず参考程度に考えてもらえると幸いです。ちなみにこの記事はスクールの比較記事ではありません。なのでおすすめのスクール紹介等は一切ありません。 結論 最初に結論を述べておきますが、プログラミングスクールに通うという選択自体は悪くないです。ただし、どのスクールを選択するのか、スクールの利用の仕方、自身の考え方によってはお金の無駄になる場合があると思っています。ただ個人的にはスクールに通う必要性というものは全くなく、好きな時間に質
【個人開発・ポートフォリオに】無料で簡単にいい感じのデザインにできるサービスまとめ - Qiita
個人開発・ポートフォリオ作成をする方に贈る いくらプロダクトが素晴らしいとしても、一見してダサいデザインだと、ユーザーは使う気がなくなってしまう。 でも、今からデザインの勉強をするのは面倒だし、そこまでこだわりがあるわけでもない。 Q. 簡単に及第点のデザインにできるサービスとかないんですか？ A. あります。 ということで、デザインのことはよくわからなくても、簡単にそれっぽくできるサービスをまとめました。 個人的には、「それっぽさ」の大部分はページレイアウトと画像、「こなれ感」は配色とフォントによって構成されていると思っています。 また、私はケチなのでここで紹介しているものは、すべて無料で使えるサービスです（課金プランはある）。 書かないこと 細かい使い方 大体有名なので、使い方はggれば出てきます。 ライセンスなどの情報 特に素材系は規約などを確認の上で使ってください。 あくまでも、こ
M1 Macの開発環境 - Qiita
MacBook Pro (M1)でのメモです。インストールできるかどうか状況確認メモです。 自分がよく使うものを中心に。なるべくARMネイティブになるように。もしプライマリーで提供されているインストール手段（.dmg利用など）でARM対応が済んでいればそれを紹介しますが、もしそれで対応していない場合にはMacPortsやソースビルドなどの結果も合わせて紹介します。 PowerPC->x86->x86_64とユニバーサルバイナリを挟んで対応してきたMacPortsはこういう過渡期に強いです。 なお、ここで紹介するバージョンは最新版から古い可能性がありますが、「M1サポートが追加された前後のバージョン」を明記するのを目標にしていますので、これより新しければ問題ないと見てもらえればと思います。 編集リクエストウェルカムです。 現在の状況 IDE/エディタ Eclipseはあまりきちんと試していま
2億資金調達してから二年、結構量子コンピュータ頑張った結果 - Qiita
はじめに 2008年に起業してからコツコツやっていましたが、2014年くらいから量子コンピュータの研究開発をがんばりました。資金調達もしてある程度技術に目処がついたのと、若者から起業したいという相談をよくもらうので、まとめておきます。 経営は大事 簡単にいうとベンチャーをやろうとしたら技術よりもキャッシュが大事です。なので、財務や経営感覚がついてから技術をつけないと結構大変と思います。特に1年目は慣れない事務に忙殺されますし、二年目以降はキャッシュが厳しくなります。 あとは、最初は経営に夢見て舞い上がりがちなので、その気持ちがおさまって厳しさが一通り身についたところからが本番です。 調達の前に譲渡 2008年から10年くらいはコツコツ会社をやっていた上、そんなに頑張るタイプでもなかったのですが、たまたま2014年からやっていた量子コンピュータのニュースが巷で新聞に載るようになってから、周辺
Web屋がJavaScriptでゲームを作ってSteamで配信するまでの道のり - Qiita
そもそもなぜSteamで公開するのか この記事ではSteamにフォーカスしましたが、実際はこのゲームはWeb上から直接遊べるし、WebViewでラッピングしてGooglePlayにも公開しています。 SteamとGooglePlayに出した最初の理由は、大きなプラットフォームの力を借りて集客するためです。 LPだけオープンして待っていたとこで誰も遊びに来てはくれないわけです。 なので正直、「Webブラウザで遊べるのに、集客のためだけにわざわざダウンロードしてもらうなんてアホくさいな」、と思っていました。 しかし今となっては、むしろSteam経由で遊んでもらいたい思いのほうが強いです。 Steamのストアに並ぶことは思っていたよりも嬉しくて、 例えるなら、小説を書いたとして、今まではコピー用紙に印刷してホチキスで止めたものを皆に配っていましたが、 今回はちゃんと本になって、カバーがついて、書
Vue.jsを100時間勉強して分かったこと - Qiita
Vue.jsを100時間ほど勉強して分かったことを整理します。 勉強時間の内訳は、 Udemyの Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex) をだいたい全て完了（85時間） 実際に自分でコードを書いてみた（15時間） です。 学習開始時のレベルは、JavaScript・jQueryはそれなりに扱うことができ、過去に少しだけReactを勉強したことがある感じでした（専門は Ruby on Rails）。 Vue.js 自体の構文 まず、Vue.js 自体の基本的な構文を整理します。 Vue インスタンス Vue インスタンスの書き方は次のような感じです。 new Vue({ el: "#app", data: { name: "Kei", age: "30", counter: 0 }, methods: { increas
Vue.jsで作成された、ちょっと面白くて役立ちそうなサービス - Qiita
こちらに移行しました。(2020/05/16) 概要 Vue.jsで作成されたプロジェクトを紹介しているサイト 「made with vue.js 」があります。 面白くて役立ちそうなツールやサービスをまとめてみました。 UIコンポーネント VueSocial ソーシャルサービスのボタンを作成するVueのコンポーネント CKEditor 5 リッチテキストエディタのコンポーネント Vue.Draggable ドラッグ&ドロップのコンポーネント Vuetable 2 データテーブルのコンポーネント。demo vuejs-datepicker vueのdatepicker Kalendar Vueのカレンダーコンポーネント Vue Apexcharts SVGベースのグラフ可視化コンポーネント Vue.js Google Charts VueのGoogle Charts vue-cart ショ
Cloud FirestoreでSubCollectionを新規作成する - Qiita
初歩的な疑問 - Document以下にCollectionがない時ってどうやって作成するのだろう？ Cloud Firestoreで、新規でSubCollectionを作成する方法がわからなかったので、いろいろ試しました。 作成済みのSubCollectionへのドキュメント追加のコードはよく見かけるけども、SubCollectionがない場合はどうすれば良いのか？ Collection: 【 main_collections 】以下に、Documment：【 DEkclk7y41HoH4DdRG41 】がある状態。 この DEkclk7y41HoH4DdRG41 以下に、SubCollectionを追加したいとします。 firebase .firestore() .collection("main_collections") .doc('DEkclk7y41HoH4DdRG41') .
Cloud Firestoreを実践投入するにあたって考えたこと - Qiita
はじめに Firebase Realtime DBを実践投入するにあたって考えたことを読んで頂いてありがとうございます。 多くの方から「いいね」を頂いて、今回のこの記事を書くモチベーションになりました 本当にありがとうございました！ さて、CloudFirestoreは、Firebase Realtime Databaseとは全く違うデータベースです。特にSubCollectionやQueryが導入されたことにより、リレーションシップの設計に関して大きく異なります。 この記事では、主にCloudFirestoreにおけるリレーションシップの設計方法から、アプリ・CloudFunctionsに至るまでを幅広く解説して行こうと思います。 次の記事ではデータベースの歴史を解説しています。 RDBの限界とNoSQLの登場 Cloud Firestoreでの開発について 私の経験上確実に断言できるこ
【v2対応】Nuxt.jsとFirebaseを組み合わせて爆速でWebアプリケーションを構築する - Qiita
Firebase Advent Calendar 2017 21日目の記事です。 フリーランスでフロントエンドを中心にエンジニアをやっているpotato4dです。 普段はVue.jsを中心に、案件を進めたりコミュニティに関わったりしていますが、今回はそんなVue界隈で今アツいフレームワークであるNuxt.jsとFirebaseを組み合わせて、SPA + SSRにAuthと Firestore を組み合わせたアプリケーションを高速で作る方法を、サンプルとあわせてご紹介します。 2019/10/16 追記 このサンプルは Firestore が存在しない Nuxt v1.x + RTDB 時代のコードを愚直に移行している ので全体的に資料が古くなっています。 インフラ構成については順次更新していますが、特にデータストア操作周りについては できるだけ参考にしないでください。 2019/07/02
ラーメンで理解するasync/await - Qiita
JavaScript 2 Advent Calendar 2019 の19日目の記事です。 (19/12/23 10:41追記) Promise.allについて最後に追記しました。 対象 async/awaitがなんだかはある程度知ってる人 async/awaitをなんとなくで使ってる人 そもそもasync/awaitって？ async/awaitは、Promiseによる非同期処理をより簡潔に効率よく記述できる手法。 普通にPromiseを使うとネストが深くて辛くなるのを救ってくれる。 「async/await Promise」で検索すれば比較についてはたくさん出るので今回は書かない。 便利だから全部async/awaitにしちゃおう！ って思うんですけど、実は罠があって。 ちゃんと気をつけないと非効率な感じになっちゃうよっていうのが今回のお話。 ただ、コードを並べて説明してもよくわからな
SVGは思ってたより怖くなかった。インラインSVGのススメ - Qiita
最近SVGに初めて触れる機会があり、それまで抱いていたイメージとは大きく違ったものだという感想を持った。この記事では、これまでSVGに触れたことのない人向けに「SVGのそんなに怖くないところ」を紹介する。 SVGになんとなく抱いていた印象 ベクター形式のなんかよく分かんない画像まわりの最新技術 仕事で実用するには新しすぎる 使いこなすには何か高度で新しい技術を勉強しないと無理 中を覗くと数字がたくさんあって難しそう。算数嫌い <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><path d="M112.8 234.8c-2.4-1.5-7.6-3.8-14.6-3.8-11.5 0-15.9 7.1-15.9 13 0 8.2 5 12.3 16.1 17 13.4 5.7 20.2 12.5 20.2 24
[和訳] Dropboxアカウントのせいで胃潰瘍になった - Qiita
こちらのReddit投稿 (https://www.reddit.com/r/sysadmin/comments/eaphr8/a_dropbox_account_gave_me_stomach_ulcers/) の和訳記事です。本番環境でやらかしかった人シリーズが盛り上がっていたので波に乗って（？）Twitterにヤバすぎる恐ろしい話が流れてきたのをすかさず和訳してみました。やらかしちゃった人というよりはやらかされちゃった人目線ですがいずれにせよそこら辺の怪談話よりよっぽど怖いです。 Dropboxのアカウントのせいで胃潰瘍になった。 皆は誰もが触れたがらない、会社を靴紐やガムやクリップでつなぎとめている「例のアレ」を見つけたことってある？そういうのって往々にして大型連休前の金曜午後4:45に落ちるし、般若のような様相を呈した上司が「このままだと第二のスターリングラード攻防戦が勃発するぞ
![[和訳] Dropboxアカウントのせいで胃潰瘍になった - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/f481e3d127f46f813fff2765915bf59c30b13273/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCJUU1JTkyJThDJUU4JUE4JUIzJTVEJTIwRHJvcGJveCVFMyU4MiVBMiVFMyU4MiVBQiVFMyU4MiVBNiVFMyU4MyVCMyVFMyU4MyU4OCVFMyU4MSVBRSVFMyU4MSU5QiVFMyU4MSU4NCVFMyU4MSVBNyVFOCU4MyU4MyVFNiVCRCVCMCVFNyU5OCU4RCVFMyU4MSVBQiVFMyU4MSVBQSVFMyU4MSVBMyVFMyU4MSU5RiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9MDI0ZTllYWIyYzFmMWM1ZTIyNDZiMzE5NWFlYTRiNGI%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBrdG55dCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9ZDg5MWEyZDY4Y2JmZGFiNDgwYzI4YmIyMGRkZWNmNGM%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3Db093e5f4e6f9d2395013c7aed16d7f1d)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
VS CodeでMarkdown書くときに空白削除されるのを防ぐ - Qiita
async/await × メソッドチェーン - Qiita