- 1. Python,JavaScript,PHP,Ruby,Perlのインストールの比較
- 2. JavaScript で 3 秒待ちたい
- 3. あるWebサービスの開発メモ・JavaScript チート
- 4. JavaScript で if – else ってどう書くんだっけ？
- 5. 【Express】起動時に、「TypeError: express is not a function」のエラー
- 6. 【Rails】Javascriptバンドラーの第5の選択肢vite_rails
- 7. Node.js ExpressでEJS+静的ファイルWebサーバー
- 8. FastAPI と Vue.js で作るJWT認証
- 9. 【Chakra-UI】STack / HStack / VStack を使用すると、子要素の「:not(style)~*:not(style)」に「margin-inline-start: 0.5rem」が付与されて、意図しない「margin-left: 8px」 がある
- 10. 唐突にダイスの期待値を計算するツールが欲しくなったから1週間で作ってリリースした part3
- 11. html & css & javascript で かっこいいサイト を 作る[アニメーション]
- 12. React + TypeScript: Apollo ClientのサブスクリプションによりGraphQLサーバーからリアルタイムに更新を取得する
- 13. JavaScriptでCSVファイルを構文解析（Parse）する方法
- 14. 自作 isEmpty が意外と難しかった件
- 15. 【スケジューラ】自分の投稿したQiita記事の情報をAPIから取得してみる
- 16. React + TypeScript: Immerで状態をイミュータブルに保つ
- 17. JavaScript returnについて
- 18. 【FormBridge】ドロップダウンの選択肢を動的に変更する
- 19. Python,JavaScript,PHP,Ruby,Perlの入門の比較
- 20. 【JS / TS】分割代入のレスト構文ってなに？（スプレット構文とは違うよ編）
Python,JavaScript,PHP,Ruby,Perlのインストールの比較
Python,JavaScript,PHP,Ruby,Perlのインストールの比較
# Python
https://qiita.com/disk131/items/a4f74ea9aa9c173cc71a
# JavaScript
https://qiita.com/sefoo0104/items/0653c935ea4a4db9dc2b
# PHP
https://qiita.com/yuya00/items/45312f386a7a0d5d76de
# Ruby
https://qiita.com/Rock22/items/31ab75c87fcf3122f357
# Perl
https://perlzemi.com/blog/20180820153471.html
JavaScript で 3 秒待ちたい
– [あるWebサービスの開発メモ・目次ページに戻る](https://qiita.com/ishi32/items/152a1ecf7eeee7a8fb57)
– [あるWebサービスの開発メモ・JavaScript チートに戻る](https://qiita.com/ishi32/items/aa1db70e2176652dc97f)怪しいループを書いたときに
「このループが抜けてこなかったらマズいな」
「従量課金、大丈夫かな？」
といった不安を感じる時って、だいたい失敗しています。ログ出力が追いつかないほどクライアントサイドでブン回ってしまうと収拾がつかなくなってしまいます。
そこで Wait の登場です。
実装方式はいろいろと検討してみましたが、どれも私にはわかりにくい実装でした。[こちらの先生](https://laboradian.com/js-wait/) が公開してくれている async function を利用するものがとてもわかりやすかったので、実装と動作確認をおこなってみました。
(指定された時間待つだけの関数を内包したPromiseオブジェクトを
あるWebサービスの開発メモ・JavaScript チート
– [あるWebサービスの開発メモ・目次ページに戻る](https://qiita.com/ishi32/items/152a1ecf7eeee7a8fb57)
## やりたいこと
ここでは React のなかで使用する JavaScript のチートシートをコツコツつくっていきます。
JavaScript はちょっと苦手です。やりたいことの実装方法がわからなくて、Google検索などで方式を探り、試行錯誤して実装するということを繰り返しています。
多少苦労をして実装できたものの、その後の整理ができていないため、時間の経過とともにまた同じようなことがわからなくなってしまって、また同じ試行錯誤を繰り返してしまっています。
例えば if – else の条件分岐。私は初めに c言語 を学んだので c が右脳に染みついています。c で実装するのは容易ですが、他言語になると急に怪しくなってきます。
話を戻します。定番と言いますか、過去に問題解決した課題に関するチートがあると、自分にとっては非常に有用です。JavaScript のエキスパートにはまったく不要な情報だと思いますので無視
JavaScript で if – else ってどう書くんだっけ？
– [あるWebサービスの開発メモ・目次ページに戻る](https://qiita.com/ishi32/items/152a1ecf7eeee7a8fb57)
– [あるWebサービスの開発メモ・JavaScript チートに戻る](https://qiita.com/ishi32/items/aa1db70e2176652dc97f)もう１００回以上忘れては調べる、をやっている気がしています。あらためて見てみると c と同じなんですね。(演算子はちょっと違う)
“`
const myadd = “Shinjuku”;if (myadd === “Setagaya”) {
console.log(“Setagaya”);
} else if (myadd === “Suginami”) {
console.log(“Suginami”);
} else {
console.log(“Other”);
}
“`
【Express】起動時に、「TypeError: express is not a function」のエラー
expressでサーバー立てようと思い、このように書いていたら、
“`typescript
//index.ts
import * as express from “express”;
const app = express();
“`トランスパイルして実行したところ、こんなことを言われました。
“`
/dist/index.js:2
var app = express();
^TypeError: express is not a function
“`
※ちなみに、tsconfig.jsonの`module`は、`es6`です。## 対処法
“`typescript
//index.ts
import * as express from “express”;
//↓
import express from ‘express’;
“`
という記事を見て、真似してみましたが、今度は下のようなコンパイルエラーも出ました。“`
このモジュールは ‘export =’ を使用して宣言されていて、
‘allowSyntheticDefa
【Rails】Javascriptバンドラーの第5の選択肢vite_rails
# 初めに
`Rails7`からアセットパイプラインは`importmap` `esbuild` `webpack` `rollup`の 4 つの選択肢があります。
ですが、新たに`vite_rails`という選択肢をここで紹介させていただきます。# なぜ vite_rails なのか
– 開発サーバーは非常に高速に起動し、変更が即座に更新される。(ホットリロード)
– 基本的にデフォルトの設定で動作し、構成が簡単である
– デプロイ時は`assets:precompile`でバンドルができる。
– css や sass などもバンドルできる。# 導入方法
`webpacker`からの移行する方法になります。
`Gemfile`に`vite_rails`を追加します。
“`Gemfile:Gemfile
gem ‘vite_rails’
“`“`console:ターミナル
$ bundle install$ bundle exec vite install
設定ファイルを作成する
“`デフォルトでは`app/frontend`がエントリーポイントに
Node.js ExpressでEJS+静的ファイルWebサーバー
# 概要
Node.jsでEJS実行環境と静的ファイルをそのまま返すwebサーバーを作ってみた
# 方針
目標はApache(Nginx)+PHPのような環境をNode.js(Express)＋EJSで構築すること
– 拡張子.html .ejsはEJSテンプレートとしてレンダリングして返す
– それ以外のファイルはそのまま返す# 参考
以下の記事を参考というかほとんどこれをベースにカスタマイズしました
https://note.affi-sapo-sv.com/nodejs-webserver.php?utm_source=pocket_mylist#i2
拡張子htmlをejsとして実行する方法
https://stackoverflow.com/questions/21922854/change-ejs-extension-to-html-using-parse-com-express-js?utm_source=pocket_mylist
EJS内で直接モジュールをrequireできないらしいので、server.jsでModuleを追加できるようにしました
FastAPI と Vue.js で作るJWT認証
本記事は、FastAPIとVue.js(**CompositionAPI+Pinia**)で動作するJWT認証のシステムを作ってみたので、備忘録として残すのが目的です。またFastAPIでセキュリティや認証を強いるときは**Dependency Injection**が使われますが、個人的には一般的な概念を理解するよりは、単に使い方を学ぶ方が良いと思われます。
【関連過去記事】
[VueのCompositionAPIでPiniaを使う – Qiita](https://qiita.com/sand/items/fc3acb3df7aa2ad6e208)
[FastAPIでつくるVue SPAアプリの雛形 – Qiita](https://qiita.com/sand/items/4b3e222dbb9315e2b0c0)
[FastAPI OAuth2 クライアント – Qiita](https://qiita.com/sand/items/990afc5d49a37b026acc)
[FastAPI OAuth2パスワード認証 – Qiita](https://qiita.com/
【Chakra-UI】STack / HStack / VStack を使用すると、子要素の「:not(style)~*:not(style)」に「margin-inline-start: 0.5rem」が付与されて、意図しない「margin-left: 8px」 がある
個人的な備忘録です。
# 環境
– react: 17.0.2
– next: 11.1.3
– @chakra-ui/react: 1.8.5# 事象
– HStack 内の **2つ目以降の子要素から** 意図しない *margin-left: 8px;* が付与されて、デザインが崩れてしまう“`tsx
hoge{/* 2つ目以降の要素から意図しない margin-left: 8px; が付与されてしまう */}
hogehogehoge
“`“`scss
.list {
justify-content: space-between;
flex-wrap: wrap;
}
“`
https://dicespec.vercel.app/
## part1のあらすじ
– ダイスの期待値などを計算してくれるサービスを作った
– しかしダイスの期待値に正規分布の近似を使ってるから精度が微妙今回は精度を改善していくお話です
## そもそも、元々どのぐらいの精度だったん？
正規分布というのは超ざっくり説明すると下の図のような分布のことです。それに対してダイスの出目というのは多項分布というものなので、強引に正規分布に近似すると精度が落ちちゃいます。
というサイトを参考に作っていこうと思います。私が気に入ってるサイトです。
では、ここから役に立ちそうな背景のアニメーションを紹介していこうと思います。
# 役に立つ背景のアニメーション
## [幾何学模様](https://coco-factory.jp/ugokuweb/move02/5-4/)
React + TypeScript: Apollo ClientのサブスクリプションによりGraphQLサーバーからリアルタイムに更新を取得する
[Apollo Client](https://www.apollographql.com/docs/react/)はReactで使える状態管理ライブラリです。ローカルとリモートのデータをGraphQLで扱えます。本稿は公式サイトの「[Subscriptions – Get real-time updates from your GraphQL server](https://www.apollographql.com/docs/react/data/subscriptions)」にもとづいて、GraphQLサーバーからデータをリアルタイムにどう更新するかについての解説です。Apollo Clientでクエリを使うための基礎はすでに学んだことが前提となります(まだの方は先に「[React + TypeScript: Apollo ClientのGraphQLクエリを使ってみる](https://qiita.com/FumioNonaka/items/0c6b711627e3443ff73b)」をお読みください)。ドキュメントの邦訳ではなく、日本語で説明し直しました。原文から省いた部分も
JavaScriptでCSVファイルを構文解析（Parse）する方法
はいさい！ ちゅらデータ ぬ オースティン やいびーん どー！ んな、 がんじゅー やいびーみ？
# 概要
`.csv`拡張子のファイルをJavaScriptで解析し、ヘッダーと行を抽出する方法を紹介します。## 背景
npmに公開しているCSV構文解析ソフトは他にあります。が、今回は使いません。https://github.com/adaltas/node-csv/tree/master/packages/csv-parse/
なぜこれを使わないか？
筆者は不要であれば、第三者が作ったパッケージを極力組み入れたくないからです。なぜ第三者パッケージを避けたいか？
複数の理由があります。
1. セキュリティの脆弱性が懸念される。Leftpad事件のような事件は今後も起きる。
1. そのパッケージがいつ放棄されるかわからない。放棄された時に、自分の手で維持しなければいけなくなる。
1. 仕事で携わっているプロジェクトの特徴で、第三者パッケージを入れると稟議を通すのに時間がか
自作 isEmpty が意外と難しかった件
# とにかく empty
– undefined
– null
– []（Arrayの要素0）
– {}（Objectのメンバーなし）
– ”（空文字）javascriptには様々な型（値）がありますが、四の五の言わず empty として判定したい！
# isEmpty（最終版）
“`javascript: util.js
const isEmpty = (obj) => {
if (‘number’ === typeof obj) {
return false
}return (!obj ? true : (0 === Object.keys(obj).length))
}
“`## 実行結果（isEmpty）
“`
let aaa
console.log(‘isEmpty’,typeof(aaa),String(aaa),’=’, util.isEmpty(aaa))
aaa = null
console.log(‘isEmpty’,typeof(aaa),String(aaa),’=’, util.isEmpty(aaa))
aaa
【スケジューラ】自分の投稿したQiita記事の情報をAPIから取得してみる
今回は、Qiitaに投稿した記事のView数をQiita APIから取得し、SQLデータベースに保管するスケジュールタスクを作成してみます。
### データベースの準備 ###
SQL Management Studioで空のデータベースを作成する。
### テーブルの作成 ###
下記のCREATE文で作成しました。
**Code**をユニークなキーとします。
“`
CREATE TABLE [dbo].[posted_items](
[row_id] [int] IDENTITY(1,1) NOT NULL,
[code] [varchar](1024) NOT NULL,
[title] [varchar](1024) NOT NULL,
[page_view_count] [int] NOT NULL,
[create
React + TypeScript: Immerで状態をイミュータブルに保つ
[Immer](https://immerjs.github.io/immer/)はデータ構造をイミュータブル(不変)に保つためのライプラリです。React公式ドキュメントでもおすすめされています(「[Write concise update logic with Immer](https://beta.reactjs.org/learn/updating-objects-in-state#write-concise-update-logic-with-immer)」参照)。また、2019年にはつぎのような賞を獲得しました。
* [Breakthrough of the year](https://osawards.com/react/2019) ー React open source award
* [The Most Impactful Contribution to the community](https://osawards.com/javascript/2019) ー JavaScript open source awardImmerはイミュータブルなデータ構造を用い
JavaScript returnについて
returnを理解するのは難しくまだまだ勉強中ですが、基礎を私なりにまとめてみました。
「値を返す」と「戻り値」の関係性は下記画像参照。
# returnとは
私なりの言葉で伝えると ”形にする” です！
例えば学校のテストで「１＋１」の問題が出たときに、頭の中で答えを思い浮かべるだけでは0点です。
ではどうやって点数を取るか・・・。それはテストの解答欄に「2」と記述すれば取ることができます。つまり「return」はプログラミング上の、「テストの解答欄に記述する作業」だと思ってくれれば理解しやすいかなと思います！
頭の中で答えを思い浮かべただけの作業例２選！
“`main.js
function sum(a, b) {
a + b;
}
const sum1
【FormBridge】ドロップダウンの選択肢を動的に変更する
## はじめに
FormBridgeのプルダウンの選択肢をkintoneから取得して生成する方法をご紹介します。
また、選択した値によって下の階層の選択肢の値を絞り込むという仕様も入れます。
FormBridgeでも選択した値によって絞り込むという設定は可能ですが、管理が手間となるため選択肢となるデータはkintoneで保持する方法を取り入れました。こちらのようなイメージです:information_desk_person_tone1:
## コード
“`javascript
‘use strict’;// kViewerのURLを記載
const kvOrganizationData = ‘https://~~’;// kViewerから取得したデータを入れる配列
let organizationData = [];(fun
Python,JavaScript,PHP,Ruby,Perlの入門の比較
Python,JavaScript,PHP,Ruby,Perlの入門の比較
# Python
https://qiita.com/ponnhide/items/870f0e6b1ae50f201f07
# JavaScript
https://qiita.com/ab-boy_ringo/items/23f60e051e3022f2a599
# PHP
https://qiita.com/mackeyTA/items/069900b5c2366fb30e3a
# Ruby
https://qiita.com/oekazuma/items/6daa19248353c6a81146
# Perl
https://perlzemi.com/
【JS / TS】分割代入のレスト構文ってなに？（スプレット構文とは違うよ編）
# 1.はじめに
分割代入の第4段の記事になります。今回は、分割代入のレスト構文編の記事となります。
[オブジェクト編](https://qiita.com/daishiman/items/5acf803f252b82f970fe) 、[配列編](https://qiita.com/daishiman/items/324dcc0eae72eb6b13cf)、[複雑な分割代入編](https://qiita.com/daishiman/items/d382279a2a6cae3ea1aa) と分割代入の記事を書いてきましたが、
本記事は、配列編と複雑な分割代入編の間の位置づけになります。間違って解釈している所ありましたら、ご指摘いただけますと幸いです。
レスト構文に似た [スプレッド構文](https://qiita.com/daishiman/items/42ba60a223cadbd98104) の記事も書いていますので、
他の記事も見て頂けると、うれしいです。# 2.目次
[1. はじめに](#1はじめに)
[2. 目次](#2目次)
[3. この
