この記事はようやくSafariでもフルサポートされそうなWeb Animations APIのcomposite（効果の組成）って機能がすごいよ！！って、ただそれだけを伝えたい記事です。平たくいうと複数のアニメーションを簡単キレイに合成できる機能なのですが、通常のWebのコーディングでもよく出てくる辛さを解決してくれる結構すごいヤツなのです。 ▼ こういうアニメーション作るのもだいぶん楽になります Web Animations APIで星空パーティクル 単にCSSのアニメーションをJSで描けるよってだけではあるんだけど、ライブラリなしでそこそこ簡単にインタラクティブなもの作れるって意味ではうれしい。主要ブラウザ全部で使える。https://t.co/8H8zXfc5NL pic.twitter.com/bfTERJPxIX — ゆき＠ティアF47a (@yuneco) October 11

はじめに 皆さんVisual Studio Code(以下VSCode)使ってますか？ 私はメインで使っているのですが、自分なりにしっくりくる設定や拡張機能がある程度揃ってきたので公開しちゃいます。 おすすめ設定だけではなく、おすすめの機能もできる限り紹介したいと思いますので、最後までぜひお付き合いください。 ※プログラミング言語固有の設定の解説は軽めですのでご了承ください。 GIF画像が小さい場合は、クリックして頂けると拡大して表示が可能です デフォルト機能編 Local History機能 Gitは非常に便利なので、皆さん使われていると思います。 Gitはコミット単位で履歴が管理できますが、保存単位で履歴が見れると嬉しいな、保存単位で復元できると嬉しいな、と思うことはないでしょうか。 私はVSCodeは自動保存をオフにして、手動で保存するので、保存単位で履歴が見れると嬉しいなと思うこと

この記事の概要 昨年、デザインに関する社内研修を実施し、その内容をQiitaでも共有してみたところ多くの反響をいただきました。 最近内容をアップデートして研修を実施する機会があったので、こちらも投稿してみます。 具体的な制作テクニックよりは抽象的な考え方がメインですが、デザイナーと一緒に働いている方や、デザインにも興味がある方のお役に立てるのではないか、と思っています。 自己紹介 私はQiitaでデザイナーをしている綿貫佳祐といいます。 2017年に新卒でエイチームに入社して、今年で6年目です。 普段の業務では、企画を考えたりUIを作ったりコードを書いたり。 割と幅広めにデザインに携わっています。 普段の業務以外だと、会社としての発信のデザイン監修する機会が多いです。 例えば、ロゴとかコーポレートカラーのような、会社として大事なグラフィック要素1。 これらが広報物内でどう使われているかのチ

本記事ではSIerに所属する著者が3年間にわたり、私たちのグループで実践している「1on1」の内容を紹介します（グループの業務内容は主にAI系の自社製品開発です）。 ・1on1をこれから始める方 ・1on1の取り組みを検討をされている方 ・1on1を実施しており、さらに改善を検討されている上司側の方 ・1on1を実施してもらっているが、なんだかしっくりきていない部下側の方 こうした方々にとって、何らか参考となれば幸いです。 とくにIT系の企業や職種では1on1を開催しているところも多いと思います。 新人プログラマの方にとっても、1on1を実施する側がどのようなことを考えて実施しているのか、ひとつの例として参考にいただければ幸いです。 （なおQiitaでは現在、新人プログラマ応援 - みんなで新人を育てよう！企画も開催中です） 私が自分の頭を整理するために記事化しましたが、非常に長い文章にな

はじめに 以下おすすめする技術書達です。分類に迷うものありつつ、流行り廃りあるかもなので2022春と書きました。 技術書達 基本 プログラムはなぜ動くのか プログラムはなぜ動くのか 第3版 知っておきたいプログラミングの基礎知識 | 矢沢 久雄 |本 | 通販 | Amazon 2000年代から推されている基本情報技術者レベルの本 イラスト図解式 この一冊で全部わかるWeb技術の基本 イラスト図解式 この一冊で全部わかるWeb技術の基本 | NRIネットコム株式会社, 小林 恭平, 坂本 陽, 佐々木 拓郎 |本 | 通販 | Amazon Webの全体像から、HTTPでやりとりする仕組み、さまざまなデータ形式、Webアプリケーションの開発、セキュリティ、システムの構築・運用まで、これからWebにかかわる人が知っておきたい知識をこの一冊で丸ごと解説! リーダブルコード リーダブルコード ―

Markdownを社内に布教したい、というモチベーションからMarkdownを勧める理由をまとめたもの。 同じようなことを考える方へ、周囲への説得材料になると嬉しい。 1. Markdownを勧める理由 1-1. 圧倒的理由 全人類がマークダウンを学習すべき理由｜情報デザイン力を鍛えよう Markdownとは (日本語Markdownユーザー会) をMarkdownで引用する。 Markdown（マークダウン）は、**文章の書き方**です。 デジタル文書を活用する方法として考案されました。特徴は、 - 手軽に文章構造を明示できること - 簡単で、覚えやすいこと - 読み書きに特別なアプリを必要としないこと - それでいて、対応アプリを使えば快適に読み書きできること などです。 Markdownはジョン・グルーバー（John Gruber）によって2004年に開発され、 最初は [Darin

今日はエープリルフールなので、JavaScriptに関する、にわかに信じがたい話(実話)をしたいと思います。実用的な話ではないので、息抜きがてらお読みいただき、「嘘だろ!?」とツッコミながらJavaScriptへの関心を少しでも深めていただければと思います。 思いつきでゆるめにとりとめもなく書いたため、内容がざっくりしているところがあります。詳しい方はコメントなどで補足いただけると助かります🙇🏻‍♂️ できるだけ十分に調査したつもりですが誤りなどあればご指摘いただければ幸いです。 JavaScriptは10日で作られました JavaScriptは最も利用される言語のひとつで、JetBrainsの統計によれば70%近くの開発者が使ったことがあるほど、広く普及している言語です。 ここまで普及したとなると、JavaScriptはどれほど練りに練って、じっくり作り込まれた言語だったのでしょうか

はじめまして。六月と申します。 ・ツイッターはこちらです ・AtCoderのプロフィールはこちらです 風の噂で、AtCoderでは色が変わった際に色変記事というものを書く文化があり、この時ばかりは大いに自分語りが許されると聞きました…。 そこで、もしかすると人によっては、私の色変記事が参考になる可能性もあるのではないかと思い、筆をとりました。 きみたち、おぢさんの話を聞いてみないか…。 お暇な方はどうぞお付き合いください。 簡単な自己紹介 私は40代で、社会人生活の折り返し地点を迎えつつあります。私生活では小学生の子供を持つ父でもあります。大学は文系で、これまで情報科学の教育・訓練を受けた経験はありません。 業界の特性もあり、私の勤務先ではいまだにFAXと手書き書類がかなり使われています。普段はそのような、おおよそITとは無縁の、むしろ昭和ライクな環境で仕事をしています。 そういったことも

ここ数年の流れについて 技術的側面 Webフロントエンド（ほぼTypeScript＆React界隈）において、オブジェクト指向（厳密に言うとクラスの利用）から脱却する流れがあります。原因は以下の2点。 クラスの継承の問題点が（IT業界全体に）広く定着したこと JS/TSの進化、Reactの進化、関数型言語の考え方などの影響により、クラスを用いてデータと関数群を紐づけるメリットが薄くなったこと 現状、設計レベル（実務的にはどの関数を纏めてモジュール化するのか、モジュール同士をどう繋ぎ合わせるのか、フォルダ割りどうするのか等）のノウハウがまだ固まっておらず、既存の設計論はそれなりに有効です。 コミュニティ的側面（政治） これらの流れはWebフロントエンドの中でもTypeScript＆Reactの界隈が主導しており、そのノウハウは長年絶対視されてきたオブジェクト指向を解体するような内容であったた

先日のApple Eventでも Mac Studio や iPad Air(第5世代) が発表され、いよいよ Apple M1チップ がデファクトスタンダードになったなあと感じています。自分もこれまで、業務用PCとしてMacBook Pro 2017を使っていたのですが、悪名高いバタフライキーボードの破損をきっかけに MacBook Air(M1) を購入してもらいました。 さっそく業務で使用していくためにセットアップをしたのですが、やはりIntelチップとの違いに戸惑ったので備忘録としてまとめます。この記事は元々社内のナレッジに書く予定だったのですが、自分自身QiitaやZennの記事にかなり助けられました。この記事も今後M1 Macをセットアップする人の役に立てばと思っています。 MacOSの基本的な設定を使いやすく変更する 購入したばかりのMacはDockに大量のアプリが登録されて

エンジニアには「技術的な議論についていけるようになりたい」とか「自分が伸ばしたい分野の最新情報をちゃんと追いかけたい」とか悩んでいる人が多いと思う。 例に漏れず私も悩んでいて、以前からいろいろ試していたが、同僚が紹介していた「newsletterを購読する」方法が一番ためになった。 まず不足しがちな情報として、コミュニティの最新動向をキャッチアップするためにはnewsletterを購読している。 newsletterとは有志がある技術に関する最新動向をまとめて定期的に配信するメディアで、僕が購読しているものだと https://this-week-in-rust.org/ https://www.cncf.io/kubeweekly/ などがある。 大体は「<技術名> newsletter」で検索するとそれっぽいものが引っかかるのでそれをsubscribeすればよい。 まともなnewsle

TL;DR 最近の設計志向はイベント駆動がかなり中心になっている とくにDDD界隈がここまでイベント駆動一本槍だとは思わなかった ストーリーを出発点にイベント駆動で設計を組み立てる「イベントストーミング」がかなり多くの場所で事例として取り上げられている はじめに 最近、洋書や動画の講演資料などいくつか海外の情報源に当たることがおおくなり、その中で「結構日本でやられている取り組みとちがうなー」と考えることが多く、一旦そのあたりの差分をまとめておこうかと思いました。 ただの出羽守（あるいは鹿鳴館精神）ではなく、一つの潮流としてこんなのがあるってのを記述できればなと思います イベントが設計の基本線となりつつある、、、のか？ まず1つ目に驚いたのが、イベントが設計の中心になっている、そう感じる機会が多かったこと。 ここで言うイベントは、実践ドメイン駆動設計の中でも「ドメインイベント」として実装パタ

はじめに 今年（2022年）1月から、久々に個人でスマホアプリ配信の副業を再開してみました。 脱税（違法）は絶対ダメですが節税（合法）は限界までしたい と思っているタイプなので、以前副業でやっていた時に税関連のこと（所得税法）をそこそこ調べておいたつもりですが、かなり久々なので現行ルールの確認がてら、主にスマホアプリで副業した際の確定申告の要点をまとめてみます。 ストーリー（ポエム？）として文章を書きたかったので、グダグダと長文を書いてますが、要点は最後の「まとめ」で簡潔に書いてあります。 エンジニアとして働いている私たちには少し縁遠い「経理」に関する話題ですが、 趣味でスマホアプリを出しつつ、ついでにマネタイズしているエンジニアは多いハズ サラリーマンはどうしても確定申告と縁遠い スマホアプリで確定申告が必要な水準まで収益を上げる事は困難である（個人の場合99%以上の人は確定申告不要で、

こんにちは、ぬこすけです。 近年、Webフロントエンドではサイトのパフォーマンスの重要性が高まっています。 例えば、GoogleはCore Web Vitalというパフォーマンスに指標を検索結果のランキング要因に組み込みました。 また、近年の某企業が「パフォーマンスの改善に取り組んだ結果、セッション数〇％アップ、CVR〇％アップ...」などの事例は枚挙にいとまがないでしょう。 パフォーマンスチューニングするためには、定量的に計測してボトルネックを探すようなトップダウンなアプローチもあります。 しかしながら、時には千本ノック的にハウツーを片っ端から試していくボトムアップなアプローチも有効になることもあったり、日々のコーディングでパフォーマンスを意識したコードを書くことは大切でしょう。 この記事ではパフォーマンス最適化のハウツーを紹介します。 パフォーマンス改善の施策が思い浮かばない時やフロン

何を言っているんだと思われるかもしれないですが、気軽にパスワードの1文字目に「~」を使わないほうがいいというお話です。 起こった問題 踏み台サーバー経由でサーバーAに接続して作業をしていた時の話です。 いわゆる多段 ssh 接続というもので、リモートワークになってからは結構使われる方も多いかと思います。 サーバーA上で root 権限になろうと sudo su - してパスワードを入力したら Connection to xxx.xxx.yyy.zzz closed. の文字とともにサーバーAから追い出されてしまいました。 なにかの間違いだろうと何度か挑戦していたのですが、結果はサーバーAから切断され踏み台サーバーに戻る羽目に。。。 そのときに入力していたパスワードが ~.xxxxxxxxxx のような ~ から始まるものでした。 調査 ~ って何か意味があったよなーと思ってどう調べようかと

はじめに モダンフロント開発に必須の知識であるES2015〜以降の記法と、実務でよく使用される高階関数について、自分の中で改めて復習、整理しておきたいと思います。 それぞれの項目に★~★★★の重要度も記述しています。 ★★★ => 必ず覚えておくべき ★★ => 覚えておくべきだが、使う場面が限られる ★ => 知識としては知っておいた方が良い 現在フロントエンドエンジニアの方やフロントエンジニアになりたての方、フロントエンドエンジニアを目指して勉強中の方に読んでいただけたら幸いです。 ES(ECMAScript)とは？ JavaScriptの標準仕様。 現在ブラウザで使われているJavaScriptは、ECMAScriptの仕様に則って開発されています。 JavaScriptは他の言語のようにversionなどが存在せず、「ECMAScriptのversion~~に対応しているJavaS

モダンな技術で手軽に地図アプリを始めてみよう！！！（Next.js/TypeScript/Tailwind CSS/maplibre GL JS/Deck.gl）TypeScriptNext.jsdeckgltailwindcssMapLibre はじめに はい！！！今年もやってまいりましたMIERUNEアドベントカレンダー！！！ 記念すべき1日目は「何をするにもまずは環境構築からだよね！」ということで、モダンな技術をふんだんに使ってフロントエンド側の環境を構築し、簡単な地図アプリ用テンプレートを作成いきたいと思います！ 最新技術を利用すればめんどくさい環境構築も簡単に行えるようになるぞーっていうのを知ってもらえればなーと思います！ こちらに記載の手順を全部実行したテンプレートは以下のリポジトリで公開していますので、せっかちな方はこちらからどうぞ！ https://github.com/n

はじめに こんにちは。WEBエンジニアのmasakichiです。 OSSを始めたいと思いながらも「なにから始めたらいいかわからない…」と悩んでいませんか？ そんなOSS未経験者にGood First Issueというリポジトリをお勧めしたく記事にしました。 この記事で書いてあること この記事には以下の2つが書いてあります。 Good First Issueについて Good First Issueからコントリビュートするまでの流れ（経験談） Good First Issueとは OSSにコントリビュートしたことのない開発者でもすぐに始められる人気プロジェクトをピックアップしたキュレーションサイトです。 プロジェクトのリンク先はgithubリポジトリで管理されています。 リポジトリはこちら キュレーションサイトはこちら Good First Issueでは下記の基準を満たしたプロジェクトがピ

これらの試算から、1人あたりのトラッキングによる通信量はおおよそ16.88kbpsから112.50kbpsと考えられます。 スター型ネットワークの場合 ここでメタバースでスター型のネットワークを採用することを考えます。 どのような構成かというと、クライアントがトラッキングデータをサーバーへ送信します。各クライアントへのトラッキングデータの送信はサーバーが行います。 こうした構成を行う場合、全てのクライアントのデータがサーバーを介し、各クライアントへ流れ込みます。そのため、通信速度は下り速度がボトルネックとなります。ここでは人口75%ラインの88Mbpsを上限として考えます。 先ほどの1人当たりのトラッキングに関わる通信量から算出すると、スター型の場合、801～5,340人が通信の限界になります。 フルメッシュ型ネットワークの場合 一方で、サーバーを介しないクライアント同士が直接つながるフル

この記事は Goodpatch Advent Calendar 2021 の12日目です。 今回はFigmaのPluginであるFigma Tokensを使ってみて実感した恩恵や、実際にどのように利用したかを書いていきます。 はじめに フロントエンジニアの責務の一つとしてUI実装（UIの実現）があります。 UI実装はFigmaなどのデザインファイルを設計書として実装していきます。しかしながら、デザイナーも人間なのでデザインファイルにミスがあることもあります。また、デザイナーとエンジニアが並走してプロジェクトを進めていく場合はデザインファイルの変更がたびたび起こることもあり、都度デザイナーとコミュニケーションをとりながらコードを修正しなければなりません。 このような状況を考えると、UI実現の責務をフロントエンドエンジニアだけが受け持つのは荷が重く、クオリティ低下につながる危険性があるのではな