優先度B: 強く推奨 ​これらのルールは、ほとんどのプロジェクトで可読性や開発者の使い勝手を向上させることが分かっています。これらのルールに違反した場合でも、あなたのコードは動作しますが、違反はごく少数で十分に正当な理由がなければいけません。 コンポーネントのファイル ​ファイルを結合してくれるビルドシステムがあるときは、各コンポーネントはそれぞれ別のファイルにするべきです。 そうすれば、コンポーネントを編集したり、使い方を確認したりするときに、より素早く見つけることができるようになります。

環境 React(CRA) Javascript npm 方針 当たり前の前提として、既に動いている機能は壊さない Javascript -> Typescript へ最短で置き換えて、無事起動するところまでを第一の目標とする any 型を許容する（後の改修や機能追加で型を順次付与していく想定） 作業の概要 コンパイルエラーを解消し、最低限動作するまで ts-migrate を使って全体的に Typescript へ移行する ts-migrate で出力された指摘を手作業で修正し、指摘コメントを削除していく 依存ライブラリに必要な@typesを install していく 型が無くてエラーになっているところに対して any で型を付与していく ※ここまで終わったら この時点で master にマージしても問題はない マージする場合は既存機能が問題なく動作するかしっかり確認する！ 一旦マージし

JSON sucks.But we're making it better.Stop staring at thousand line JSON files in your editor and start staring at thousand line JSON files in the world's best JSON viewer. With a few nice features to help make it not the worst.

Metaは現在、JavaScript Webテキストエディターフレームワークの「Lexical」をリリースしている。軽快さや拡張性、アクセシビリティを重視し、開発者は必要に応じた機能を持つテキストエディターが利用可能。基本的な雰囲気はWebで確認できるが、ローカル環境に導入する場合は、「npm install --save lexical @lexical/react」を実行する。 Webブラウザー上で動作するLexical Lexicalは編集要素に取り付くエディターインスタンス、エディターの状態を示すセット、セット情報を受け取り、状態に応じてDOMを更新するリコンサイラーの3要素で構成されている。そのため、UIコンポーネントやツールバー、リッチテキスト機能、マークダウンなどの機能はプラグイン経由で実装・拡張する仕組みだ。公式サイトのプラグインページでは、Lexicalの状態更新時に呼び

Register as a new user and use Qiita more conveniently You get articles that match your needsYou can efficiently read back useful informationYou can use dark themeWhat you can do with signing up

株式会社サイバーエージェントの2021年度 エンジニア新卒研修でコードの品質に関する講義を行いました。 https://note.com/cyberz_cto/n/n26f535d6c575

アメーバスタッフブログでも記載させていただいた通り、11/15より順次アメブロのAMP対応を終了させることになりました。 なぜAMPをやめるのか？2016年の3月にアメブロはAMP対応をスタートさせていました。 （当時のブログ記事はこちら） そこから5年以上AMPを採用し、モバイルの検索結果からはAMPキャッシュに飛ぶようになっていました。 Googleの検索結果からはGoogleのキャッシュに移動するわけで、当然体感速度としては良好なものであったと思います。 「それなのになぜやめるのか？」 ですが、基本的にはビジネス的な問題となります。 ウェブ界の状況、社会状況等々によっての総合的な判断ということになります。 検索結果がクリックされた際にGoogleのキャッシュが表示されるという点では、CDNのコスト削減等はあるのですが、それでもやはりトータルで考えたときに今回はAMPを終了させるという

2021年も土曜日に1人で、お湯が良くて食事もおいしい宿に泊まりたい（あと半年ですけど……） 毎年1月に公開している「今年泊まりたい宿」の記事ですが、2021年はこんなタイミングで公開することになりました。 年明け早々に首都圏に緊急事態宣言発令が決まり「このタイミングで『2021年泊まりたい宿』の話をしてもね……」と思いつつ3月の宣言解除を迎え。 じゃあそろそろ旅の計画を立てようかな？と思っているうちに3度目の緊急事態宣言。 「もうこれは、いつならOKってこともないのでは？」と思い、2021年始まってだいぶ経ちますけど、せっかく47軒選んだので公開することにしました。 多くの宿はこのご時世でもがんばって営業していますし、行ける範囲内で旅を楽しむための手助けに、あるいは「落ち着いたら絶対ここに行こう！」と、妄想しつつお楽しみいただけたらと思っています。 今回も「1人で」泊まれる温泉宿に絞って

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 開発者であればテキストエリアにMarkdown記法がサポートされていれば十分でしょう。しかしそれ以外の方にとっては不便きわまりないものになってしまいます。やはり見た目のいいエディタがある方が使いやすいはずです。リッチすぎるごてごてしたものはよくないですが、シンプルであれば開発者にとっても使いやすいでしょう。 今回紹介するBangleJSはシンプルで使いやすそうなWYSIWYGエディタです。 BangleJSの使い方 文字装飾が見た目に反映されているので分かりやすいでしょう。 文字を選択したり、ダブルクリックするとメニューが呼び出せます。 画像や引用も使えます。 画像はドラッグ&ドロップで追加できます。 BangleJSはTodoリスト風のチェックボックスはCtrl + Shift

フォントワークスは、手書き風の楷書系硬筆体「クレー」やディスプレイ書体の「ロックンロール」「レゲエ」「ドットゴシック」など全8書体を、Google社の「GoogleFonts」にて提供を開始しました。 私たちは、「もじと もっと じゆうに」というタグラインを掲げ、文字の力を最大化し、すべての人の日常に新たな価値を生み出していきたい、と考えています。GoogleFontsが掲げる "Making the web more beautiful, fast, and open through great typography" にも共感し、一部書体ではありますが、GoogleFontsへ提供いたしました。制作環境に依存することなく、より多くの新しい作品が生み出されることへの貢献と、今後の更なるフォント市場の活性に繋がることを期待しています。 GoogleFontsは「SILオープンフォントライセ

Published on December 14, 2020   ·   Updated on December 16, 2020 Bash scripts. Almost anyone needs to write one sooner or later. Almost no one says “yeah, I love writing them”. And that’s why almost everyone is putting low attention while writing them. I won’t try to make you a Bash expert (since I’m not a one either), but I will show you a minimal template that will make your scripts safer. You

こんにちは、CX事業本部の夏目です。 MacのタッチバーのタッチIDが非常に便利なのですが、Terminalでsudoを叩かないと行けないときに使えたらなぁと思ったので、情報を共有します。 使う方法 /etc/pam.d/sudoにauth sufficient pam_tid.soを追加します。 書き込みには管理者権限が必要になるので次のようにして編集します。 # 自分の環境では最初管理者でも書き込みができないようになってたので、できるようにする $ sudo chmod +w /etc/pam.d/sudo $ sudo vi /etc/pam.d/sudo もともとはこんな感じになっていると思うので、 # sudo: auth account password session auth sufficient pam_smartcard.so auth required pam_ope

さまざまなデータを最小限の記述でビジュアル化し、アニメーションで表示する高性能なJavaScriptライブラリを紹介します。 メーターやファンやコントローラーなど、デザインがレトロなのも面白いですね。 Zeu.js -GitHub 上記は静止画ですが、もちろんアニメーションで動きます。 デモのカラーは派手ですが、オプションで簡単に変更できます。 My Command Center Zeu.jsはCanavasベースで、外部ファイルと空のcanvas要素を用意し、あとはタイプとデータを定義するだけで実装できます。 <!-- 外部ファイル --> <script src="zeu.min.js"></script> <!-- 空のcanvas要素 --> <canvas id="text-meter" width="200" height="100"></canvas> <script> //

引っ越すことになった。 仲介業者のお店に行って、いい感じの物件を見つけたので、速攻見積もりをしたのだが、めちゃ高い。 敷金、礼金、仲介手数料、鍵の交換...。賃貸借りるのに色々かかりすぎでは？と思ってた。 ただ、交渉の知識もないしなあ〜〜〜と思っていたら、以下のツイートをたまたま発見。 ワイ「国交省ガイドラインには鍵交換は貸主が負担するのが妥当ってあるよなぁ？」 不動産「見積もりから削除しました！」 ワイ「仲介手数料1か月分になっとるけどはワイの承諾がなければ半月分のはずよな？」 不「半月分に訂正しました！」 ワイ「書類作成代2万とか舐めてんの？」 不「いりません！」— ぴっぴ先生 (@hihihi_sensei) 2018年6月16日 おっ？エビデンスベースで詰めるなら、自分もイケるのでは？と思って調べたことのまとめ メール等でやりとりできると最高にラク まずはじめに、交渉するなら担当者

PySpa統合思念体です。これからJavaScriptを覚えるなら、「この書き方はもう覚えなくていい」（よりよい代替がある）というものを集めてみました。 ES6以降の難しさは、旧来の書き方にプラスが増えただけではなく、大量の「旧来の書き方は間違いを誘発しやすいから非推奨」というものを作り出した点にあります。5年前、10年前の本やウェブがあまり役に立たちません。なお、書き方が複数あるものは、好き嫌いは当然あると思いますが、あえて過激に1つに絞っているところもあります。なお、これはこれから新規に学ぶ人が、過去のドキュメントやコードを見た時に古い情報を選別するためのまとめです。残念ながら、今時の書き方のみで構成された書籍などが存在しないからです。 たぶん明示的に書いていても読み飛ばす人はいると思いますが、すでに書いている人向けではありません。これから書くコードをこのスタイルにしていくのは別にいい

html5j Webプラットフォーム部 第19回勉強会 W.A.S.M featuring PWA https://html5j-webplat.connpass.com/event/74013/

日本経済新聞は国内を代表する経済誌だ。その電子版はwebでの継続課金を大成功させ、いまや50万以上の有料会員を擁するモンスターサイトだ。 その日経電子版が11月6日に全面リニューアルしたのだが、公開後、web業界がにわかにざわついた。表示速度が爆速だったのだ。日経公式もモバイルで2倍の表示速度を達成したと堂々と宣言していた。 webサービスは継続率こそ神KPIで、その継続率には速度が大きく影響する。 これはチェキらないとヤバイと感じ、友人のkitakさんとスピードの秘密を調査してみた。 Fastlyをコンテンツキャッシュに使う殆どのデータはFastlyを経由して取得されていた。Fastlyは最近注目を集めているCDN（世界中にエッジサーバーを配置し、高速にコンテンツを配信するサービス）で、非常に高機能でユニークなサービスだ。 一般に、CDNはいったん世界中にコンテンツをばらまくと、それを無

エラーには大抵「エラーメッセージ」が付いています。 自分は過去に、エラーメッセージの内容を雑にしてしまい後悔することがよくありました。 その経験から、良いエラーメッセージの書き方を考えました。 エラーメッセージを2つに分類する まず、エラーメッセージといっても次の2つのパターンで大きく異なってきます。 (1) ユーザーが見るエラーメッセージ (2) 開発者が見るエラーメッセージ (1) ユーザーが見るエラーメッセージ 内部実装のことは書かないようにする