- 1. *.min.jsより遥かに小さい爆縮js file
- 2. 変数宣言についてメモ
- 3. React｜TechPitの『ゴルフ場検索サービス』を作ってみた
- 4. jQueryプラグインで文字数制限を簡単に実装する方法
- 5. Mermaid記法をパースする方法（ライブラリの紹介）
- 6. 解けたらコラッツ予想を否定できる式
- 7. ReactとVueの違い
- 8. （if文復習）scriptタグの位置でエラーがでた話。
- 9. MariaDBでGeoJsonを扱ってみた
- 10. Lightning Web Componentsでのトースト表示
- 11. 広い海で遊ぶゲーム。
- 12. x-line-signatureの署名検証についての備忘
- 13. Reactで簡単な学習記録アプリを作った
- 14. Azure DevOps ReposでAdvanced Securityを有効にしてcodeScanする
- 15. scrollendイベントをiosでも処理したい
- 16. 【超簡単】GASとGeminiで無料でAIのLINEbotを作成する。
- 17. java script のパワーに惚れた。揺れる水槽の中のパーテクルの動きゲーム。
- 18. Next.js完全ガイド初心者向け。今すぐ試せるコード付き
- 19. はじめてのRuby On Railsチュートリアル
- 20. もうやだ。もう駄目だと感じたときに実行するコード。
*.min.jsより遥かに小さい爆縮js file
minifyだけでは満足できない人向けの企画。今まで散々その手の記事を書いてきましたが、その応用という事になります。
圧縮率も重要ですが展開速度も重視したいところ。自己展開する事になるので復号処理も小型である必要があります。
## 爆縮形態
凄まじい圧力によって一瞬にして潰れてしまったjs fileの形態の1つ。自己展開能力により一瞬にして再生する。
ただし一瞬では潰れ切らずに、二瞬、百瞬と時間がかかりまくる事もざらにある。再生も同様である。そこは爆縮者の腕にかかっている。## 爆縮対象
以下のfileとなります(link先は配布元)。随時追加予定。他にも要望があれば増やしていきます。ついでに元の大きさと爆縮後の大きさも掲載しておきます。
* [angular-1.8.2.min.js](https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js) 177324 -> 64656(36.4%)
* [bootstrap.bundle-5.3.0.min.js](https://cdn.jsdelivr.n
変数宣言についてメモ
JSでは変数宣言には以下の3つがある
– var
– let
– const## var
`var`は再宣言・再代入が可能な変数宣言。
3つの中で一番緩い。“` js
var a = “a”;
a = “b”; // ok
var a = “c”; // ok
“`あと、ホイスティングされる。
“` js
console.log(x); // undefined
var x = 10;
“`
上記コードのように、宣言が先に巻き上げられる（実行される）。
初期化がされるわけではないので、undefinedにはなる。## let
`let`は再宣言は不可能、再代入は可能な変数宣言。
“` js
let a = “a”;
a = “b”; // ok
let a = “c”; // NG
“`宣言前にその変数にアクセスしようとするとエラーになる。
“` js
console.log(x); // ReferenceError: x is not defined
let x = 10;
“`## const
`const`は再宣言も再代入もで
React｜TechPitの『ゴルフ場検索サービス』を作ってみた
エンジニアのみなさま、日々の学習本当にお疲れ様です！
また本記事まで足を運んでいただき本当に感謝です。
約2分程度で読めるので最後まで読んでもらえると幸いです。# こんな人におすすめ
– React × TypeScriptを使ってみたい方
– サーバーレスでの開発に興味がある方
– AWSのサービスを使ってみたい方
– 外部APIを使ってみたい方# サイトURL
https://www.techpit.jp/courses/15
めちゃくちゃ勉強になりました。ありがとうございました！！！
# TechPitとは
https://www.techpit.jp/
# アーキテクチャ
※ https://www.techpit.jp/courses/15/curriculums/
jQueryプラグインで文字数制限を簡単に実装する方法
ウェブ開発において、ユーザーが入力する文字数を制限することはよくある要件です。特に、コメントフォームや問い合わせフォームなどで、入力内容が長すぎる場合に送信を制御したい場合があります。今回は、jQueryを使って、文字数制限と送信ボタンの制御を簡単に行うプラグインを作成する方法を紹介します。
# 1. jQueryプラグインとは？
jQueryプラグインとは、jQueryライブラリを拡張して、新しい機能を追加するためのスクリプトです。これにより、複数の要素に同じ機能を簡単に適用することができます。今回は、文字数制限を簡単に管理できるプラグインを作成します。# 2. プラグインの作成
まず、以下のような `maxLengthChecker` という名前のプラグインを作成します。このプラグインは、テキストエリアに文字数制限を設定し、文字数が制限を超えた場合に警告を表示し、送信ボタンを無効化します。“`javascript
(function($) {
$.fn.maxLengthChecker = function(options) {
const se
Mermaid記法をパースする方法（ライブラリの紹介）
## 概要
FlowChartなどをテキストで書けるようにするMermaid記法のparserは公式で提供されていない．[@excalidraw/mermaid-to-excalidraw](https://github.com/excalidraw/mermaid-to-excalidraw)というnpmのライブラリを使用することで，dictionary形式でノードとエッジの配置データを取得できる．excalidrawは手書き風の図を作成するツールであり，jsライブラリが提供されている．mermaid-to-excalidrawはexcalidrawのAPIと一緒に使うことが想定されたライブラリである．想定された使い方ではないかもしれないが，excalidraw形式のdictionaryデータには図形の種類，位置，サイズなどの情報が含まれているのでMermaidパーサーとして使用することが可能である．例えばMermaid記法で入力すると図形を配置してくれるExcelプラグインなどが考えられる．
## 使い方
– npm経由でライブラリをインストールする
“`sh
解けたらコラッツ予想を否定できる式
## はじめに
コラッツの問題(コラッツ予想)に関心のある方もそうでもない方も初めまして。
コラッツの問題について詳しくはWikipediaの[コラッツの問題](https://ja.wikipedia.org/wiki/%E3%82%B3%E3%83%A9%E3%83%83%E3%83%84%E3%81%AE%E5%95%8F%E9%A1%8C) などを読んでいただければと思います。
簡単に言うと、
「すべての正の整数は、偶数なら2で割り、奇数なら3倍して1を足す、を繰り返すと1を含むループに収束する」
が正しいか否か、という未解決の問題です。「1を含まないループになる値」「1に収束せず無限に増え続ける値」のどちらかを見つければこの予想を否定できます。
今回は「解けたらコラッツ予想を否定できる式」と題しましたが、
正確に言うと「整数解で割り切れればループする値が得られる式」を立てたので、それを紹介していきます。## 操作の言い換え
まず今回の式の元となる、コラッツの操作の言い換えを行います。
**すべての正の奇数は、
(手順1) $1$を足すと偶数になるので、
ReactとVueの違い
## Reactの特徴
Reactは、Meta社（旧Facebook社）が開発したJavaScriptのライブラリで、Webアプリケーションにおけるユーザーインターフェース（UI）の構築に特化している。
– UIをコンポーネントと呼ばれる部品単位に分割して開発する
– 仮想DOMという技術を使って、UIの変更箇所のみを効率的に再描画する
– 「JSX」と呼ばれるHTMLに似た独自の構文を使用する
– サードパーティ製ツールやライブラリに恵まれている
– 単方向データバインディング
– TypeScriptとの親和性の良さ## Vueの特徴
Vue.jsはGoogleのエンジニアだったEvan You氏によって開発されたJavaScriptのフレームワークで、軽量でシンプルな設計思想が特徴的で、比較的小規模なWebアプリケーション開発に適している。
– HTMLに似たテンプレート構文を採用している為、学習コストが低い
– 仮想DOMの差分適用回数がReactより多い傾向があるため、パフォーマンスではやや劣る– 日本語ドキュメントが充実している
– 軽量さとシンプルさが
（if文復習）scriptタグの位置でエラーがでた話。
お疲れ様です。
実家へ帰ったり法要があったりで久々の投稿です。皆様体調などいかがでしょうか？
私は何度目かの蓄膿症を発症しましたが、治ってきているような感じもあり元気にしています:relaxed:そして、実家にいる間、MDNさんやudemyさんを使い、自信のないJSのif文やfor文の復習をしておりました。
今日は約1時間if文の復習をしました。
MariaDBでGeoJsonを扱ってみた
地図アプリを作っていて、緯度経度を扱っているのに、MySQL/MariaDBの空間データ型を扱わないのはもったいないので、触ってみました。
また、地図情報を扱うのに都合がよいファイルフォーマットとして、JSON型のGeoJsonがあるようで、JavascriptやNode.jsで扱いやすそうです。
これを機にGeoJsonファイルビューアを作ってみました。MariaDBに都道府県や市町村データを登録して、位置情報から都道府県や市町村名を検索できるようなWebAPIをNode.jsで作成します。
地図の描画には、GoogleMap APIを使います。GoogleMap APIでも、GeoJsonファイルをサポートしています。国土交通省が提供している国土数値情報サイトからいろんなGeoJsonファイルが提供されているので、それを見るだけでも楽しそうです。
今回以下のデータを参照できるようにしました。
・駅
・鉄道ルート
・バス停留所
・バスルート
・高速バス停留所
・高速バスルートそれ以外のJSONは、ご自身でダウンロードして、ビューアに食わせると参照できます。
国土数値情報
Lightning Web Componentsでのトースト表示
## 前提とやりたいこと
・取引先(Account)を参照する調査結果(SurveyResult__c)オブジェクトがあるとする
・取引先の詳細画面を開いたときに、LWCを利用し関連する調査結果レコードで最終更新日が最も新しいレコードを取得する
・取得したレコードの最終更新日と現在の日付の差分を取り、任意の日数経過していた場合にトーストメッセージを出力する取引先に調査結果を紐づけて管理していて、一定日数調査されていないと注意が表示される。なんていう場面を仮に設定しています
## イメージ
取引先の詳細画面を開いたら注意書きをトースト表示するようにします
## 実装内容
「accountChildInfoWarn」という名称でLWCを作成しました
各ファイルの実装内容は以下の通りです
“`accountChildInfoWarn.js
広い海で遊ぶゲーム。
### 広い海で遊ぶゲーム。スペースキーを押すと発射。
カーソルキーで移動です。
“`python
import os
import webbrowser
from http.server import SimpleHTTPRequestHandler, HTTPServer
import threading# HTMLコードを生成
html_content = “””
x-line-signatureの署名検証についての備忘
## 背景
LINEのMessagingAPIにてWebhookを使用する際、そのリクエストがLINEからのものであるかの検証を行うため、リクエストヘッダの`x-line-signature`の署名を検証する必要がある。
公式 – 署名を検証する
https://developers.line.biz/ja/reference/messaging-api/#signature-validationNode.jsのサンプルコードで`const crypto = require(“crypto”);`とあるが、`npm view crypto`で見ると非推奨
“`bash
bash-3.2$ npm view cryptocrypto@1.0.1 | ISC | deps: none | versions: 4
This package is no longer supported and has been deprecated. To avoid malicious use, npm is hanging on to the package name.
https://g
Reactで簡単な学習記録アプリを作った
# 学習記録アプリをReactで作ってみました
## 作成物
## 工夫したところ
・学習時間の入力フォームは数値しか入力できないようにした
・無駄なState変数を作らなくても動くようにした（合計時間を計算するときにreduce関数を使用した）## つまづいたところ
・時間の入力フォームのところで数値しか入力できないようにしたら残り一文字のときにバックスペースを押しても消せなくなってしまった点 →onchangeに設定したイベントハンドラは入力内容が反映されたものが渡されるのだとわかった
Azure DevOps ReposでAdvanced Securityを有効にしてcodeScanする
# 目的
GitHubにはGitHub Advanced Securityがあるが、そのAzureDevOps版を利用して、コードスキャンを実行する# Advanced Securityの有効化の手順
参考:
https://learn.microsoft.com/ja-jp/azure/devops/repos/security/configure-github-advanced-security-features?view=azure-devops&tabs=yaml– ReposのAdvanced Securityを選択する
– 有効化されていないと以下の画面になるので「Enable in settings」を押下
 => {
const timeoutFn = () => {
window.clearTimeout(timeoutId);
timeoutId = window.setTimeou
【超簡単】GASとGeminiで無料でAIのLINEbotを作成する。
geminiのAPIとGoogle Apps Scriptを使用すれば、自分なりのAIをLINEbotに組み込めるのでその方法を公開します。
とても簡単なので是非真似してみてください。
LINEBOTとGeminiのAPI Keyを発行してそれをGASに貼り付けた以下のコードのyour_～_keyに貼り付けてください。
アプリを公開して、WebhockにそのURLを設定すれば動くと思います。初めてGASを動かす方は色々トラブルと思いますが、調べれば簡単にできると思います。
ぜひやってみてください。
こちらの記事を参考にしています。詳しくはこちらを参考にしてください。
https://cros.co.jp/2024/01/12/%E6%A5%AD%E5%8B%99%E6%94%B9%E5%96%84google-apps-script%E3%81%A7gemini%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%8Bgpts/#index_id8
“`
const GEMINI_API_KEY = ‘your_ge
java script のパワーに惚れた。揺れる水槽の中のパーテクルの動きゲーム。
#### java script のパワーに惚れた。GPUを使用しているみたいだ。どういう仕組みなんだ。
##### 水槽の中のパーテクルの動きゲーム。
Next.js完全ガイド初心者向け。今すぐ試せるコード付き
## 1. Next.jsとは
Next.jsは、Reactベースのフレームワークで、高速で効率的なウェブアプリケーション開発を可能にします。
“`jsx
// Next.jsの基本的な構造
my-app/
├── pages/
│ └── index.js
├── public/
├── styles/
└── package.json
“`この構造が、Next.jsプロジェクトの基本となります。
## 2. Next.jsの特徴
Next.jsには以下のような特徴があります：
– サーバーサイドレンダリング（SSR）
– 静的サイト生成（SSG）
– ファイルベースのルーティング
– APIルート“`jsx
// pages/index.js (SSRの例)
export async function getServerSideProps() {
const res = await fetch(‘https://api.example.com/data’)
const data = await res.json()
re
はじめてのRuby On Railsチュートリアル
## Ruby on Railsマスターへの道：30章で学ぶWeb開発の全て
こんにちは、Railsエンジニアの皆さん！今回は、Ruby on Railsの基礎から応用まで、30章に渡って詳しく解説していきます。
各章にはサンプルコードも含まれていますので、ぜひ手を動かしながら学んでいきましょう。
## 第1章: Railsのインストールと初めてのアプリケーション
まずはRailsをインストールし、最初のアプリケーションを作成します。
“`ruby
# Railsのインストール
gem install rails# 新しいアプリケーションの作成
rails new my_first_app
cd my_first_app# サーバーの起動
rails server
“`## 第2章: モデルの作成
データベースとの連携を行うモデルを作成します。
“`ruby
rails generate model User name:string email:string
rails db:migrate
“`## 第3章: コントローラーの実装
ユーザーから
もうやだ。もう駄目だと感じたときに実行するコード。
#### もうやだ。もう駄目だと感じたときに実行するコード。
“`python
import os
import webbrowser
from http.server import SimpleHTTPRequestHandler, HTTPServer
import threading# HTMLコードを生成
html_content = “””
