f@ctor

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

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

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のpresignd-urlをonClickで発行しクライアント側でダウンロードさせる

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

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

またアップロード時もpresigned-urlが使えるようです。
実装方法を考えてみてください。

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

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

– クライアント側で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

#### 〜完成イメージ〜
何も入力してない時は、「年/月/日」が入る！
![スクリーンショット 2022-06-26 18.50.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2717077/e1e05359-1605-0955-fd51-545579e1d521.png)
日付指定後、検索ボタンを押すと、すると、、、
検索結果(投降数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=親要素

base=主とする要素＜＝

chi1=子要素1
chi2=子要素2
元記事を表示

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

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

## 今回作ったもの（開発中）
[iOSのクローン](https://mf3px.sakura.ne.jp/PhoneClone/#p4)
![20220626_184247.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/471258/6c5ad4a1-6f76-510e-348d-d152859a8144.gif)

## 製作物の特徴
– iOSの特徴を捉えた触れるUI
– YouTubeの簡単なアプリ
– ピアノ（実際に音が鳴ります）
– 投稿掲示板（PHP）
– ロック画面，設定画面
– 通知，アラートの機能
– 下のホームバー（黒色の細長いボタン）をクリックするとホーム画面へ
![JointPics_20220626_190051.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/471258/2fa09870-0f76-05ec-83d7-32bb038c6872.png)

元記事を表示

数式を含む英文を翻訳するツール作った話

## 作ったもの

[数式を含む英文を翻訳するツール](https://hooked-on-mas.github.io/tools/translate_with_equation/index.html)

使い方などツール自体の詳細は[こちら](https://hooked-on-mas.hatenablog.com/entry/2022/06/26/002728?_ga=2.94583961.4439452.1656160964-525354746.1602505894)へ．

## 動機

元記事を表示

JavaScriptだけで本格的なチャットボットを作る！

# JavaScriptだけで本格的なチャットボットを作る

## 今回作ったもの（開発中）
[AIチャットボット（デモサイト）](https://mf3px.sakura.ne.jp/chatbot2/)

AIチャットボット