JavaScript関連のことを調べてみた2022年06月28日

個人開発で変数名に日本語を使ったら快適だった話

## 変数名に日本語を使おうと思った経緯
こんにちは。秋になると柿を200個食べるWebエンジニア、すずきゆーだい([@szkyudi](https://twitter.com/szkyudi))です。

最近、個人開発としてリアルタイムで変更を確認できる多機能な割り勘電卓「ばりわるくん」を作りました。
このアプリケーションでは、似たような性質の変数が多く存在するため、英語でどのような区別をつけていけばよいかわからなくなりました。

そこで、いっそのこと変数名を日本語にしてしまった方が楽になるのではないかと考え、導入に至りました。

https://warikan-dentaku.vercel.app

## 必要な変数と使った変数名たち
まずは、このアプリケーションでどのような変数が必要になったかを紹介して、実際の変数名を見ていだければと思います。
実際にスマートフォンなどでアプリケーションを触っていただきながら見ていただくと、より理解していただけると思います。

### 必要になった変数たち
– お会計の金額
– 支払人数の合計
– 普通に払う人（自動で計算される）
– 支

primary keyをオートインクリメントしている場合に、その数値を外に露出させない実装をしてみた？！

## はじめに
データベースのprimary keyをauto incrementしている場合（サロゲートキーを使っている場合）に、もし何も気にせずREST APIでCRUDするようなアプリを作ろうとすると、一番簡単なのはそのPKを使ってデータを操作する事だと思う。

ただ、そのような実装した場合、PKが外に露出してしまうので、ToDoアプリ等であれば問題ないかもしれないが、もしPKがユーザーID等の個人を特定できる情報であれば、サービスの利用ユーザ数が知られてしまったり、何かと悪影響があるだろう。

今回は可逆暗号を利用して、オートインクリメントをしたユーザーIDなど外に露出してほしくない情報を隠す方法を試してみたので備忘録を残す。

※上記のprimary key露出に関しての懸念事項については、[idをautoincrementして何が悪いの？](https://zenn.dev/dowanna6/articles/3c84e3818891c3)などを参照。

※上記の問題を解決するのに、以下で見ていく方法が良いと言えるのか？実際にプロダクトで使えるのか？については、勉強中の身の

１つのページ内に異なるカウントダウンを作成するDay12

本日もお疲れ様です。現役テックキャンプ受講生のアプリ開発Day１２です。最近昼夜逆転気味なり、更新も遅い時間になりがちです。いつかのタイミングで生活リズムを戻さねばと思ってます。

今日はjsによるカウントダウンを作成しました。現在、ディスカッションのためのWebアプリを作成しているのですが、ディスカッションするためのルームを一定時間経過後、自動的に閉じるように設定しようと思ってます。そのためのカウントダウンを作成していたのですが、１つのページで複数の異なるカウントダウンを表示させる方法が検索でもなかなか出てこなかったので、ここでアウトプットします。

イメージはこちらをご覧ください
https://gyazo.com/87f473586453759e904aa1ebfaa9629c

今回はRoomを複数作成し、それぞれにカウントダウンを表示させる方法について説明します。
結論はカウントダウンを作る記述をforループ内に記述すると簡単にできます。

# DBにdeadline（締切）カラムを追加
締切の日付を登録するためのdatetime型のカラムを追加します。
“`ruby:mi

高卒30代未経験からモダン・フロントエンドエンジニアになった軌跡を全て書いていく

※Qiitaのおかげ（？）で転職できた話です。

# 【22歳】工場勤務ワイ
ワイ「毎日毎日、接着剤で部品をくっつけるのしんどいな・・・」
ワイ「ワイ、作業が遅すぎて先輩に嫌われてるし・・・」
ワイ「転職したいな・・・」
ワイ「プログラマーってカッコええな・・・」
ワイ「よっしゃ、C言語ってやつの本を買って、勉強してみよか・・・！」

### C言語の勉強開始
ワイ「さっそく本を読んでいくで」
ワイ「変数・・・関数・・・なるほどな」
ワイ「オモロイやんけ」

### 翌日
ワイ「よっしゃ、黒い画面（コマンドプロンプト）で動く、**足し算プログラム**ができたで！」

### 一週間後
ワイ「・・・来る日も来る日も、黒い画面ばっかりや！」
ワイ「いつになったら、デスクトップアプリみたいなのを作れるようになんねん！」

### 結果
一週間で挫折しました。

# 【23歳】無職ワイ
ワイ「工場がなくなって、無職になってもうたわ」
ワイ「ほな、職業訓練校に行って、失業保険のお金をもらいながら」
ワイ「もう一度プログラミングのお勉強をするで！」

### 職業訓練校にて
先生「1ヶ月間、**V

Dot installで扱っているがProgateで扱っていないJavaScript基本構文のまとめ【後編】

# 目的

★　本記事は[こちらの記事](https://qiita.com/wgsbt4859/items/8ed05b076b0e302fec9f)の後編です。　★

JavaScript初学者としてProgateのJavaScriptコースを1周した。

しかしさらなる発展編としてDot installの講座も見てみると、まだまだProgateで扱っていない基礎構文が多数あった。

本記事では、Progateで扱われなかったがDot installでは紹介されている重要な構文をまとめる。

## Dot installで紹介されている基礎構文まとめ

### 詳解JavaScript オブジェクト編　後編（第21回～）

#### 日時の計算

– `new Date()`：現在日付・時刻取得
“`javascript
const d = new Date();

d.getFullYear(); //年
d.getMonth(); //月
d.getDate(); //日付
d.getDay(); //曜日
d.getHours(); //時間
d.getMinutes()

PDF.js を使おうとしたら、セットアップにやたらと苦労した

[PDF.js](https://mozilla.github.io/pdf.js/) とは PDF を JavaScript で扱うためのフレームワークです。

選択した PDF ファイルを Javascript 上で png に変換してアップロードする、ということをやりたかったので、このフレームワークを選択しました。

が、セットアップにだいぶ苦労したので、書き留めておきます。

## 自分の環境

主な構成情報は以下です。

– サーバー側
– Rails (7.0.1)
– react_on_rails (12.5.2)
– webpacker (5.4.3)
– クライアント側
– react@17.0.2
– typescript@4.5.5
– webpack@4.46.0

ただの `Javascript` で使うだけなら、苦労しないでしょうが、
`Typescript` と `webpacker` の環境だとちょっと苦労しました (後述)。

## インストール方法

インストールは、[Wiki](https://gi

プログラミング初心者に役立ちそうなサイト

こんにちは。

現在、長野県のとあるA型事業所でプログラミングをしています。
通いはじめて3日ほど経ち、環境に慣れてきました。
プログラミングはほとんど未経験で、初心者状態なので、よいサイトやコンテンツを求めてネットをさまよっていました。

A型事業所としては私の担当はアプリ開発やコーディングといったジャンルが求められています。
まずは簡単なHTMLやCSSからはじめて、Javascriptの案件をこなしていくことが求められています。
コーディングの経験はほとんどなく、趣味のMML程度の技量なので、しっかり勉強していく必要を感じています。
いまのところはアプリ開発も自社事業として進めていくのでSwiftやKotlinも必要そうなのですが、まずはHTMLからはじめています。

プログラミング学習にはYouTubeが良いらしいと聞いていたので、「Javascript 初心者」などと検索をかけてでてきた動画をいくつかみてみました。
それから実際にコーディングをしながら学べるサイトを探してみました。

HTMLやCSS、Javascriptの勉強に使っているのはfreecodecampというサ

[JavaScript]filter()で連想配列を指定条件で絞り込む

# はじめに
今回は、JavaScriptのfilter()について学んだことをまとめておきたいと思います。

filter()の基本構文の説明後、タイトルのサンプルコードを紹介します。

# 目次
[1.filterメソッドとは](#1-filterメソッドとは)
[2.本題](#2-本題)
[3.参考記事](#3-参考記事)

# 1. filterメソッドとは

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

filter()は、配列の要素を絞り込み、処理結果を新しい配列として返すメソッドです。
基本構文は以下のようになっています。

## 基本構文
“`js
配列データ.filter(( value, index, array ) => {
// 絞り込むための条件を記載
})
“`
コールバック関数の中では絞込みたい条件を記載し、**true** を返した場合のみ新しい配列に追加します。

コールバック関数の引数には
– 第１引数：

DOMの親子要素の追加・削除をじっくり勉強してみた

先ほど投稿したDOMの家族要素に追加や削除の機能をつけてみました。
備忘録として、書き込みさせていただきます。
※最初の子要素を消すと、複数一気に消えてしまう現象を何とかしたいです。
　改善案がございましたらご教授いただけますと幸いです。

““DOMcreateDelete.html

最初の子を消去
最後の子を消去

頭に子を追加
後ろに子を追加


body=さらに先祖

ancientor=先祖

parent=親要素

prev=直前にある兄弟要素

【判明】セクシー女優に多いのはあの名前！？【DMM.com】女優APIを使って名字・名前ランキングを100位まで一挙公開！

こんにちは あるいは こんばんは。田中です。

ツイッターは[work_Tanaka](https://twitter.com/work_Tanaka)です。

今後ともDMM関連の情報はつぶやいて行くと思うのでQiita・Twitterのフォローよろしくお願いします！

今回はセクシー女優に多い苗字と名前ランキングを作ってみたのでご査収ください。

## 名字ランキング１位

はえある1位は・・・・

・・・・

・・・・

・・・・

・・・・

・・・・

・・・・

・・・・

・・・・

・・・・

・・・・

・・・・

・・・・

・・・・

・・・・

・・・・

`261人` いらっしゃる `桜井` さんでした！

## 名前ランキング１位

はえある1位は・・・・

・・・・

・・・・

・・・・

・・・・

・・・・

・・・・

・・・・

・・・・

・・・・

・・・・

・・・・

・・・・

・・・・

・・・・

・・・・

・・・・

・・・・

・・・・

・・・・

`2４３人

フロント学習の最高の教材集

## はじめに

今回はフロント学習で重宝できる教材をまとめました。

軽く自己紹介として、自分は新卒でフロントエンジニアとして入社し2022年で2年目になります。

実際に実務を通す中で「この教材のおかげで実装がスムーズにできた」「この教材をやってたおかげで理解ができた」といったような場面が2年の間で多々ありました。

今回紹介する教材は自分自身が実際に使ってよかったものかつ、そのほとんどが無料で学べるor低価格の教材になっています。

「**フロントエンドを網羅的に学べかつ実務の基礎作り**」という目的で教材を紹介します。

## この記事の主な対象者

– フロントエンドの学習をこれからしていきたい人
– 何を学べばよいのかがわからない人
– HTMLとCSSはある程度かける人

## この記事の目標

– フロント学習の指針が立てられる
– 実務現場でも活用できるスキルを学べる教材を知れる

## JavaScript

### [ドットインストールのJavaScript編](https://dotinstall.com/lessons/basic_javascript_v

React: 2022年6月における開発状況

React公式サイトのBlog記事「[React Labs: What We’ve Been Working On – June 2022](https://reactjs.org/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.html)」が、2022年6月における開発状況について記しています。新機能に向けた考えをコミュニティと共有しようということです。本稿はBlog記事に沿って、内容をかいつまんでご説明します。

なお、記事の情報はロードマップではありません。現在、検討と開発が進められている問題領域を示したものです。はっきりとした出荷時期は決まっていないことをご了承ください。

# サーバーコンポーネント
2020年12月に[Reactサーバーコンポーネント](https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html)(React Server Component)の実験的なデモが発表され

非公開S3オブジェクトをwebアプリ上でダウンロードする

## やりたいこと
S3に保管されているファイルをwebアプリ上でダウンロードしたいです。
オブジェクトを公開すればS3のURLをリンクするだけですが、
今回はセキュリティに配慮し非公開オブジェクトを扱うこととします。

なお今回はLaravel + Vue.jsでの実装ですが、どのフレームワークでも同じだと思いますので他言語の方もご参考ください。

## やりかた
1. フロントのonClickをトリガーにバックエンドでpresigned-urlを発行する
1. `document.createElement(‘a’)`でaTagを作る。
1. バックエンドから返ってきたpresigned-urlを`aTag.href`に格納し`aTag.click()`でクリックさせる

## メリット
サーバーサイドでファイルをダウンロードしフロントエンドへ送り込む方法もありますが、
こちらの方法のほうが以下のようにメリットが多く感じられました。

– クライアント側でDLさせるため高速&サーバー負荷小
– php.iniで設定されているメモリ使用量やDLサイズの上限を気にしなくて良い
– サー

Github Actions で SEO 対策！サイトマップ作成を自動化！

こんにちは。ぬこすけです。

この記事では私が運営しているサイト「[ぬこぷろ](https://nuko-programming.com/ranking/Python/page/1)」で実際にやっている **[Github Actions](https://github.co.jp/features/actions) を使ってサイトマップ作成の自動化** について紹介します。

https://nuko-programming.com/ranking/Python/page/1

次の構成でお話しますが、「サイトマップなんて知ってるぜ」「Github Actionsも使いまくってるぜ」という中上級者の方は最初の「[サイトマップとは？](#サイトマップとは)」や「[Github Actions とは？](#github-actions-とは)」は読み飛ばして OK です。

– [サイトマップとは？](#サイトマップとは)
– [Github Actions とは？](#github-actions-とは)
– [Github Actions でサイトマップ作成を自動化してみた](#gi

【React】個人開発で使うために爆速でReactを勉強したい

# この記事の主題
元々大学時代に個人開発で、VueやNuxt.jsを使っていたんですけど、
社会人になってサーバーサイドの言語である「Java」をやり始めて、
「本業でJava、個人開発でサーバレスのモダンなやつで開発できたら、なんかめっちゃかっこよくね？」ってなったので、
最近のサーバレスの開発記事でよく目にする+モバイルアプリ開発のReactNativeにも拡張できる、
Reactを学習しようという運びになりました。

ただ、最初はwebアプリも作ってみたいと思ったため、Next.jsを学習するために、
なる早でReactを終わらせたかったのです。

# 留意事項
この学習のゴールを、「フレームワークを使う際に困らないようにする」というところに置いており、
複雑な概念はそこまで熱心にやっておりません。
また、基本的に遅延評価勉強法をベースとした学習をしています。

そのため、ある程度のことは、何かを作って調べながら身につけることを前提としているので、
知識の抜けもれはおそらく（きっと確実に）あります。

# かかった期間
おそらく2週間くらいで、稼働時間は一日あたり1h～4hくら

HTMLのヘッダー・フッターをJavaScriptでインクルードする

HTMLで静的なサイトを作っているとき、共通した内容のヘッダー・フッターを書くのがとても面倒でした。

例えば、以下です。

– 単純に作業量が増える
– 後からヘッダー・フッターに修正が必要になったとき、全て修正する必要がある

こういった問題をJavaScriptで解決できたので紹介します。

## ■前提条件
– httpサーバー環境であること※CORSエラー対策に必要
– 以下のようなプロジェクト構成であること

“`
$PROJECT_ROOT
│ # ヘッダー/フッターのhtmlを格納するディレクトリ
├── include/
│ # JavaScriptを格納するディレクトリ
├── js/
│ # includeディレクトリのファイルを表示するhtml
└── index.html
“`

## ■JavaScriptのFetch APIを使って問題を解決する
### ＊Fetch APIとは？
>Fetch API は(ネットワーク越しの通信を含む)リソース取得のためのインターフェイスを提供しています。
>XMLHttpRequestと似たものではあり

【Rails】指定日の投稿数を非同期通信化にて表示！

##### ★先駆者様の記事を見ながら真似して実装してみました！↗︎
皆さんもぜひ参考にして下さい(^｡^)σ

https://qiita.com/nao0725/items/3ce5512500b38ea75431

なんですが、、、
真似しても中々実装できず、とても苦労したので、復習も兼ねてまとめてみます。
語彙力、コミュ力なしの期待値なし人材が書くので、耳にポテチ挟みながら見て下さいm(_ _)m

#### 〜完成イメージ〜
何も入力してない時は、「年/月/日」が入る！
日付指定後、検索ボタンを押すと、すると、、、
検索結果(投降数OTZ)が一瞬で出てくる(非同期通信すげぇ!!!)
![スクリーンショット 2022-06-26 18.50.13.png](https://qiita-im

Dot installで扱っているがProgateで扱っていないJavaScript基本構文のまとめ【前編】

# 目的

JavaScript初学者としてProgateのJavaScriptコースを1周した。

しかしさらなる発展編としてDot installの講座も見てみると、まだまだProgateで扱っていない基礎構文が多数あった。

本記事では、Progateで扱われなかったがDot installでは紹介されている重要な構文をまとめる。

## 本記事の対象

– Progateは一周し、さらに学習を進めたい方
– Dot installもProgateも一周し、復習をしたい方
– Dot installで学んだことで、少し難易度が高い（ニッチな知識）を思い出したい方

## Dot installで紹介されている基礎構文まとめ

### 詳解JavaScript オブジェクト編　前半

– `const`の配列の個々の要素には、値を再代入できる

配列自体を再定義するのは不可

“`javascript
const scores = [30, 40, 66];

const scores = [10, 20, 40]; //error!
scores[0]

DOMの親子関係等を整理してみた。

DOM操作に少し慣れてきたのですが、実際に書いてみると親子等の操作がまだよく理解できておらず、うまく動かないことが多いです。
そのため備忘録として投稿させていただきます。
““domFamily.html

body=さらに先祖

ancientor=先祖

parent=親要素

prev=直前にある兄弟要素

base=主とする要素＜＝

chi1=子要素1

chi2=子要素2

超リアルなiOSのクローンを作る！

# スマホ（iOS）のクローン

## 今回作ったもの（開発中）
[iOSのクローン](https://mf3px.sakura.ne.jp/PhoneClone/#p4)

## 製作物の特徴
– iOSの特徴を捉えた触れるUI
– YouTubeの簡単なアプリ
– ピアノ（実際に音が鳴ります）
– 投稿掲示板（PHP）
– ロック画面，設定画面
– 通知，アラートの機能
– 下のホームバー（黒色の細長いボタン）をクリックするとホーム画面へ