デザイナーにもお勧め！ CSSもThree.jsもタイムライン編集を可能にするTheatre.jsが凄い ウェブサイトの演出を作る上でアニメーションの実装は欠かせません。一般的には、CSSアニメーションやJavaScriptのライブラリ（GSAPジーサップなど）を用いてコードベースで動きをつけることが多いと思います。ですが、完全にコードだけでアニメーションを調整するのは大変だと思ったことはないでしょうか？ 一度実装したことがある方は共感いただけるかもしれませんが、少し直そうにもコードに戻って調整し、反映されたブラウザ画面を確認して、もう一度コードを直して…と往復していると結構大変です。また、アニメーションさせるプロパティや要素が複数ある場合には、コードを解読する難易度も上がります。 本記事ではそんな悩みを解決できる、GUIからアニメーションを調整できるライブラリ「Theatre.jsシアタ

フロントエンドカンファレンス北海道2024 で発表させていただきました。 スライド中のリンク一覧

はじめに Reactの人気はどんどん加速しています。これからフレームワークを学ぶならReactを選ぶのは賢い選択でしょう こんにちは、Watanabe Jin(@Sicut_study)です。 今回はReactをこれから学んでいこうと思っている方に向けて、初心者チュートリアルを作成しました。 このチュートリアルではReactを書く上で欠かせないことを紹介しています。 実際にアプリを作りながらReactの機能について学ぶことによってより深く理解することが可能です。 このチュートリアルを最後までやったら、次に自分で習ったことを活かして簡単なTODOアプリなどを作れば基本がしっかり身につくようになっています。 またこのチュートリアルではJavaScriptではなくTypeScriptを採用しています。 モダンな会社ではTypeScriptが採用されることが多いはずだなので、少しでも慣れていただけ

2024年度リクルート エンジニアコース新人研修の講義資料です

サービスの開発をしていてPMから施策案が出てきた時、ソフトウェアエンジニアとして施策案が本当にユーザーのためになりサービスの成長につながるか納得できないことがある。 このような時にただ文句や愚痴を言っても何も始まらない。エンジニアからも何らかのアクションを起こし施策を前に進める必要がある。 そこでエンジニアができるアクションについて、自分が思っていることを書いてみる。 納得できないケースは大まかにどのようなものがあるか 納得できないケースでは大まかに2つのケースがあるのかなと思っている。 (1) 施策をしたい目的や仮説自体に納得できていない (2) 施策の目的や仮説は良いが、それを達成する手段に納得できていない 1つ目は、たとえば「ターゲットとしているようなユーザーって本当にいるか？」「ユーザーにこういう課題があると言っているが本当にそういう課題があるか？」「この指標に繋がると言っているが

CSSの@propertyがFirefoxにサポートされ、デスクトップ・スマホのすべてのブラウザでサポートされました。 @propertyは次世代変数と呼ばれるもので、これまでの変数（カスタムプロパティ）の使い勝手が大幅に向上します。@propertyによるカスタムプロパティの記述方法、@propertyを使ったCSSのテクニックを紹介します。 @property: Next-gen CSS variables now with universal browser support by Una Kravets 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに @propertyのメリット @propertyによるカスタムプロパティの記述方法 @propertyの使い方: きらめくグ

TypeScriptのコードでは、export {}; という記述を見かけることがあります。これはECMAScriptの構文ではあるものの、これが使われる背景にはTypeScript特有の事情があります。この記事では、export {}; がなぜ使われるのか、どのような効果があるのかを解説します。 export {}; とは この構文は、exportというキーワードから分かるように、モジュールに関連する構文です。 一般に、export { ... };という構文は、既存の変数をモジュールからエクスポートするために使われます。例えば、次のようなコードが考えられます。 const foo = 42; const bar = "hello"; const banana = "banana"; export { foo, bar as hello, banana as "🍌", }; 変数をエク

（株）Money＆You代表取締役。中央大学商学部客員講師。慶應義塾大学経済学部卒業後、外資系生命保険会社にて資産運用リスク管理業務に従事。2015年に創業し現職へ。Webメディア「Mocha（モカ）」、YouTube「Money＆YouTV」、Podcast「マネラジ。」、Voicy「1日5分でお金持ちラジオ」、書籍、講演などを通してお金の情報を日々発信中。『はじめての新NISA&iDeCo』（成美堂出版）、『定年後ずっと困らないお金の話』（大和書房）など書籍90冊、累計160万部超。日本年金学会員。日本証券アナリスト協会検定会員。宅地建物取引士。ファイナンシャルプランナー（AFP）。日本アクチュアリー会研究会員。

EDR製品の有効性について質問させてください。 EDR製品を導入していれば、いわゆる標的型攻撃にみられるような不審なネットワーク探索をほぼ確実に検知できると考えて良いものなのでしょうか？ それともEDR製品ではどうしても検知できないネットワーク探索手法も存在するのでしょうか？ まず、EPP（Endpoint Protection Platform）とEDR（Endpoint Detection and Response）という二つの用語について説明します。 EPPは従来のウイルス対策ソフトをEDRとの対比のためにこう呼んでいますが、基本的にはシグネチャにより、パソコン等に入ってきたファイルをチェックして、マルウェアと判定したら隔離や警告をするものです。 EDRは、エンドポイント（パソコンやサーバー）の挙動を見張っていて、マルウェア特有の挙動を検知（Detection）したら、対応（Resp

初めて使ったBIツールはLooker Studioのid:syou6162です。これまでTableau / Looker(≠ Looker Studio) / Metabase / Redash / Connected Sheetsなど色々なBIツールを触ってきましたが、不満は色々ありつつも個人的に一番しっくりきて愛着があるのはLooker Studioです。このエントリでは、その魅力と便利な使い方や注意点について書きます。例によって、社内勉強会向けの内容を外向けに公開しているため、内容の網羅性などは特に担保していないことにご注意ください。 Looker Studioの魅力 利用のハードルが限りなく低い & Google Workspaceとの連携が便利 複雑過ぎることができないので、諦めが付けやすい ちゃんとBIツールになっている Looker Studioの便利な使い方 多様なデータソ

CSSのclass名やJavaScriptの関数名を付けるときに悩んだり、ネタ切れになったことはありませんか？ BEM, OOCSS, SMACSSで命名する場合はそれを使用すればよいのですが、特定のテーマ別にグループ化された単語のリストが必要になるときもあります。そんなときに役立つ単語リストをまとめたClassnamesを紹介します。 Classnames Classnamesは、CSSのclass名やJavaScriptの関数名を付けるときに便利な単語をリスト化したものです。MITライセンスで、商用プロジェクトでも無料で利用できます。

今日、父が死んだ。自殺だった。 父と同居していた母によると、今年に入ってから、父は毎日のように死にたいと訴えていた。八十二歳となり生きる意欲や気力がなくなり、体力の低下や体調の悪さとともに何もかもが辛いのだという。 会いに行った時には、死にたくなる辛さの一つとして、「夜中に口の中が渇く」というのを挙げていた。なんでそんなことで死にたくなるのか理解できなかったが、話を聞くと、寝ている二階から降りて台所まで行き、水を飲んでまた二階に上がるのが辛いようだった。「だったら、寝室に飲み物を置いておけばいいじゃないか」と提案すると、そこで初めて気づいたらしく、水筒がいいのか、ペットボトルがいいのかなどと、母と相談し始めた。 その時は、父が抱えている様々な問題は、個々に解決できる問題であって、判断力が衰えたため、自分でどうしていいか分からなくなっているだけのように思われた。精神科に通っていたので、病院で

概要 「インターネットの中身」についてどれぐらい知っているでしょうか？ インターネットを普段から当たり前のように使ってる人は多いですが、その裏側の仕組みについて知っている人は、決して多くはありません。(IT業界で働く人であっても、インターネットを構成する深い部分まで理解している人はごく一部だったりします。) 本講演では、業界歴13年の現役ネットワークエンジニアであり、YouTubeにて5年に渡って情報発信してきた発表者が、ネットワーク業界関係者しか知らない「インターネットの裏側の仕組み」について、ディープに、かつ初心者にもわかりやすい言葉遣いで噛み砕いて解説させていただきます。 インターネットの仕組みやネットワークインフラの存在を知ることで、みなさんが普段お使いのサービスの裏側が理解できるようになるのはもちろんのこと、みなさんの業務においても、的を射たビジネス企画やサービス提案が実現できる

Yjsは、リアルタイム共同編集を実現するためのアルゴリズムとデータ構造を提供するフレームワークです。Notion や Figma のように、1 つのコンテンツを複数人で同時に更新する体験を提供することができます。 Y.Map, Y.Array, Y.Text といった共有データ型を提供し、それらは JavaScript の Map や Array のように利用できます。さらにそのデータに対する変更は他のクライアントに自動的に配布・同期されます。 Yjs は Conflict-free Replicated Data Types (CRDT) と呼ばれるアルゴリズムの実装であり、複数人が同時にデータを操作してもコンフリクトが発生せず、最終的に全てのクライアントが同じ状態に到達するように設計されています。 クイックスタート Y.Map がクライアント間で自動的に同期されるコード例を見てみましょ

夏の家メシの頼れる味方といえば、やっぱり冷たいそうめん！　あっという間に茹で上がって、スルスルッと食べられる手軽さに加えて、和風、洋風と味つけの融通が利くところも自炊向きの食材ではないでしょうか。 そこで今回は、『メシ通』で紹介してきたそうめんレシピを振り返って、そうめんを茹でながら電子レンジで同時にできるつけ汁や、具沢山のぶっかけそうめんまで、美味しそうで、とくに“これならできそう”感あるものを集めました。夏メシのローテーション入り間違いなしのものばかりですよ！ INDEX ▽01:コシが強くて激ウマなそうめんの茹で方と「ピリ辛油そうめん」のレシピ ▽02:冷蔵庫で1時間「旨辛壺ニラ」を自作したら、そうめんが無限に食べられた ▽03:レンジ4分のトロトロなすが甘酸っぱウマ～な「南蛮漬け風そうめん」を暑くて食欲のない日に ▽04:冷たい豆乳と粉チーズ、黒こしょうをぶっかける夏のまかないそう

はじめに 意外と知らなかったCSSプロパティを3つ紹介します。 1. currentColor currentColor（CSS:カスケーディングスタイルシート） 特定の要素に指定されている色を参照するCSSプロパティです。 要素内の任意のプロパティで使用できますが、特にボーダーや背景などの色を親要素の色と同じにしたい場合に便利です。 currentColorの利点は、色の変更が親要素のcolorプロパティによって自動的に反映されるため、親要素のテキスト色を変更するとcurrentColorを使用している要素の色も新しい色に変更されることです。 使用例 .parent { color: red; border: 1px solid currentColor; /* テキストの色と同じ色（red） */ .child { color: currentColor; /* 親のテキストの色と同じ

はじめに 以前紹介させていただき、2022年Qiitaのいいねランキング18位、ストックランキング20位を記録したこちらの記事の続編です！ DevToysはリリース後しばらく定期的なバージョンアップが続けられていましたが、去年の7月からぱったりとアップデートが止まっている状態でした。 リポジトリや作者のXを見るとバージョン２の開発を行っているようで、今か今かと待ち続けていましたが数日前リリース予告のポストを見つけて、今日ついにプレリリースされました！ ということで早速紹介していきます！ DevToysとは DevToysは「開発者のためのスイスアーミーナイフ」の紹介文の通り、開発時によく使うツールを十徳ナイフのようにまとめたアプリとなっています。 JSONの整形とかエンコードデコードetc... プログラミングや保守運用の調査でやりがちな作業をいちいち変換サイトを探したり、エディター拡張機

TypeScript は本質的に自分に型が付与されていると思っているだけの JavaScript です。 いくら型を付与しようが、それが実行時に影響を与えることはありません。 コードレビューをしているとここを誤解している人が本当に多いです。何度も解説しているのですが、なかなか浸透しないので、TypeScript におけるバリデーションという視点で記事を書くことにしました。 あと TS でバリデータ使って色々作ろうとしている友人と、プログラミング始めたてで zod と openapi を使っいる友人がいたので、彼らが想定読者です。 型と値の名前空間 TypeScript 上での名前空間(スコープ)は2つに分類できます。 値: 実行時にランタイム上のメモリに存在するもの 型: 静的解析時にのみ参照可能なもの。コンパイル時に完全に消滅する。 TypeScript は基本的に JavaScript

chatgpt.com 3行で 英文アウトプット練習の優れた相手をGPTsで実装できたからストアに並べたよ！ 学習ツールとしての気持ちよさが自慢なのでまずは1回遊んでみてください！ 「英語だと中学生レベルの文章すら全然話せない」の克服ができる………と信じて、製作者自身が酷使しています 何ができるの？ 和文による出題→英訳→添削→出題…のループです。 体験の良さと自身のアウトプットカの弱さは触ってもらえばすぐに伝わるはずです。これ読む人の8割はブクマして満足するだけなんでしょうけど、これ以降を読むより先にまずは一度使ってみてください。最初にあるリンクへ飛ぶだけです。 なお「完全無料！」と言いたいですが、ChatGPTへの課金が無いとすぐに制限が入るのが最大の難点です。 特長を教えて ジャンルや問題の難易度を適宜変更可能。激ムズ要求出したら絶望感がすごい…… 日本語混じりの英文や、かなりの意訳

この記事は Vim 駅伝 の 06/05 の記事です。 前回の記事は thinca さんによる、 06/03 の「Meguro.vim #23 を開催しました」という記事でした。 次回は 06/07 に投稿される予定です。 はじめに 本記事は以下の記事のオマージュです。 Vim の基本操作のうち、比較的マイナーながら汎用的に使える機能や小技を集めました。プラグインや複雑な設定が必要なものは含まれておらず、いずれも Vim と Neovim の両方で使うことができます。気になったものがあれば使ってみてください。 ノーマルモード編 検索結果を次々と置き換える Vim で文字列置換を行う最も有名な方法は :substitute コマンド （短縮形: :s） ですが、ノーマルモードの cgn というイディオムも便利です。これは c オペレータと gn テキストオブジェクト (:h gn) を組み合