- 1. Viteで作ったReact app内の全てのconsole.logを一瞬でdeactivateする方法
- 2. JSでアルゴリズムの勉強
- 3. 計算プロパティ名を理解する
- 4. Amazon Vineがあまりにも使いにくいから拡張機能でカバーした
- 5. Next.js(最新version)でChatGPTのCloneアプリを作成してみた。(Gitで確認できます)
- 6. Brunoを利用してAPIコレクションをファイルで管理
- 7. サイトマップ仕様書をExcelの画面一覧仕様書から自動生成してみた
- 8. 【make it easy】efwのwebアプリのログイン制御&権限制御
- 9. AWS S3に対してデータをアップロードするためのWebページをAWS EC2上に作成する
- 10. 【javascript】createselectbox関数を使ったセレクトボックスの作成方法
- 11. キー入力でアルファベットやコントロールキーが効かなくなった原因はこれだった
- 12. ゲームなどでよく見る「長押しのボタン」のUIをWEBで表現してみた
- 13. メモリ使用量を取得する
- 14. Eslint – .eslintrc の書き方が分からない ( rules とプラグイン単位の設定 )
- 15. Eslint – .eslintrc のファイル形式・拡張子
- 16. Reactでの開発にImmutable.jsを導入したい
- 17. clsxを使ってみる-Reactで使いたい
- 18. イベントの発火を操る3つのインスタンスメソッド
- 19. 【javascript】オリジナルのセレクトボックスを作ろう!createselectbox関数のカスタマイズ方法
- 20. JavaScript基礎学習③ダイアログボックスの表示&条件分岐(if文)
<備忘録>Viteで作ったReact app内の全てのconsole.logを一瞬でdeactivateする方法
## React内のconsole.logをbuild時に一括deactivate
サーバーにアプリを上げる前に、console.logを一括してディアクティヴェート出来る超便利な方法があるんだけど、いつもやり方を忘れるので、備忘録としてログ。1,rollup-plugin-strip をインストール
“`bash
npm install rollup-plugin-strip –save-dev
“`
2、vite.configを編集
“`javascript
import strip from ‘rollup-plugin-strip’;export default {
build: {
rollupOptions: {
plugins: [
strip({
// remove all console.log calls
include: [‘**/*.js’, ‘**/*.jsx’, ‘**/*.ts’, ‘**/*.tsx’], // target specific files
JSでアルゴリズムの勉強
アルゴリズムの学習を改めてしたので学んだことをまとめました。
– [アルゴリズム](#アルゴリズム)
– [操作の実行時間](#操作の実行時間)
– [探索](#探索)
– [線形探索](#線形探索)
– [二分探索](#二分探索)
– [ソート](#ソート)
– [バブルソート](#バブルソート)
– [挿入ソート](#挿入ソート)
– [マージソート](#マージソート)
– [クイックソート](#クイックソート)
– [選択ソート](#選択ソート)
– [データ構造](#データ構造)
– [連結リスト](#連結リスト)
– [スタック](#スタック)
– [キュー](#キュー)
– [ハッシュテーブル](#ハッシュテーブル)
– [二分木](#二分木)
– [幅優先走査](#幅優先走査)
– [深さ優先走査](#深さ優先走査)
– [参考](#参考)# アルゴリズム
アルゴリズムの性能を評価するためには計算量という指標が用いられる
計算プロパティ名を理解する
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Object_initializer#%E8%A8%88%E7%AE%97%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3%E5%90%8D
括弧 [] の中に式を記述することができ、それが計算されてプロパティ名として使用されます
“`js
// Computed property names (ES2015)
let i = 0;
let a = {
[“foo” + ++i]: i,
[“foo” + ++i]: i,
[“foo” + ++i]: i,
};console.log(a.foo1); // 1
console.log(a.foo2); // 2
console.log(a.foo3); // 3const items = [“A”, “B”, “C”];
const obj = {
[items]: “Hello”,
};
console.log(ob
Amazon Vineがあまりにも使いにくいから拡張機能でカバーした
# はじめに
「[Amazon Vine先取りプログラム](https://www.amazon.co.jp/vine/about?is-secure=true&)」というものがあります。ものすごくざっくりいうと「商品をもらって忌憚のない意見をレビューする」といった感じです。
つい先日そのレビュアーとして登録できたので、ワクワクしながら商品一覧ページを見たのですが・・。# 商品ページが見にくい
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2603116/c0c77990-b79d-b455-b389-a04a8a0e65a5.png)
こちらのページ、検索機能もなければ新しく追加された商品もわかりません。
さらに言えば名前が省略されてしまっているため、検索かけてもひっかかるものと引っかからないものがあります。そして同じような商品がいくつも並ぶこともあります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.a
Next.js(最新version)でChatGPTのCloneアプリを作成してみた。(Gitで確認できます)
# ChatGPTをゼロから作ってみた
#### 作成したアプリの画像
![スクリーンショット 2023-10-09 0.59.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1130166/61ee88b1-3419-c3f3-1285-19e1cc0c8e99.png)
下記でアプリを実際に動かせるのでよかったら確認してみてください。
[ChatGPT-Clone-AppのURL](https://chat-gpt-clone-app-psi.vercel.app/)プロジェクトはGitで管理してますので、クローンして使ってみてください。
[chat-gpt-clone-appのGithubリポジトリのURL](https://github.com/kouhei-github/chat-gpt-clone-app.git)## 自己紹介
お久しぶりの投稿です。本業と個人の仕事で忙しく1年振りの投稿になります。
株式会社DYMのエンジニアをしております、永松です。
普段はインフラはAWS
Brunoを利用してAPIコレクションをファイルで管理
– API開発においてPostmanのようなテストやドキュメントに便利なクライアントツールを日々利用しています。
– 今回はそれらの中から[Bruno](https://www.usebruno.com/)という最近リリースされたAPIクライアントツールを利用した記録をします。## 概要
– オープンソースのAPIクライアントツール。
– コレクションをファイルシステム上にテキストで管理するため、バージョン管理システム(Git等)を用いることが可能。
– [Bru](https://www.usebruno.com/bru)というシンプルなマークアップ言語を利用。## 環境
– 今回Brunoを試すにあたって利用した環境は以下です。
– Mac OS 13.4.1
– deno 1.37.1
– Bruno 0.21.0## 手順
### サンプルAPI作成
– Brunoを利用するにあたり、対象となるAPIが必要です。
– 今回は[Deno](https://deno.com/)を利用して以下のようなGETとPOSTのみの簡単な「**TODO A
サイトマップ仕様書をExcelの画面一覧仕様書から自動生成してみた
## はじめに
皆さんおはこんばんわ。
サイトマップ(画面遷移図)書いてますか?サイトマップは、サイトの全体像をサクッと確認できる有能な資料ですが、初回作成やメンテナンスが割りと大変で重労働感が強いのが難点ですよね。
今回は、このサイトマップをExcelの画面一覧仕様書から自動生成するサンプルコードを作成しましたので紹介したいと思います。
## つくったもの
以下、Excel 仕様書を読み込んで、サイトマップを出力するツールです。
– 画面一覧Excel
スクリーンショットはスプレッドシートですが、Excelです。
(サイトはツールのサンプルとして作成した、実在しない架空のECサイトです)![excel.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136165/011be6a8-78e2-d297-1375-57a1089e9e96.png)
– サイトマップ
左側にサイトマップ、右側に現在選択中のページの情報が表示されます。![sitemap.png](https://qii
【make it easy】efwのwebアプリのログイン制御&権限制御
# はじまり
webアプリに、ログイン有無とユーザ権限で画面操作可否を制御するのはよくあります。社内のwebアプリの場合、ユーザはよい人ばかりですから、制御の厳密さにあまり気にしなくてよいですが、社外向けあるいはインタネット向けの場合、気を付けたほうがいいです。権限なしのweb画面をURL欄で直接打ち込むこと、または権限なしのイベントをデベロッパーツールで直接呼び出すことなど、軽いハッキングのリスクはインタネットにいつも存在しています。efwは、プロパティ設定の方式で、上記リスクを防ぐこと実現しております。今回の記事をこれを紹介させていただきます。
# スケールトンサンプル
スケールトンサンプルは、ログイン画面・メニュー画面・マスタ管理画面で構成します。マスタ管理画面は、ログインユーザの権限により操作可否を制御したいです。## 画面イメージ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3476221/8c4522a5-6725-3670-8b16-3235f4986dc2.p
AWS S3に対してデータをアップロードするためのWebページをAWS EC2上に作成する
こんにちは。
株式会社クラスアクト インフラストラクチャ事業部の大塚です。
今回はAWS EC2とかS3、IAMで少し遊んでみます。# 環境
今回用意した環境は以下となります。
EC2を使ってAmazon Linux 2023ベースのVMを起動。そこにDockerをインストールしてhttpdコンテナをデプロイ。さらにAWS側でS3バケットとEC2にアタッチする用のIAMロールを作成します。
環境を作ったあとはIAMロールの効力でEC2からaws s3コマンドでS3にデータ送信はできるが、Webブラウジング経由では(≒HTML/CSS/JavaScript経由では)アップロードが出来ないことを確認。
その後HTML経由でもアップロードが出来るようにするためにHTMLファイル内にクレデンシャルをハードコピーしてみて挙動の変化を見ていきます。
※ハードコピーはセキュリティの観点から基本的にダメです。AWS Systems Manager Parameter Storeでこれを回避するかCognitoあたりを使えばハードコピーの問題は回避できそうですが、、、どうなんでしょう。。。近いうちに
【javascript】createselectbox関数を使ったセレクトボックスの作成方法
## 【javascript】createselectbox関数を使ったセレクトボックスの作成方法
こんにちは。今回は、javascriptについて初心者エンジニアに向けて、createselectbox関数を使ったセレクトボックスの作成方法について解説します。
セレクトボックスは、ユーザーが選択肢から1つを選ぶことができるui要素であり、ウェブサイトやアプリケーションでよく利用されます。javascriptを使ってセレクトボックスを作成すると、より柔軟な操作や動的な選択肢の生成が可能になります。
この記事では、createselectbox関数の基本的な使い方から応用テクニックまでを解説します。セレクトボックスの選択肢を動的に生成したり、デフォルト値を設定したり、イベントリスナーを活用した操作方法など、幅広い情報を提供します。
それでは、早速見ていきましょう。
## createselectbox関数の基本的な使い方と構文
### createselectbox関数とは
createselectbox関数は、javascriptでセレクトボックスを作成するための関数です。
キー入力でアルファベットやコントロールキーが効かなくなった原因はこれだった
# はじめに
プログラミングをしていて、それまでは、動作していたが、ある時から動作しなくなったということはよくあります。そのあるときがいつだったのか、何をしたからかが、その不具合に気が付いたときにはわかりません。大抵はしばらくたってから気が付きます。そこから、不具合の原因を探し続けることになります。直接の原因が何なのか、まったく見当がつきません。今回の例をもとに、ご説明いたします。# 現象と原因
どんな現象が起こったのかと言いますと、テキスト入力画面で、文字入力をするのですが、ひらがなは何とか入力できますが、そのほかのキーが効きません。例えば、バックスペース、デリートキー、数値キー、アルファベットキーなどです。ある時点までは何事もなく入力できていました。そのため、いくつかのチェックをしてみました。#### (1) かな漢字変換ツールがおかしくなったのか
試しに、他のページで試してみました。例えば、yahoo!Japanの検索入力で、文字入力してみましたが、問題はありません。その他のページのも文字入力も問題はありません。かな漢字変換ツールは正常に動作しています。
#### (2)
ゲームなどでよく見る「長押しのボタン」のUIをWEBで表現してみた
# はじめに
スマホゲームやSwitchなどのゲームのUIでよく見る、「**長押しボタン**」をWEB画面で実装します。
使う技術としては、**HTML**、**CSS**、**JavaScript**だけで、JavaScriptのライブラリや画像やSVGは使いません。
長押しボタンと言ってもイメージが付かないと思いますので、完成系のGifを用意しました。なぜか、WEBではあまり見かけないUIですよね…
![Animation.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/473097/220370b8-de93-7db0-9db2-3d7edfe2c098.gif)
# 実装
## 1. メータ部分の作成
まずは、メータ部分を作成するのですが、`divタグ`を使って円を作成します。
`background-image`に`conic-gradient`を指定して、円グラフのような見た目ができるスタイルを使っています。“`html:html
関連する記事
OTHERカテゴリの最新記事
-
- 2024.09.19
JavaScript関連のことを調べてみた
-
- 2024.09.19
JAVA関連のことを調べてみた
-
- 2024.09.19
iOS関連のことを調べてみた
-
- 2024.09.19
Rails関連のことを調べてみた
-
- 2024.09.19
Lambda関連のことを調べてみた
-
- 2024.09.19
Python関連のことを調べてみた