- 1. Step Functionsを使ったECSコンテナの制御
- 2. 【Rails】【JavaScript】RailsでJavaScriptを利用する方法について
- 3. ビット否定を使用した加算・減算【JS】
- 4. [paiza]足し算するだけの簡単なお仕事
- 5. [paiza]文字列をつなげるだけの簡単なお仕事
- 6. 【html】 任意のカラーコードを一番近いパステルカラーのカラーコードに変換する html を公開してみる。
- 7. LINEで送るボタンが良くわからない
- 8. 【JavaScriptのお勉強】関数を初めて使う。サイコロをふってみよう！
- 9. iframeでhtmlページを表示する場合のオリジンチェック
- 10. Electron+Vue3でマルチウィンドウを理解したい
- 11. Google Apps ScriptでLINEボットを作成中、postbackがエラーになるときの対処法
- 12. 【野球好き必見】Teachable Machineを使ってあなたの球団顔の球場飯を紹介します！
- 13. 【JavaScript Primer学習メモ】const、let、varそれぞれの方法で宣言した変数の違い
- 14. 学習管理アプリ作成の所感とReact開発において意識するべきこと
- 15. ＃12 【入門】Javadocまとめ
- 16. #10 【Chrome用】Google Chatの改行設定を変更してみた
- 17. #01 marked.js + highlight.js でMarkdownをきれいにHTMLに変換
- 18. 実装から学ぶ useMemo
- 19. SvelteでWeb Componentsを作ろう
- 20. 【JavaScript】ダークモードの判定
Step Functionsを使ったECSコンテナの制御
# はじめに
この記事では、AWS Step Functionsを使用してECSコンテナを開始し、10秒後に自動的に停止させるプロセスを解説します。このプロジェクトには、IAM、ECR、CloudTrail、EventBridge、Step Functions、Lambdaなどの主要なAWSサービスを利用します。作成したレポジトリーはこちらです。
https://github.com/sugiyama404/practice_step_function
こちらの記事を参考にしました。
https://dev.classmethod.jp/articles/step-functions-workflow-studio-create-workflow-to-stop-ec2/
# 目的
このプロジェクトの目的は、AWS Step Functionsを用いて、ECSコンテナのライフサイクルを効率的に管理し、自動化することです。特に、コンテナを起動してから10秒後に自動で停止させることで、リソースの効率的な使用と運用の簡素化を図ります。# 機能一覧
+ **ECSコンテナの
【Rails】【JavaScript】RailsでJavaScriptを利用する方法について
Rails初学者の学習内容の備忘録です。
間違いや補足等あればご指摘いただけると幸いです。学習を進めている中で「importmap?webpacker?なにが違うんや…」となったので、今回はRailsでJavaScriptを利用する方法についてまとめました。
# RailsでJavaScriptを利用する主な方法
**1.Sprockets**
・主にRails6以前に利用されていた。
・JavaScriptファイルはapp/assets/javascriptsディレクトリに置かれる。
“`application.js
//= require rails-ujs
//= require_tree
“`**2.Webpacker**
・Rails6より導入され、JavaScriptをモジュールとして管理するために使われる。
・app/javascript/packsディレクトリにJavaScriptファイルを置かれる。
“`application.js
import Rails from “@rails/ujs”
Rails.start()
“`**3.imp
ビット否定を使用した加算・減算【JS】
# はじめに
ビット否定演算子`~`を使用した加算・減算ができるようです。# ビット否定演算子
MDNでは以下のように定義されています。
（日本語版では`Bigint`についての記載が不足しているため、英語版を引用）> The bitwise NOT (~) operator returns a number or BigInt whose binary representation has a 1 in each bit position for which the corresponding bit of the operand is 0, and a 0 otherwise.
:::note
簡単な訳
– ビット否定演算子`~`は、`number` or `Bigint`を返します
– 各bit部分が0のときは1、それ以外では0を返します
:::https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_NOT
## 実例
理解には、実例を見るのが速い
[paiza]足し算するだけの簡単なお仕事
# Dランクをわかりにくく解く
https://paiza.jp/works/mondai/d_rank_skillcheck_sample/addition# 面倒くさいので画面パタメータをListでもらった後のFunctionだけ
ちなみに引数のListを作ってる箇所は[こっちの記事](https://qiita.com/AsilHatake/items/842548e48ae4a0eae119)に書いてあるYO!!“`javascript:add.js
// [問題文（原文）]
// ２つの正の整数 a, b が半角スペース区切りで入力されるので a と b を足した数を出力してください。
// ※「掛け算」の問題では入力が改行区切りで与えられましたが、今回は半角スペース区切りで与えられます。
function add(lines) {
if (!Array.isArray(lines) || lines.length !== 1) {
console.log(“1行入れろや！”);
return;
}
const vals = lines[
[paiza]文字列をつなげるだけの簡単なお仕事
# でぇベテランだけど、Dランク解いてイキりたい
https://paiza.jp/works/mondai/d_rank_skillcheck_archive/email_address
# 面倒くさいので画面パタメータをListでもらった後のFunctionだけ
ちなみに引数のListを作ってる箇所は[こっちの記事](https://qiita.com/AsilHatake/items/842548e48ae4a0eae119)に書いてあるYO!!“`javascript:createMailAddress.js
// [問題文（原文）]
// Eメールアドレスとはローカル部とドメインを「@」を繋いだ文字列で表されます。
// ローカル部を s ,ドメインを t として、それぞれ長さ n の文字列が改行区切りで入力されます。
// 以下の構文に沿った文字列を出力してください。
//
// s(ローカル部)@t(ドメイン)
//
// 例えば
// info
// paiza.jp
// のような入力の場合
// info@paiza.jp
// と出力して下さい。
f
【html】 任意のカラーコードを一番近いパステルカラーのカラーコードに変換する html を公開してみる。
任意のカラーコードを
一番近いパステルカラーのカラーコードに
変換する html ファイルを作成しましたので
皆さんの役に立てばと思い
公開してみます。[本体はこちら(BOOTH)](https://giftedstyle.booth.pm/items/5964791)
[本体はこちら(Google Drive)](https://drive.google.com/file/d/1wThpKNbDpvgIh-k1EyCOhp6s-roi40mC/view?usp=drive_link)***
このアプリケーションの見た目
***
この html ファイルのコード
この html ファイルは
下記のコードで動いています。html ファイルを新規作成して
中身をこの内容にしても動作します。“`html:使用したコード
LINEで送るボタンが良くわからない
閲覧ユーザに、ウェブページを友達にシェアしてもらいたい場合に設置する「LINEで送る」ボタンの話。
## なぜこの記事を書いたか
「LINEで送る」ボタンは過去に何度も実装しているのだが、近日実装しているサイトでシェアされた内容がおかしいという連絡があった。
調査してみると、実行環境によって挙動が微妙に異なり、意図せぬ動作もあったので、まとめておくことにした。## 何がしたいか
ボタンを押すと、LINEに投稿する画面が開き、送信先を選んで投稿すると、以下のようなメッセージが送られてほしい。
シェアしてほしい**URL**と**テキスト**が含まれているのがポイントだ。
### LINE公式ボタンは要件を満たさない
LINEが公式に提供しているコードスニペットを貼り付けることで、「LINEで送る」ボタンをウェブサイ
【JavaScriptのお勉強】関数を初めて使う。サイコロをふってみよう！
# はじめに
JS初心者です。Qiitaも初投稿です。関数の書き方っていろいろあるんですね。
覚えた書き方を4種類記載してみます。***
こんな簡単な画面でサイコロを振るプログラムをつくります。
## アロー関数で定義
“`event.html
サイコロ： ?
`
実装から学ぶ useMemo
# はじめに
ReactHooks の1つである `useMemo()` を理解するため、 React の実装を読んだまとめです。
React の再レンダー時の余計な計算を減らすために useMemo を使うことがありますが、どんな仕組みで動いているのでしょうか。React のバージョンは 19.0.0 です
# コードを読む
まずは ReactHooks から見ていきましょう。
```ReactHooks.js
export function useMemo(
create: () => T,
deps: Array| void | null,
): T {
const dispatcher = resolveDispatcher();
return dispatcher.useMemo(create, deps);
}
````dispatcher` の `useMemo` を呼び出しています。
マウント時には mountMemo が実行されます。```ReactFiberHooks.js
const HooksDispatc
SvelteでWeb Componentsを作ろう
:::note info
viviONグループでは、DLsiteやcomipoなど、二次元コンテンツを世の中に届けるためのサービスを運営しています。
ともに働く仲間を募集していますので、興味のある方は[こちら](#一緒に二次元業界を盛り上げていきませんか)まで。
:::## :writing_hand: Web Componentsって何？
Web Componentsは、再利用可能なカスタム要素を作成するための一連の技術です。
主に「Custom elements」「Shadow DOM」「HTML templates」から成り、それらを組み合わせてカスタム要素を作成します。
これらの技術はW3Cで標準化されており、コンポーネント化されたカスタム要素はライブラリに依存せず利用できます。
## :thumbsup: Web Componentsを利用するメリット
Web Componentsを使う上で、以下のようなメリットがあります。
- ライブラリに依存しない
- Web Componentsはライブラリに依存せず利用できる
- ライブラリの流行り廃りに依存し
【JavaScript】ダークモードの判定
# はじめに
CSSでメディアクエリを用いてダークモードを判別するというのはよく知られた手法ですね。
この記事ではJavaScriptでそれをする方法を紹介します。## この記事の対象者
- ある程度HTML, CSS, JavaScript(要するにWebフロントエンド)の基本的な知識があり、JavaScriptでダークモードを判別したい。
## 前提知識
- JavaScriptの基礎的な文法と仕様を理解している
# 実装
`window`に生えている`matchMedia`を用いることでメディアクエリを評価することができます。この場合はCSSのメディアクエリと同様`prefers-color-scheme`でテーマを判定します。
## ダークモードかどうか判定するだけ
```javascript
function isDarkMode() {
return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
}
```
この`isDarkmode`関
