- 1. 105.配列とループ分
- 2. thisキーワードは難しい
- 3. Python,Ruby,PHP,Java,JavaScript,Perlの文法・構文の比較
- 4. Node.jsの基礎（データの送受信）
- 5. Node.jsの基礎（簡単な操作）
- 6. 1万件のCSVを読み込ませるPHPコード雛形。
- 7. [React×TypeScript] 自作ColorPicker
- 8. プログラマのプログラマによるプログラマのためのタイピング練習アプリ2
- 9. 【JavaScript】特定文字を複数除外する。
- 10. Salesforce認定JavaScriptデベロッパー問題集（No.1～No.20）
- 11. 人事のおじさんプログラミングを学ぶ Day12「オブジェクトとCSSを使ってアイテム情報をテーブルで表示」
- 12. テスト更新
- 13. Denoの新機能「npmインポート」について予習する
- 14. Leafletで大量のマーカーを表示させる（ついでに個別の回転機能も）
- 15. javascriptのprototypeの超簡単まとめ
- 16. [TypeScript]IndexedDBでログを保存と出力。JS/TS、VueとReactに適用する
- 17. 【JavaScript】コードの整理の学習中
- 18. カリー化とは
- 19. 102.ループ文 for while
- 20. package.jsonとpackage-lock.jsonの違いについて
105.配列とループ分
# for関係
1.for(length)…:配列の要素数を,配列.lengthを用いて取得し、番号をキーとして要素の数だけループを行い、要素を取得する方法
2.for..in…配列の要素数をfor…inを用いて取得し、番号をキーとして要素の数だけループを行い、要素を取得する方法
3.for..of…配列の要素そのものを取得する方法
## 1-3をそのまま取得してみる
“`javascript
const arry =[“a”,”b”,”c”]
// 1.for(length)…:
for(var i=0;i<=arry.length;i++){ console.log(i) } // 2.for..in.. for(let v in arry){ console.log(v) } // 3.for..of... for(let v of arry){ console.log(v) } ``` ## 出力結果 #### 1.for(length)...: の動き方をしている。
しかし、よく勉強してみると、当然かと思うこともある。
オブジェクトの中のプロパティやメソッドを参照しているつもりが、もっと上のwindowオブジェクトで、ブラウザーのjavascriptエンジンがそれらのプロパティやメソッドを探していたためで、その時はundefinedエラーになる。例えば、メソッドが見つからないとか。なぜ、windowでなく、定義したオブジェクトに探しに行かないのか。この原因について、勉強を重ねた。# サンプル
以下は、そのサンプルです。
まず、TubeListオブジェクトを定義しています。いくつかのpropertyと、メソッドがあります。“`
//抜粋
let TubeList = {
//プロパティ定義
site_name: “”,
aaa:””,
youtube_timer: null,
・・・
//メソッドの中で、thisを使っています。
content_ready (){
Python,Ruby,PHP,Java,JavaScript,Perlの文法・構文の比較
Python,Ruby,PHP,Java,JavaScript,Perlの文法・構文の比較
# Python
https://qiita.com/Fendo181/items/a934e4f94021115efb2e
# Ruby
https://qiita.com/Fendo181/items/eb2cb17f32d99aa01f59
# PHP
https://qiita.com/7968/items/d739e926189e219273bd
# Java
https://qiita.com/tomonori_hioki/items/cec47a366208d43d7339
# JavaScript
https://qiita.com/Fendo181/items/cca476da99e8f09b6b97
# Perl
https://perlzemi.com/blog/2
Node.jsの基礎（データの送受信）
https://qiita.com/hiro949/items/8f992bdafa8f90828b62
の続きです。
# http通信
“`app.js
const http = require(‘http’);
const server = http.createServer((req,res)=>{
res.write(‘Hello world from nodejs’);
res.end();
});server.listen(‘3000’);
“`“`
node app
“`でこれを実行し、ブラウザ(chromeやedgeなど)のurl検索欄で
“`
localhost:3000
“`と検索すると、ブラウザに次の画面が表示されます。
なお、app.jsはずっと実行しっぱなしになっ
Node.jsの基礎（簡単な操作）
# 環境
Windowsを利用しています。使うエディターはvscodeです。# インストール
https://nodejs.org/ja/download/
からWindowsの64bit版をインストールします。
# 実行
vscodeでctrl+@でターミナルを開いてターミナル右上の+ボタンの横のプルダウンからcommand promptを選択します。
すると、コマンドプロンプトの操作ができるようになります。実行したいjavascriptファイル(例えばapp.js)のあるディレクトリまで移動して
“`
node app
“`でAPIを実行できます。ずっと動いていたらctrl+cなどで中断してください。
# パッケージの読み込み
フレームワークなどパッケージのインストールが必要な時は以下のようにします。
まず、app.jsを作成して(空でよい)、コマンドプロンプトで“`
npm init
“`と入力します。すると、色々聞かれるので、必要な情報を打ち込みながらEnterを押し続けると次のファイルが生成されます。聞かれた内容もここに記録されていま
1万件のCSVを読み込ませるPHPコード雛形。
# 1万件のCSVを読み込ませるPHPコード雛形です。
#### 動作環境はPHP8系
+ Read_csv_class.php…CSV読み込みを行っているファイル（雛形です）。
+ index.php…ajaxを使用しRead_csv_class.phpを呼び出しているファイル
+ [こちら](https://testdata.userlocal.jp/)のCSVダミーデータを改変して動作確認をしています。
#### ※ fgetcsv($this->handle, null, “,”);の箇所はバージョンより要確認！“`php:Read_csv_class.php
[React×TypeScript] 自作ColorPicker
# 初めに
自作のColorPickerを作成しました。
ポイントとしては、スライダーでも手入力でも色の確認ができるところだと思っています。## 眠いので早速コード
See the Pen
color-picker by yuichiro (プログラマのプログラマによるプログラマのためのタイピング練習アプリ2# はじめに
以前，[プログラマのプログラマによるプログラマのためのタイピング練習アプリ](https://qiita.com/tt_and_tk/items/a47bf3016239e1fa5879)にてタイピングアプリを作りました．
が，お世辞にもいい出来ではなく以下のような問題が残りました．* グローバル変数に頼りすぎ
* 戻れない
* スコアが分かりづらい今回はそれらを修正したプログラムを作成します．
前回とはガラッと変わってPython使います．# フォルダ構成
Flaskを使うので以下のようになってます．“`
.
├── static
│ ├── base.css
│ ├── game.js
│ ├── questions.js
│ ├── script.js
│ ├── select_language.css
│ └── title_screen.css
└── templates
│ ├── base.html
│ ├── game.html
│ ├── select_language.html
│ ├── se
【JavaScript】特定文字を複数除外する。
“`
let abcde = ‘AoBoCoDoEoFoGo’;
console.log(abcde.replace(/A|B|C/, ”));結果：
oooDoEoFoGo“`
Salesforce認定JavaScriptデベロッパー問題集（No.1～No.20）
:::note
解説や翻訳に誤りがありましたらご指摘いただけましたら幸いです。
:::**Salesforce 認定 JavaScript デベロッパー**多岐選択式試験対策の問題集です。
以下から抜粋して和訳しています。https://www.freecram.net/exam/JavaScript-Developer-I-salesforce-certified-javascript-developer-i-exam-e11977.html
JavaScript デベロッパーの試験については以下の公式ガイドをご参照ください。
https://salesforce.quip.com/OIpYAdobQMUk
—
### No.1
以下のHTMLを参照してください。
~~~javascriptThe current status of an Order: In Progress
.
~~~
テキスト`In Progress`を`Completed`に変更するステートメントはどれですか？**
人事のおじさんプログラミングを学ぶ Day12「オブジェクトとCSSを使ってアイテム情報をテーブルで表示」
書籍『確かな力が身につくJavaScript「超」入門 第2版』に沿って、
オブジェクトとCSSを使って、アイテムの在庫をテーブルで表示してみた。
学習過程で書いたコードはコメントアウトして残した（コメントアウトの練習のため）。
## 課題
– LeafletのL.MarkerはDOMで描画するため遅い。
– L.Mapのオプション「preferCanvas: true」、かつL.CircleMarkerを使えばCanvasで描画されるため軽いけど、デザインが限られる。
– L.MarkerをCanvasで描画してくれるプラグインとして、[Leaflet.Canvas-Markers](https://github.com/eJuke/Leaflet.Canvas-Markers)があるけど、
– 長らくメンテナンスされていない。(バグ修正のPRもマージされていない)
– 同一画像のアイコンでは早いけど、連番等を付加した、ひとつづつ違うアイコンではもっさり。
– 2000個くらいから初回読取が遅くなった。
– （Canvas触ったことなかったのでお勉強もかねて新規作成）## 方向性
– L.Iconを引数とするL.CircleMarkerの拡張
– L.CircleMarkerにCa
javascriptのprototypeの超簡単まとめ
# javascriptのprototypeについて
`prototype`は、javascriptの中でも理解しにくい概念でもあるが、実はjavasciptを理解するための重要な概念でもある。`prototype`を理解することで、javascriptの仕組みを理解することができる。
# 基本的なprototypeと__proto__
以下はjavascriptの`prototype`の概念を図にしたものである。
開発者が`Person`というクラスを定義すると、内部では`Person`と`Person’s prototype`の`obj`が生成される。この二つの`obj`はお互いに関連することを示すため`prototype`と`constructor`を持って相互参照する。
`con
[TypeScript]IndexedDBでログを保存と出力。JS/TS、VueとReactに適用する
## 環境
+ Windows 10
+ Node.js `v18.0.0`
+ Yarn (`npm`または`pnpm`も構いません)
+ VS Code
+ Chrome## 初めに
– ある程度の`indexedDB`基礎知識が必要、学習：[LINK](https://developer.mozilla.org/ja/docs/Web/API/IndexedDB_API)
– 非同期処理（`Promise`など）を使っていないので、ニーズによって追加してください
– 本記事で`Vue`と`React`のJSフレームワークをサンプルとして書いたが、JSまたはTSプログラムにも使える## パッケージインストール
– `file-saver`：ファイル出力用、`@types/file-saver`はそのタイプライブラリ
– `dayjs`：時間ライブラリ、お好きなライブラリを使ってください“`shell
yarn add -D file-saver @types/file-saver dayjs
“`## Vue.js版
**App.vue**
【JavaScript】コードの整理の学習中
# 複数画像投稿機能＋プレビュー機能
学習中、コードが冗長になってきたということでコードが整理されました。
“`JavaScript:整理前
document.addEventListener(‘DOMContentLoaded’, function(){
// 新規投稿・編集ページのフォームを取得
const postForm = document.getElementById(‘new_post’);
// プレビューを表示するためのスペースを取得
const previewList = document.getElementById(‘previews’);
// 新規投稿・編集ページのフォームがないならここで終了。「!」は論理否定演算子。
if (!postForm) return null;// input要素を取得
const fileField = document.querySelector(‘input[type=”file”][name=”post[images][]”]’);
// input要素で値の変化が起きた際に呼
カリー化とは
# 意味
– 関数を返す関数を作り、プログラムの共通化を図る。
– 言語に関係なく共通する概念であるが、ここではtypescriptで説明します。# 例文
“`typescript:typescript
const add = (x:number) => (y:number) => x + y
const add1 = add(1)
const result = add1(2) // 3
“`# 説明
関数addは引数xを受け取ると、`(y:number) => x + y`を返す関数。
add関数の引数として１を入れると、`(y:number) => 1 + y`の返すようになる。
返された関数の引数yに対して２を入れると、`(2) => 1 + 2`が成立され、３を返す。# メリット
– 共通化によってバグを防ぐことができる。
– まとまった処理を分割することによって、複雑度を下げつことができる。# 例文
“`typescript:typescript
const add = (x:number, y: number) => x + y
add(1, 2)
102.ループ文 for while
# ループ文とは
＊{ }の中を繰り返す処理を記述します。
ループ分で大事なのは
1.いつまで繰り返すのか
2.何を繰り返すのか
3.どうすれば終わるのかということを意識します。
# for 文
## 書き方
for(繰り返す値;条件;1周回った時にどのくらい追加されるか){
// 中身
}
1.いつまで繰り返すのかが、真ん中の;条件;です。
2.繰り返す値は左側に宣言していきます
3.右側が1周回った時に追加される値です
#### 例
条件 i > 5までだったら{}ないが起動するので
i=0 i > 5
i=1 i > 5
i=2 i > 5
i=3 i > 5
i=4 i > 5
i=5 i > 5→これは成立しなくなったので繰り返し終了ー
“`javascript
for(let i =0;i < 10;i++){ console.log(i); } ``` 
