JavaScript関連のことを調べてみた2023年01月08日

[本の紹介][JavaSccript]［ゲーム＆モダン JavaScript文法で2倍楽しい］グラフィックスプログラミング入門

# [［ゲーム＆モダン JavaScript文法で2倍楽しい］グラフィックスプログラミング入門](https://gihyo.jp/book/2020/978-4-297-11085-7)を読んで

JavaScriptでシューティングゲームをつくることができる本。　サンプルを動かして楽しいゲームの作り方が学べる。

## とりあえずサンプルを動かして遊んで引っかかったところ
1. 自機のショットボタンがわからない。
Zボタンがショットボタン　
1. ゲームオーバー時の復帰方法がわからない。
Enterキーで復帰する
1. プロジェクトの途中からサンプルが動かなくなる
サーバーを立ち上げる必要がある。　
“`shell:shell
python -m http.server 8080　
“`
としてからアクセスすれば普通に動作する。

shebang に対応しているプログラミング言語まとめ

# はじめに

https://qiita.com/rana_kualu/items/84f66fe970f7feccf367

この記事を読んで、 **javascript(ECMA Script, ES2023) において shebang が言語仕様となる** ことを初めて知りました。

shebang を shell 以外に使うことに関しては、UNIX(OS) 側が、**「スクリプト言語は `#` をコメントとして扱うことが一般的」** ということを想定した、限定的な使用法と私は認識しています。

そのため、 **`#` をコメントとして使用しないプログラミング言語からの視点** でこの仕様を考えると、（UNIX のスクリプト実行のフォーマットという） **プログラミング言語が用意している実行方法の範囲から外れたケースの考慮** となります。
Node.js は、実行環境も含めたアプリケーションなので、 **Node.js に shebang の考慮が入っていること自体には違和感を強くはもたない** のですが、ブラウザの実行も含めた **ECMA Script の視点で sheb

PHPをかじった自分がjsの非同期処理を理解してみる

# 概要

– PHPで同期処理しか書いてこなかったので非同期処理がワケワカメだった。そんな自分がなんとかして非同期処理を理解してみたのでまとめてみる。

# ベースとなるコード

– 今回、下記の様なjsのコードを用意しました。

“`js
console.log(“——————–“);

function a() {
console.log(“関数aです”);
b();
}

function b() {
console.log(“関数bです”);
c();
}

function c() {
console.log(“関数cです”);
}

a();
“`

– 関数aが関数bを呼び、関数bが関数cを呼んでいます。
– 上記を実行すると下記のようにコンソールに出力されます。

“`
——————–
関数aです
関数bで

Next.js 入門メモ

どこを抑えたらよいか、どう書けばよいかをさらっと解説します。

# Next.jsとは
Reactというライブラリをほぼ完全にサポートしていて、上位互換のようなイメージです。
Reactはビルド(コンパイル)すると大量のJSを生成します。私たちがページにアクセスすると返されるのは少量のHTMLと大量のJSが返されます。そこからJSをでレンダリングなどの処理を行います。クライアントで処理するので**Client Side Rendering**(CSR)といいます。( ≒ SPA)初回レンダリングこそ遅いものの、ページ間の移動は非常に高速です。

Next.jsはReactで記述できるのですが、ビルドするとHTMLとJSを生成します。私たちがページにアクセスすると返されるのはHTMLとJSです。HTMLがそこそこ書かれているため読み込みがJSでレンダリングするより圧倒的に高速です。
HTMLを表示させてからJSでレンダリングや読み込みを行うので真っ白の画面で待たせる時間が非常に短くなり、ユーザーの体験が向上します。
サーバーサイドでJSをレンダリングしておくので、**Server Si

GPT-3で漫画タイトル生成

**工事中**

## 目次
1. GPT-3のapi利用申請
1. アカウント作成
1. APIキーの取得
1. ＊＊＊
2. 環境
1. ＊＊＊
3. アプリ案
1. あらすじから生成
1. 画像から生成
1. ジャンルから生成
4. デザイン
1. イメージ
1. コード
1. ＊＊＊

## 3.アプリ案

### あらすじから生成


↑イメージ図。
最近ジャンププラスで読んだ読切です。(斬新、控えめに言って最高だった)
引用：こちら(https://shonenjumpplus.com/episode/316190247056444405)

![image.png](https://qiita-image-store.s3.ap-northeast

Vue3でtrainsition-groupを使って順番にカードがスライドするようなアニメーションを作る

# はじめに
このページで作成できるのは以下のようなものです。
# 全体のコード
“`vuejs:TestPage.vue