GitHub Actions による自動デプロイに承認機能を付ける
GitHub で共同開発をしている場合、GitHub Actions を使用して継続的なデプロイを行っていることが多いかと思います。 例えば Git タグを使用して、そのタグ作成をフックに自動で Production へデプロイといった運用が考えられます。 ただ、そういった運用は、運用自体が簡単ではあっても、セキュリティに難があります。 業務委託等の社外エンジニアが開発に参加している場合、そのレポジトリに対して Write 以上の権限が必要になります。 すると、Git タグを作成する権限もあるわけで、そうなると、社外メンバーが Production デプロイを勝手に行えてしまいます。 そういったことを防ぐために、Production デプロイ自体に承認機能を付けることができます。 それを、GitHub Actions と GitHub Environments という機能を組み合わせること
フロントエンドのテスト戦略について考える
こんにちは。株式会社スタメンでFANTSのフロントエンドを担当している@0906kokiです！ 今回の記事では、FANTS におけるフロントエンドのテスト戦略について書きたいと思います。 🙋🏻♂️ はじめに みなさんはフロントエンドのテストを書いていますでしょうか？ 私が所属しているチームでは、今まで全体的なテスト指針が明文化されていなかったので、機能によってテストが書かれたり書かれなかったり、テストを書くにしても個人によって書く粒度にバラツキがありました。 直近でフロントエンドを書く人が増えていく / プロダクトがスケールしていくにつれて、そうしたバラツキによって生まれるコミュニケーションコストが大きくなってきたり、システム的な安全性を継続的に担保していくことが難しくなっていくように感じました。そのため、今まで方針を定めていなかったテスト戦略を、これから事業やプロダクト、チームがス
イベントループと TypeScript の型から理解する非同期処理
この本は、ブルーベリー本の 8 章からインスパイアされて、 TS の型が示す情報から Promise というものを理解してみる、というアプローチで書いたJSの非同期処理の解説です。 これらの資料と合わせて読むことを推奨します。 JSのイベントループのイメージを掴む JSでは中々意識することが少ないですが、正しく理解するには OS レベルのスレッドの視点で考え始める必要があります。 ブラウザや Node.js では一つのスクリプト実行単位を1つのスレッドに割り当てます。それをメインスレッドと呼んだり、ブラウザだったら UI スレッドと呼んだりします。 例えばブラウザでは、これは秒間60回、つまり 16.6ms ごとにループを呼び出します。(node だったらこれがもっと短いです) 仮に setTimeout の実装がなかったとして、それ相当の擬似コードを書くのを試みます。 let handl
Gitを使ってやらかした時、git reflogさえ使えればわりかしなんとかなる - Qiita
これは何 新人プログラマ応援イベントの参加記事です。 gitにはreflogというコマンドがあります。このコマンドを学んでおくとやらかしちゃった時も大体なんとかなるので記事にします。 git reflogってなに？ git reflogとは、Gitで操作履歴を見ることができるコマンドです。 例えば branch1にチェックアウト branch1でbranch1.txtを作成し、コミットを作る masterにチェックアウト をすると、以下のようなreflogになります。 $ git reflog 4a4125a (HEAD -> master) HEAD@{0}: checkout: moving from branch1 to master 826a9dc (branch1) HEAD@{1}: commit: Create branch1.txt 4a4125a (HEAD -> mas
Web3アプリを作ったまとめ
Student FacuetというDapp(Web3アプリ)を作成したら結構人気が出たので、技術面から運用面までを軽くまとめました。わかりやすくするために多少語弊がある表現ある場合がありますが、ご了承ください。 Githubリポジトリ: https://github.com/inaridiy/AStar-Student-Faucet 自己紹介 Crypto Age所属のinaridiyというものです。 Web歴は2年、Web3歴は3ヶ月の高校2年生です。普段はハッカソンに出たり、個人開発をしています。 Faucetとは 現状、ブロックチェーン間で資産を移動させたい場合、移動元のガス代と移動先のガス代がかかります。つまり、資産を動かす前に移動したいチェーンの通貨が必要になります。 これはかなりUXを損なう行為ですし、仮想通貨取引所を開設できない未成年などは、そもそも資産を移動することができな
「流出する」ことを前提とした情報漏えい対策 ファイル暗号化ソリューションとは？
「流出する」ことを前提とした情報漏えい対策 ファイル暗号化ソリューションとは？：IT導入完全ガイド（1/3 ページ） 相次ぐ情報漏えい。強固なセキュリティ対策を施しても、小さな抜け穴から大きな被害につながるケースが増加中だ。そこで情報が流出したとしても“データの中身”を守るファイル暗号化ソリューションについて考える。 2015年5月、日本年金機構において大規模な情報漏えいが発生した。注目したいのは「流出」のいきさつだ。 もともと基幹業務システムのデータベースには特定の端末からしかアクセスできず、端末にはファイルも保存できない仕組みになっていた。しかし、運用担当者がこうした制約をすり抜けて基幹業務システムから取得したファイルを共有ファイルサーバに保存していたため、そこから情報が流出してしまったのだ。どれだけシステムを強固にしていても、システムの外に中間的なファイルが作られてしまうと「セキュリ
CSSの:has()疑似クラスの便利な使い方を徹底解説
先日の記事で:has()疑似クラスがSafariでサポートされ、こんなことができるというのを紹介しましたが、さらに:has()疑似クラスを掘り下げ、Webサイトやアプリでの便利な使い方を紹介します。 :has()疑似クラスは、指定した要素がある場合にのみスタイルを適用できるCSSの新機能で、これからのWeb制作に活躍するかなり便利な機能です。こういう機能を待ち望んでいた人も多いと思います。 たとえば、カードに画像がある場合、ナビゲーションに子メニューがある場合、ラッパーがある場合など、複雑なCSSが必要だったものやJavaScriptが必要だったものが簡単でシンプルなCSSで実装できます。 CSS Parent Selector by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに :has
センスだけに頼らない！ CSSとJSで作るパーティクル表現のテクニック - ICS MEDIA
パーティクルやラインアニメーションなど、ウェブページにちょっと見栄えのする表現を加えてみたくなることはありませんか？ ICS MEDIAのトップページや弊社採用サイトでもこうした表現を実装していますが、思った通りの演出をコードで表現するのはなかなか難しいものです。技術は分かっても「自分にはセンスがないから……」と諦めてしまっている人もいるかもしれません。 この記事では、簡単なパーティクル表現を題材に、効果的なアニメーション表現のためのテクニックを紹介します。サンプルコードはブラウザー標準のWeb Animations APIを使用して実装していますが、CSSアニメーションやGSAP等のライブラリを用いても同様の実装は可能です。 基本のパーティクル 例題とする基本のパーティクルを見てみましょう。クリックすると中央の星からパーティクルが放射状に広がるアニメーションが再生されます。 デモを別画面
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Google製のJavaScript教育ツール「Grasshopper」は基礎から学べて初心者に優しい！【どれ使う？プログラミング教育ツール】