Flat Config導入完了！ 新しいESLintの設定フォーマットを使ってみた
皆さんこんにちは。株式会社バベルでエンジニアをしている uhyo です。バベルが提供しているaileadというプロダクトでは TypeScript が多く使われており、ESLint も活用されています。この記事では、ailead のコードベースにおいて ESLint の新しい設定フォーマットであるFlat Config (eslint.config.js)を導入した事例を紹介します。 Flat Config とは？ Flat Config については、ESlint 公式ブログでも詳しく説明されています。 ファイル名がeslint.config.js固定であり、必ず JavaScript で書かなければいけないのが特徴です。新しいフォーマットでは、従来の設定ファイル（.eslintrc{.yml,.json,.js}）で辛かった部分が解消されています。特に、設定内容の解決にあたって ESLi
M1 Macを購入したのでセットアップ＆zsh環境をいい感じにした - Qiita
先日のApple Eventでも Mac Studio や iPad Air(第5世代) が発表され、いよいよ Apple M1チップ がデファクトスタンダードになったなあと感じています。自分もこれまで、業務用PCとしてMacBook Pro 2017を使っていたのですが、悪名高いバタフライキーボードの破損をきっかけに MacBook Air(M1) を購入してもらいました。 さっそく業務で使用していくためにセットアップをしたのですが、やはりIntelチップとの違いに戸惑ったので備忘録としてまとめます。この記事は元々社内のナレッジに書く予定だったのですが、自分自身QiitaやZennの記事にかなり助けられました。この記事も今後M1 Macをセットアップする人の役に立てばと思っています。 MacOSの基本的な設定を使いやすく変更する 購入したばかりのMacはDockに大量のアプリが登録されて
React+TSプロジェクトで便利だったLint/Format設定紹介
こんにちは、よしこです。 この記事は 2020年に立ち上げたWebフロントエンド構成の振り返り の「linter/formatter」項の詳細記事です。単体でも読めますが、よければ元記事もあわせてどうぞ！ この記事では、今わたしが 株式会社ナレッジワーク というスタートアップで開発・運用しているプロジェクトにおいて便利だったLint/Format関連の設定についてご紹介していきます。 使っているのは、TSのlintのためにESLint, CSSのlintのためにStylelint, 主なファイルのformatのためにPrettierです。 ESLint pluginsとextendsだけどんなもの入れてるか載せておきます。 "plugins": [ "strict-dependencies", // 後述 "unused-imports", // 後述 ], "extends": [ "a
Azure Functionsが辛すぎて泣きそうになった話
はじめに 基本的にAWSエンジニアとして仕事していて、Azureは未経験でしたが案件で採用されて触れる事になりました。 Azure Functionsで処理する所があって私に一任という感じだったのですが、まぁAWS Lambdaみたいなもんでしょと（恐らく他の人も）思ってました。 それがこんな事になろうとは… 必要なリソースが多い まず戸惑ったのがこれです。 関数を書くまでに以下のリソースが必要です。 Azure Functionsのインスタンス（という表現が正確か不明ですが。） Lambdaと違って１つのインスタンスに複数の関数を乗せる形になります（１つ１つ作ってもいいですが…） プラン 料金プランの事だと思えば良いかと。なんですが、プランも１つのリソースなんです。。 Azure Storage アカウント コードや一部の設定情報などが保存されています。 Application Insi
Iosevkaというフォントが良い
突然ですが、皆さんはどのフォントでコーディングしていますか? monaco、Monospace、MSゴシックなど、等幅フォントを軸に種類は多種多様です そんな中、それらを尻目に私が使っているフォントはIosevkaというフォントです Iosevkaとは? 以下の特徴を持ったフォントです 等幅フォント 日本特有の文字種(㈱や㌕など)に対応 これらもきっちりと等幅を守っている リガチャ機能あり !=や<=など、特定の連続した文字列を合成して別の文字で表す機能 エディタもリガチャに対応している必要あり(VSCodeやAtom、iTerm2は対応しているので、大抵のエディタやIDEは対応していると思います) 特定の文字をプリセットの中から選ぶ事ができる プリセットから選んで、特定の文字のみデザインを変更することも可能 全体的な文字の太さ、デザイン、文字のゆとりも設定することが可能 特に 特定の文字
いろいろな .config.js で型の補完を効かせる方法まとめ
いろいろな JavaScript 系ライブラリの設定ファイルで型の補完が効くようにするための JSDoc アノテーションまとめです。VSCode で確認しています。 リンクのついていないものは自分で型定義を探したものなので間違っている場合はコメントいただけると助かります。 他のライブラリの情報もコメント大歓迎です！
【Tips】Macを快適に使いこなすために、最初に設定すべき33の項目 - iPhone Mania
Macを買ったら最初に設定すべき33の項目を、米メディア9to5Macが動画にまとめているので、ご紹介します。普段からMacを使っている方も、知っておくと便利です。 簡単な設定でMacを便利に使おう 9to5Macが取り上げた、新しいMacを便利に使うためのテクニックは、簡単な設定の変更で実現できるものが中心です。 操作関連 ▼1. トラックパッドのスピードを調整する ▼2. 「タップでクリック」を有効にする ▼3. 3本指のドラッグ ▼4. マウスカーソルの移動速度を変える ▼5. 右クリックに相当する副ボタンを設定する ▼6. 指1本でSafariのページ間を移動 ▼7. Apple Watchでロック解除 ▼8. 画面の四隅にカーソルを合わせて機能を呼び出す「ホットコーナー」 ▼9. コントロール間のフォーカス移動をキーボードで操作 システム設定 ▼10. Macの名前を変える ▼1
Zennで発生した障害の原因と行なった対策のまとめ
2021/02/24の11時頃〜1時間ほどzenn.devにアクセスしづらい・アクセスできない問題が発生していました。その後も3時間ほど一部のページへのアクセスができない状況となっていました。Zennに投稿してくれた方、見に来てくれた方、ご迷惑をおかけしてすみませんでした。 今回の障害は学びが多かったので、個人の記事として残しておくことにします。 原因 今回の障害は、使用しているクラウドサービスではなく、Zenn自体に原因がありました。 1. KaTeX記法により生成されるHTMLが思った以上に大きかった ZennのマークダウンエディターではKaTeX記法をサポートしています。例えば、$a\ne0$と書くとa\ne0と表示されます。 KaTeXはサーバーサイドレンダリングをサポートしており、KaTeX記法からの数式のHTMLへの変換はサーバーサイドで行なっていました。DBにはマークダウンだ
【2020冬】 TypeScript + Prettier + ESLint + VSCode の設定 - Qiita
概要 eslint-plugin-prettier が非推奨になったらしい。 いつのまにか eslint-plugin-prettier が推奨されないものになってた | K note 以下の要件を満たしつつ、ESLint の config から Prettier を分離したい。 VSCode からフォーマッタを実行できる。 非 VSCode 民でも npm script からフォーマッタを実行できる。 CI でフォーマッタ未適用コードをエラーにできる。 TL;DR src: https://github.com/arx-8/try-separate-eslint-and-prettier/commit/0d0f92201ca2102f20893b26fd23a902621aba41 やったこと VSCode からフォーマッタを実行 以下の通り移行。 prev: 拡張機能 dbaeumer
AWSアカウントを作成したら最初にやるべきこと -セキュリティ編- - Qiita
JAWS-UG 初心者支部 #22 ハンズオン用の資料です。 目的 AWSアカウントを不正利用されないために、アカウントを作成したらまずやるべきセキュリティ周りの設定を行います。 前提 AWSアカウントを作成済みであること AWSアカウントにログインしていること リージョンは東京リージョンを利用します ハンズオン手順 アカウント周りの設定 ルートアクセスキーの削除 ※ルートアカウントのアクセスキーは、デフォルトでは作成されておりません。アクセスキーを作成済みの方を対象とします。 ルートアカウントは全てのサービスへのアクセスが出来てしまうため、ルートアカウントは使用せず、IAMユーザーを使用しましょう。 CLI等のプログラムアクセスも不要なため、アクセスキーを削除します。 https://console.aws.amazon.com/iam/home#/security_credential
GCE の無料枠のサーバを立るときに、初見でハマりそうなところ - Qiita
このスライドについて GCE の無料枠で遊ぶときに、やったほうがいいこととかを紹介します。 大体無料で運用できますが、1年間以上の長期運用をする場合はお金がかかるかもしれません。 やったこと お金をかけずに以下のことができるようにしてみました GCE のサーバインスタンスを立てた ドメイン取った HTTPS 対応した 概要 私が気づいた「気をつけたほうがいいこと」は、大まかにこんなかんじ。 最初に支払いのログの設定をする バケットとオブジェクトの命名ガイドラインに従う GCP の無料枠でなんとかなるようにする GCEのf1-microインスタンスを真にタダで使う方法 の問題 無料ドメインをとる DDNS（ieServer.net系）だと、証明書発行できない 1年間までなら無料で使えるドメインはある 有料でも、安めのドメインを買ったほうがいいかもしれない？ Let's Encrypt の証明
プログラム内でdotenvを読み込むのをやめた話
dotenvというRuby発のOSSがあります。 .envって名前のファイルに環境変数を列挙してライブラリを読み込むと、それらの値をプロセス内の環境変数として値を展開してくれるというツールです。 もちろんNode.js版の実装も存在します。 Herokuを愛用していた時期によく使っていたのですが、何年か使ってみた結果プロセスの中でrequire('dotenv').config()と書くのではなく、そのプロセスを起動するときにnode --require dotenv/configとrequireオプションを用いてdotenvとプログラムの依存をなくす方向に落ち着きました。 なぜそちらの方がいいのか考えていることを残しておく。 コードがコミットされてない（はずの）ファイルに依存している 当然ですが、dotenvがソースに書かれているということは.envという名前のファイルが存在していること
docker build 時の apt install が遅い問題 (docker build の --add-host オプションを使って APT のパッケージリポジトリを国内ミラーに設定できる) - ひだまりソケットは壊れない
こんにちは、Docker ビルドおじさんです。 今日ずっと docker build してる (してない)— Nobuoka Yu (@nobuoka) 2019年3月22日 ubuntu:18.04 ベースで Dockerfile を書いてビルドしまくってるのですが、apt install がとにかく遅い！！！ なぜなら日本に住んでいるから！！ archive.ubuntu.com が遠い！！！ Dockerfile に追記せずに apt で使うリポジトリを https://t.co/Skrw55Kyjw から国内のミラーに変える技みたいなのないんだろうか……— Nobuoka Yu (@nobuoka) 2019年3月22日 解決方法 調べてみたらいろいろ解決策がありそうだった。 解決策 その 1 日本を出る。 archive.ubuntu.com の近くに行きましょう。 解決策 その
@typescript-eslint ことはじめ - teppeis blog
追記: 2019/05/01 最近の@typescript-eslint/eslint-plugin, Prettierのアップデートによって、正式にTypeScript 3.4対応されました。一通り普通に動いてる感じ。 これまで自分で使っていて問題になったのがパフォーマンス。ESLint単体やTSLintに比べて、プロジェクトによるだろうけど2倍以上遅い。体感で結構辛い。 Poor performance on some projects · Issue #389 · typescript-eslint/typescript-eslint これはTypeScriptのパーサーを通す部分の構造上の問題が原因なので、簡単には直せなそうな気配。 とりあえず、個人的には型を必要とするルールにそこまでの価値を感じていないので、該当ルールを無効にしてparserOptions > projectを削
AWSのSES利用時に知っておくべきSRSの挙動 - Qiita
この記事の話題 AWS SESでSPFを設定しようと思ったら以下のドキュメントに当たります。 Amazon SES で MAIL FROM ドメインを設定する この中で、SPFを設定しようと思ったらなぜかMXレコードを設定せよと記載されてます。 そのあたりの設定がなんで必要なのかこの記事にまとめます。 前提 設定の前提 過去の記事でAWS SESでのメール送信時にSPFの設定は必要だよ！って書いたので、送信元ドメインでSPFレコードを公開するように設定することを前提とします。 SPFの設定 Amazon SES で MAIL FROM ドメインを設定する 上記のリンク先から大まかな手順を引用すると Amazon SES コンソールまたは API で、指定した MAIL FROM ドメインが使用されるようにアイデンティティを設定します。 MAIL FROM ドメインの DNS サーバーに M
iMac/MacBook購入後に必ず設定したい設定項目 - Qiita
背景 iMacやmacbookの買い替えなんかで購入直後に設定する項目のメモ ターミナルから設定できます。dotfileとして置いておいて端末購入時に実行するやり方が基本のようです。 一度書いてしまえば端末購入のたびに実行するだけで同じ設定のマシンが瞬時に出来あがるのは素晴らしいですね。 vimrc同様に育てていく感覚が大事なのかも知れませんね()。 基本的には以下のリポジトリとサイトを参考に記載しています。 https://www.defaults-write.com/ https://github.com/divio/osx-bootstrap/tree/master/core https://github.com/mathiasbynens/dotfiles/blob/master/.macos defaultsコマンドとは 「plist」と呼ばれるアプリやシステムの設定ファイルに、
【小技】Firefox Quantumで「Tab Mix Plus」の機能を再現する｜ おこづかいサイト攻略ブログ - おこづかいBeeDASH！
ポイ活・ポイントサイトを中心にインターネットで稼げるお小遣いの情報を紹介しています。 SNSでは懸賞情報も発信中。当ブログにはプロモーションが含まれます。
フロントエンドの「想定外」に対応する考え方とTipsいくつか
とても個人的な話ですが、ここ最近で自分自身のプライバシー意識の高まりを感じて、ブラウザの設定を見直す機会がありました。見直したのはCookieの設定で、許可したドメインにしかCookieを記憶しないようにしました。設定変更によるある程度の不便は覚悟していました。とはいえ、ま〜せいぜい、初回アクセスの時のモーダルが何度も出るようになるとか、ログインできなくなるとか、そのくらいかなと思っていました。 しかし実際は、悪い意味で期待を裏切られることになりました。 Cookieが無効なだけで、“全く”動かなくなってしまうウェブサイトやウェブアプリが、本当にたくさんあることに気づいたのです。 全く動かなくなってしまう原因は単純（後述）だったのですが、ちょっとした対処で簡単に直せることなのに、サイト全体が一切使い物にならなくなってて、もったいない！！ と思いました。 フロントエンドの想定外 ウェブサイト
VRゴーグル「Oculus Go」購入・セットアップからおすすめコンテンツ・便利に使うTIPS情報まとめ - karaage. [からあげ]
Oculus Go買いました 2万円台で購入できるVRゴーグルです。気付いたら買ってしまっていました。 Oculus GoやVRの世界で起きていることの概要などは、以下の記事を参照下さい。 私個人としては、日本にOculusを広める立役者となった、VRエバンジェリスト@GOROman さんの影響が大きいですね。以下の本もオススメ…と言いたいのですが、Amazonでめちゃめちゃプレミア価格になっていますね… ミライのつくり方2020―2045 僕がVRに賭けるわけ (星海社新書) 作者:GOROman(近藤義仁),西田 宗千佳発売日: 2018/04/27メディア: 新書 まだOculus Go購入して1週間ほどですが、色々便利な使い方とかコンテンツが分かってきたので、簡単に紹介します。この記事はしばらく随時更新していく予定です。 Oculus Go購入方法 公式サイトでクリックするだけ！な
![VRゴーグル「Oculus Go」購入・セットアップからおすすめコンテンツ・便利に使うTIPS情報まとめ - karaage. [からあげ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/d28dfa0f3c2e3f976f76e0a41bdbd1b429c7b50b/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fk%2Fkaraage%2F20180522%2F20180522070018.jpg)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
個人でWebサービスを公開した時にやったことリスト
