- 1. コミット前にテストを実行しよう ~husky ver7~
- 2. Chrome Extensions をMV3に移行しなくちゃ、ね。
- 3. 【メモ】Visual Studio CodeでのJavaScriptのデバッグ
- 4. 協調性のない非同期処理（async/await）
- 5. スーパーキラキラカラフルクッキリディスプレイも最初と最後の文字さえあっていれば読める説
- 6. 初学者がReactの開発環境を整える
- 7. 勉強記録 3日目
- 8. 日本の旅客鉄道の変遷をMapbox GL JSで表示してみました
- 9. Redux ToolitのRTK Queryについて
- 10. 非同期いいね
- 11. React: useRefで参照したinputから同じformのsubmitボタンを辿る
- 12. 【Leaflet.js】住所から緯度経度を取得しその地点にピンを立てる
- 13. BotUIを使ってチャットボットを開発してみた
- 14. 初心者のための静的サイト・ジェネレーター・ガイド③
- 15. プログラミング初心者が⭕️❌ゲームを作ってみた。
- 16. deno.json（Deno設定ファイル）の書き方
- 17. 【Rails】Data Confirm Modal – backdrop
- 18. GraphQL + Sequelize でテーブル定義やクエリの実装などをちょっとだけ簡略化する方法
- 19. 【個人開発】タイピングゲーム「じゅげ〜む」を作ってみた
- 20. 【Javascript】 (小技) CSS Selectorで最初に見つけた1件以下を処理するワンライナー。
コミット前にテストを実行しよう ~husky ver7~
# はじめに
コミットする前にテストを実行させるための設定をします。[husky](https://www.npmjs.com/package/husky)を使うことで簡単に設定ができます。huskyは、ver4から6に上がった際に仕様が大きく変わっているため、改めてインストール手順をまとました。* [huskyのドキュメント](https://typicode.github.io/husky/#/?id=automatic-recommended)
## 開発環境
* husky : 7.0.2
* node : v14.17.6## インストール
* jestのコマンドの設定とjestはインストール済みです。[jestのインストール方法](https://qiita.com/YSasago/items/6f23055c971a091f9993)
まずはnpmを使ってhuskyをインストールします。
“`sh
$ npm install –save-dev husky
“`package.jsonのscriptsにprepareコマンドを追加します。
Chrome Extensions をMV3に移行しなくちゃ、ね。
# はじめに
####MV3で何が変わるの、か？Chromeオフィシャルサイトによると大まかには以下が変更点という、ことらしい。
> 機能の概要
https://developer.chrome.com/docs/extensions/mv3/intro/mv3-overview/#feature-summary
+ サービスワーカーによるバックグラウンドページの置き換え。
+ ネットワークリクエストの変更は、declarativeNetRequestAPIで処理される。
+ リモートでホストされたコードは許可されず、パッケージに含まれているJavaScriptのみを実行可能。
+ 多くのメソッドにPromiseのサポートを追加。えーっと、、とりあえずわかったふりをしつつ、、。
# やってみよう
今回MV3に移行するExtensionsでは、バックグラウンド処理としてはコンテキストメニューのみ。ただ、formをDOM生成してPOST送信している。だが、DOMは扱えない、んだ。
####どうするのか？
> 解決策としては2つ。1. 個人情報は扱ってなく
【メモ】Visual Studio CodeでのJavaScriptのデバッグ
# 毎度忘れるのでメモ
1. 事前に拡張機能の[Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)をインストールする。
1. index.htmlとscript.jsのHTML/JavaScriptのニコイチを用意する。
1.
1. script.jsのコードのどこかにF9でブレークポイントを設置
1. index.htmlをF5でデバッグする
1. launch.jsonが起動するので、以下のように設定する。“`json
{
“version”: “0.2.0”,
“configurations”: [
{
“type”: “chrome”,
“request”: “launch”,
“name”: “Launch Chrome Local Debug”,
“url”: “http://localhost:5500/index
協調性のない非同期処理（async/await）
以前に[非同期処理を会社組織に例えて説明する。](https://qiita.com/Reddest/items/6787a12d93a1edf30ca1)の記事を書きましたが
今回はpromiseを意識せずにasync/awaitについて書いてみたいと思います。
***どこの社会にもいますね。
協調性がなく、自分の事だけを黙々とやる人。事務仕事に例えると、コピー機を占有したまま、待っている人の事を考えないとか。
非同期処理とは、そういう人の事です。
（仮に社員Aとしておきましょう）
では、なぜこのAが会社にとって必要なのか？遠い場所にある荷物をとってきてくれるからなのです。
（たまに失敗もしますが）それでは、後の人が困ってしまう？
でもAが荷物を取ってこない事には、その部署の仕事が回らないのである。じゃあ、どうしよう？
「Aは荷物を取ってきたか？失敗したかどうか？必ず報告をする」
（失敗を許さない日本社会を考えたらダメです）そこで、その部署自体をAを中心に考えたのです。
これがasync（非同期）です。そしてAの仕事にawait（待つよ！）をつけてやる
スーパーキラキラカラフルクッキリディスプレイも最初と最後の文字さえあっていれば読める説
みなさんはタイポグリセミア(Typoglycemia)というものをご存知でしょうか？
wikiからの引用ですが
> 文章中のいくつかの単語で最初と最後の文字以外の順番が入れ替わっても正しく読めてしまう現象である
https://ja.wikipedia.org/wiki/%E3%82%BF%E3%82%A4%E3%83%9D%E3%82%B0%E3%83%AA%E3%82%BB%E3%83%9F%E3%82%A2
今まさに新作のiPhoneが発表され、「スーパーキラキラカラフルクッキリディスプレイ」という謎の単語がtwitter上で話題になりました。
それをみて**「最初と最後の文字以外の順番が入れ替わっても正しく読めてしまうんじゃね？」**と思い、検証プログラムを書いてみました。
とにかくすぐに確認したかったのでjsで書きました
“`javascript
(str => str.slice(0, 1) + str.slice(1, -1).split(”).sort(() => Math.random() – 0.5).join(”) + str.slice(-
初学者がReactの開発環境を整える
# はじめに
JavaScriptでWebアプリ開発する際のフレームワーク__React__を勉強し始めたので忘れないように記録する。
今回はReactでWeb上で`Hello World!`と表示させる手順ついて記録する。
間違っているところがありましたらご指摘していただけると幸いです。# 事前準備
[React公式サイト][link-1]
[link-1]:(https://ja.reactjs.org/)## Chromeの拡張機能
Chromeでreact developer toolsと調べるか下記のURLから拡張機能を追加しておく。
[React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=ja)
さらにReact Developer Toolsの拡張機能の設定で`ファイルの URL へのアクセスを許可する`をONにする必要がある。
とは配列と関数を使って新しい配列を作るときに使う。
const 新配列名 = 元配列名.map((変数名を自由に決める) => { return 関数});“`javascript
{
const prices = [180, 190, 200];//省略前
const updatedPrices = prices.map((price) => {
return price + 20;});//省略後
const updatedPrices = prices.map(price => price + 20);
console.log(updatedPrices);
}
“`
ポイント！ いろいろな省略。
・アロー関数の場合、引数が一つなら変数の周りの()省略可
・式の場合は{}とreturn省略可
注意。省略しすぎて自分がわからなくなるとよくないため、省略はほどほどに。ーーーーーーーーーーーーーーーーーーーーーーーーーーー
日本の旅客鉄道の変遷をMapbox GL JSで表示してみました
# はじめに
国土数値情報の[鉄道時系列データ](https://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-N05-v1_3.html)を用いて、日本の旅客鉄道の変遷（1950～2020年）をMapbox GL JS（v2）の[タイムスライダー機能](https://docs.mapbox.com/jp/mapbox-gl-js/example/timeline-animation/)で表示してみました。
– [鉄道時系列データ](https://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-N05-v1_3.html)は以下の国土数値情報の提供サイトよりgeojsonファイル（令和2年）をダウンロードして使用しています。
https://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-N05-v1_3.html– 背景地図には[Mapbox](https://www.mapbox.com/)を使用しているため、別途、Mapboxにてアクセストークンの取得及
Redux ToolitのRTK Queryについて
RTK Queryおもしろそうなので調べてみたり触ってみたりした。
どちらかというと雰囲気を伝えることを目的とした記事で、勘違いしている可能性もあるかもしれないので(つっこんでほしい)
詳細については[公式](https://redux-toolkit.js.org/rtk-query/overview)を読んでください。## 対象
* Reactを使ってるひと
* Reactでのデータ取得のキャッシュの扱いとか管理がしんどいなってひと
* **Reduxは分からなくてもOK**## RTK Query is 何？
[Redux Toolkit](https://redux-toolkit.js.org/)のチームが作ったデータ取得とキャッシングのためのツール。
データを取得するのが楽になる。キャッシュのロジックを手書きする必要がなくなる。最近のReactコミュニティでは「データの取得とキャッシュ」は「状態管理」を別のものとして管理したいという需要があった。
→ RTK Queryは「データの取得とキャッシュ」に特化したツール。(Reduxは「状態管理」に特化したツール)
非同期いいね
“`osotmy.rb
class Ostomy < ApplicationRecord has_many :favorites, dependent: :destroy def favorited_by?(staff) favorites.where(staff_id: staff.id).exists? end ``` ```fovorite.rb class Favorite < ApplicationRecord belongs_to :staff belongs_to :ostomy end ``` ```staff.rb class Staff < ApplicationRecord has_many :favorites end ``` ```ruby:fovorite.contoroller class Staff::FavoritesController < ApplicationController #医療staffが患者さん記録にいいねつける before_action :authenticate_staff! def cr
React: useRefで参照したinputから同じformのsubmitボタンを辿る
ReactでuseRefで参照したinputから同じformのsubmitボタンを辿って別コンポーネントからsubmitボタンをクリックするメモ
——formのref(例えばformRefという名前）を渡して、formRef.submit()すると、ページ更新されてしまうのでsubmitボタンをクリックすることにした。なにかいい方法がある気はするが、とりあえず回避策——
ComponentBからComponentAのformをSubmitする。但し渡すのはinputのrefとする。つまり、ComponentBからinputに値をセットしてからSubmitしたい。
“form” と Element ID で辿れる。
“`react:ComponentA
export default function ComponentA(props) {
const inputTextRef = useRef()const onSubmit = (e) => {
e.preventDefault()
…何かの処理…
}return (
<
【Leaflet.js】住所から緯度経度を取得しその地点にピンを立てる
Leaflet.js はシンプルで拡張性の高いオープンソースの地図描画ライブラリです。
今回は Leaflet 地図に住所検索機能を追加してみたいと思います。# 作りたいもの
– 入力された住所から緯度経度を求める
– 目的地点に地図の中心を移動
– その地点にピンを立てて情報を表示
– こんな感じのイメージ ↓
# Leaflet 地図を準備
## ファイル構成
“`terminal
.
├── index.html
└── main.js
“`### index.html
– leaflet.css と leaflet.js の読み込み順序に注意
– 地図を描画する div 要素に対して width 属性を
BotUIを使ってチャットボットを開発してみた
## はじめに
はじめまして！ t_powerです。
本記事では、社内FAQを[BotUI](https://docs.botui.org/)でチャットボット化した話を扱います。プログラミング知識があまりない・・・
チャットボットを作ってみたいけど難しそう・・・
と思っている人にはぴったりのツールだと思うので、是非ご覧ください！今回作成する上で下記のサイトを参考にさせていただきました。
この記事を見て実際に作ろうと思っている方はこちらも参考にしてください。
1. [JavaScriptだけで本格的なチャットボットを開発できるライブラリ「BotUI」を使ってみた！](https://paiza.hatenablog.com/entry/2017/09/21/%EF%BB%BFJavaScript%E3%81%A0%E3%81%91%E3%81%A7%E6%9C%AC%E6%A0%BC%E7%9A%84%E3%81%AA%E3%83%81%E3%83%A3%E3%83%83%E3%83%88%E3%83%9C%E3%83%83%E3%83%88%E3%82%92%E9%96%8B
初心者のための静的サイト・ジェネレーター・ガイド③
初心者のための静的サイト・ジェネレーター・ガイド②の続きです。
②を読んでいない方はそちらから読むことをおすすめします:point_up:
著者：Thom Krupa@thomkrupa 2020年11月18日
原文：https://bejamas.io/blog/static-site-generators/##6. Nuxt
最終更新日：2020年10月24日eコマースサイトの実験として始まったこのプロジェクトは、生産性の高いVueアプリケーションのための高レベルのフレームワークとなりました。このプロトタイプは、Next.jsの最初の公式リリースから数週間後に一般公開されました。Nuxtは、NextがReactに対して行っているのと同じように、Vue用のアプリを構築する際の多くの問題を解決するために作られました。今日では、エンドユー
プログラミング初心者が⭕️❌ゲームを作ってみた。
##はじめに
初めまして、こんにちは！
私は現在32歳で未経験からエンジニアへの転職を目指して学習しています。トレーニングとしてJavaScriptを使い、⭕️❌ゲームを作成し勝敗判定ができるコードを書いてみました。
その過程を記事にまとめていきます。
##要件定義
今回はJavaScriptを中心に書き、HTMLとCSSでは簡単な枠組みを用意します。・ブラウザを開くと、５X5のマスが表示される。
・いずれかのマスをクリックすると、初めに⭕️、次に❌と交互に反映される。
・縦横斜めの何かで一列揃うと勝敗が判定され、アラートが表示されるこの内容を実現できる内容を目指します。
##実装
###1 レイアウト
初めにマスを用意します。
今回は5x５のマスを用意します。“`HTML
deno.json（Deno設定ファイル）の書き方
2021年9月14日リリースのv1.14で、deno.json（Denoの設定ファイル）が導入されした。
この記事では、設定ファイルの書き方について解説します。## なぜdeno.jsonが導入されたか
元々、DenoにはCargo.toml(Rust)やpackage.json(Node.js)のような設定ファイルが存在しませんでした。
しかし、– 権限指定用のコマンドラインフラグ(`–allow-xxx`など)が増えた
– 既にコマンドラインフラグで指定できるファイルが存在している（`import-map`と`tsconfig`）
– deno fmtやdeno lintに対する細かい設定を可能にして欲しいという要望が出ていたという理由から、設定ファイルが導入されることになりました。
## deno.jsonの特徴
Node.jsにおけるpackage.jsonの反省を踏まえた設計になっています。
– ブラウザと同様、deno.jsonが無くても動作する（あくまでオプションという扱い）
– ファイル中にコメントを書く場合は、拡張子をjsoncにする必要がある【Rails】Data Confirm Modal – backdrop
# backdrop とは
直訳すると劇場幕のことで、Webではモーダルを開いたときの背景の黒いところのことを言います。
# backdropをクリックしてもモーダルが非表示にならない方法
“`javascript
dataConfirmModal.confirm({
title: ‘Are you sure?’,
text: ‘Really do this?’,
commit: ‘Yes do it’,
cancel: ‘Not really’,
zIindex: 10099,
onConfirm: function() { alert(‘confirmed’) },
onCancel: function() { alert(‘cancelled’) },
onHide: function()GraphQL + Sequelize でテーブル定義やクエリの実装などをちょっとだけ簡略化する方法
## はじめに
業務でGraphQLを使うことになったんですが、GraphQLのモジュール宣言って面倒くさいですよね。
こういうの。“`javascript:server/modules.js
const typeDefs = gql`
type User {
id: Int!
name: String!
email: String!
recipes: [Recipe!]!
}type Recipe {
id: Int!
title: String!
ingredients: String!
direction: String!
user: User!
}type Query {
user(id: Int!): User
allRecipes: [Recipe!]!
recipe(id: Int!): Recipe
}type Mutation {
createUser(name: String!, email: String!, pa【個人開発】タイピングゲーム「じゅげ〜む」を作ってみた
# はじめに
Vue.jsの勉強をかねて、タイピングゲームを作ってみました。
制作期間は5日。
意外と時間をかけてしまいました。[https://flamboyant-beaver-eb2250.netlify.app](https://flamboyant-beaver-eb2250.netlify.app/)
[](https://gyazo.com/014144e13b57dcd8e59787fd0a75e9ca)
# 使用技術
フレームワーク：Vue.js
UIフレームワーク：Vuetify
ライブラリ：vue-confetti# デプロイ
netlify# 作ってみての感想
コンポーネントについての理解の甘さを実感し、次はコンポーネントをしっかりと活用したアプリケーションを作成してみたいと思います。
デザインがちょっと物足りなさがあるので、今後バージョンアップするかもしれません。# おわりに
暇な時間のお【Javascript】 (小技) CSS Selectorで最初に見つけた1件以下を処理するワンライナー。
# 「先っぽだけだから！」
一番信用のないセリフNo.1# 思い立ち
あるサイト用に、最初に見つけた画像を開く “bookmerklet“ を作成しようと考えていた。
基本 “ワンライナー“ は嫌いだが、“bookmerklet“ となると少々事情が異なる。今回は “新しく開く“ 動作を行うため、何度も実行されてしまうと、よもやセルフな “ブラクラ“ になるのでなんとか避けたい。
そんな訳で ~~butter~~ **better** ~~の~~ **な** ~~犬~~ **解** を模索してみた。
# 思案
## ① querySelectorAll + forEach
“`javascript:
document.querySelectorAll(‘img[src]’).forEach((img) => window.open(img.src));
“`
(‘A｀).｡oO (1回ででええねんで…)## ② Optional Chaining
“`javascript:
window.open(document.querySelectoOTHERカテゴリの最新記事
- 2024.09.19
JavaScript関連のことを調べてみた
- 2024.09.19
JAVA関連のことを調べてみた
- 2024.09.19
iOS関連のことを調べてみた
- 2024.09.19
Rails関連のことを調べてみた
- 2024.09.19
Lambda関連のことを調べてみた
- 2024.09.19
Python関連のことを調べてみた