kaibukuroのブログ

HTML/CSS/JavaScript/PHPなどのアウトプット

【JS】映画情報を非同期処理で取得するWebアプリを実装

JavaScript

成果物

サイト:
https://kaiyoshida57.github.io/js_app_ajax/
Github:
https://github.com/kaiyoshida57/js_app_ajax

きっかけ

JavaScriptにおける新しいの非同期処理の学習をしようと思いました。
そこで、TMDB（https://www.themoviedb.org/）という映画情報サイトで無料で公開されているAPIを利用し（要登録）、「上映中」・「人気」・「高評価」などの条件で映画リストを非同期で表示させる事を目標にしました。

手順

※申請してすぐに発行されるので、待ったりする必要はありませんでした。


1
TMDBのサイトには、親切にもガイダンスがあるので、それを見ながら取得したいAPIのURLを参照します。

使い方やAPI:
https://developers.themoviedb.org/3/getting-started/introduction

例えば、「上映中の映画」を取得したいなら、このページにて、
https://developers.themoviedb.org/3/movies/get-now-playing
このようなURLの使用を示してくれます。

https://api.themoviedb.org/3/movie/now_playing?api_key=<<api_key>>&language=en-US&page=1

2
そのURLを、fetchメソッドを使い、responseオブジェクトをjson形式で受け取ります。

const url = `https://api.themoviedb.org/3/movie/${dir}?api_key=xxx&language=ja&page=1`;

const json = await fetch(url)
 	.then((response) => {
		console.log('これは非同期処理成功!');
		return response.json();
	}).catch(error => {
		console.error('これは非同期処理失敗!', error);
		return null;
	});


3
jsonの中のresultsキーの中に、配列として格納されているので、それを一つ一つ処理するようにします。

json.results.map((movie) => {


4
そこからは、「上映中」ボタンのdata属性の中に入れた値（上映中ならnow_playing）に応じてURLを取得し、サムネイル画像やタイトルを入れたHTMLタグを返すように、DOM操作の処理を記述していきます。

let listContent = `
	<li class="card isFade">
		<a href="https://www.themoviedb.org/movie/${movie.id}" target="_blank" rel="noopener">
			<p class="mvTitle">${movie.title}</p>
			<img src="${mvImgSrc}" class="mvImg">
		</a>
	</li>
`;


詳しくは、GithubのJSにコメント付きで記述してあるので、ご参照ください。

終わりに

JavaScriptにおける非同期処理（APIに絡めた処理）は、使いたいデータを含むURLがありさえすれば、それをfetchで取得し、async/awaitを使うことにより簡単に使用することが出来ました。

参考にさせていただいたサイト

非同期処理
qiita.com
TMDBでのAPI処理
chocolat5.com
JavaScriptでTMDB APIを使ったMovieアプリを作ろう! | セルフノート

【フロントエンド】備忘録2022/3 HTML,VSCodeなど。

img要素には、width,heightに値を指定してレイアウトシフトを防ぐ

・img要素にwidth,heightに値を指定することでレイアウトシフト（読み込み時に大きさ指定がないと画面がズレる。）を防ぐのが良い。
・さらに、loading="lazy"も指定すれば読み込みを遅らせることで負荷を下げられる。また、背景画像へのlazy適用には、ライブラリも有効だが、imgタグに変えてposition:absoluteで設置するのも良いかも。
・また上記のうち、flexbox内のimg要素には、object-fit:containを指定し、画面が縮んだ時に縦横比が変わらないようにするといい。

srcset属性とpicture+souceタグについて

・srcsetは、サイズ違いの画像として分ける時だけ使う。
・picture+sourceタグは、違う画像として分ける時だけ使う。
parashuto.com

srcsetは、2022年2月に私も試したところ、以下の記事のようにブラウザにより作用しなかった。
igawa.co

・IEもそろそろ切れるので、ますます積極的に使うべきだと思いました。
・個人的にsrcsetはちょっと書き方がややこしいですが、pictureの方は分かりやすいので、読み込み負荷を下げるためにも使いたいです。

ユーザースニペットの登録

Sassのブレイクポイントの変数などを即座に呼び出したい時に、登録すると便利でした。
qiita.com

【WordPress】WP_queryでカスタム投稿タイプのループにPICKUP投稿を表示する方法

WordPress

要件

・WP_queryでカスタム投稿タイプのループ
・その中に特定の投稿だけAdvanced Custom Fields(ACF)値により、先頭に固定表示させ、他は日付順で並べる。
・カスタム投稿名 information

手順

・ACFをチェックボックスにし、keyを「information_pickup」、値を「pickup」と「not」と分けた上で、
次のコードで出力させる。
・日付順の投稿6件のうち、ACFにチェックされているものがあればそれらが優先的に先頭に固定される。

<?php
$args = array(
    // ACFの値を優先させ、それ以外は日付順に並べる
    'posts_per_page' => 6,
    "post_type" => "information",
    'meta_query' => array(
        'relation' => 'OR',
        array(
            'key' => 'information_pickup',
            'value' => 'pickup',
            'compare' => 'LIKE'
        ),
        array(
            'key' => 'information_pickup',
            'value' => 'not',
            'compare' => 'LIKE'
        )
    ),
    'orderby' => array(
        'meta_value' => 'DESC',
        'date' => 'DESC'
    )
);

?>

要点

・relation => OR にて、その下2つの配列に、2つのACF値をそれぞれ指定して絞り込ませる。
・さらにその下のorderbyでも、dateとmeta_valueの複数の条件を設定させる必要がある。

【フロントエンド】備忘録:JavaScriptの非同期処理の簡単まとめ

Promise

  • Promiseオブジェクトでは、引数(resolve,reject)で、resolve実行時に.then()が実行される。
  • promiseオブジェクトは、.then() で繋げられる。
  • Promiseの状態がrejectedになったら、.reject()が実行される。

Async()とAwait()

  • promiseをより直感的にした記述。
  • async宣言した関数は、promiseオブジェクトを返す。
  • awaitは、promise返却する関数の非同期処理が終わるのを待つ記述。awaitで受けられるのは、promiseのインスタンス。awaitはasync関数の中である必要がある。

Fetch関数

  • サーバ側から、データを取得する。
fetch("リクエスト先のURL");
  .then((response) => {
    return response.json();
  • responseオブジェクトには、サーバから返されたデータが格納されている。
  • 上記コードのように、json()形式で扱うことが多い。

参考にさせて頂いたページ。
【図解】1から学ぶ JavaScript の 非同期処理 - Qiita

【フロントエンド】備忘録 21/10/17

CSS WordPress

CSS

cursor: url;
は使う画像は128px以下じゃないと反映されない。
このプロパティはIE,一部アンドロイドブラウザでは使用不可。（211017現在）。

背景画像で使うSVGはIEではabsolute配置だと位置がずれる。代わりにjpg,png使う。

WordPress

デフォルトでは、アーカイブが無効になっているので、functionsで有効化。（通常の投稿一覧をindex.phpにするときなど。）

ブラウザ

Chromeではdevtoolで、

  • shf + option + ↓　でvscodeのようにタグ（行）複製できる。
  • shf + cmd + ↓　でにタグ（行）入れ替えできる。

VSCode

・スニペットの使い方
Sassの変数を登録しとくと便利でした。
qiita.com

【フロントエンド】備忘録 HTML,JSなど。

data-ナンデモ属性とは：

<タグ名 data-ナンデモ="img1.jpg">

のように、data- の後に自由に命名した属性を入れることが出来る。（HTML5から実装）

・JavaScriptで取得するときは、

const = 取得した要素.dataset.ナンデモ部分につけた名前


こちらの本の内容から抜粋しました。
https://www.amazon.co.jp/%E7%A2%BA%E3%81%8B%E3%81%AA%E5%8A%9B%E3%81%8C%E8%BA%AB%E3%81%AB%E3%81%A4%E3%81%8FJavaScript%E3%80%8C%E8%B6%85%E3%80%8D%E5%85%A5%E9%96%80-%E7%AC%AC2%E7%89%88-%E7%8B%A9%E9%87%8E-%E7%A5%90%E6%9D%B1/dp/4815601577/ref=sr_1_1?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&dchild=1&keywords=Javascript&qid=1610352172&sr=8-1

【フロントエンド】役に立ったページその2、Web豆知識

役に立ったページ

・知っておくと便利なHTML5の機能、要素や属性のまとめ

「mapタグ」、「markタグ」、「datalist要素」など、どれも知っておいて損は良いと思えるタグや機能などでした。
coliss.com

・【CSS】mix-blend-mode

>CSS3のプロパティ。これはDOMエレメントを重ねた時の見え方を指定するCSSプロパティ。

最近までこのプロパティは知らなかったのですが、Photoshopでいうオーバーレイなどを実現でき、画像や色を重ねて表現する時にとっても便利と感じました。

【CSS】ボタンのhoverでのアニメーション

design.aekana.com

【JavaScript】JSのメディアクエリ

coliss.com

【VSCode】Gitの拡張機能「Git Lens」

リンクに貼ったところのように、
あるコードにカーソル合わせた時に、過去のそのコードの状態を比較でき、引っ張ってくることも可能なのがすごい便利です。

eh-career.com

豆知識

・MacのChromeにて、左上の更新マーク（グルグルの矢印マーク）を、commandキー押しながら押すと、タブを複製（現在のページと同じページを隣のタブに開ける）出来る。Windowsだと、更新マークをホイールボタンで押すと同じことが出来ます。

地味にめっちゃ便利なんです。

・Macにて、【】（すみつきかっこ）の早い出し方→　全角のときに「option + 9/0」で入力出来る。

Macで入力ツールは、ライブ変換が便利すぎて「ことえり」を使ってるのですが、変換で出しづらいので、覚えとくと便利。

その他備忘録

tableタグのコーディングにて、
・trにはstyle当てない。
・flexもあまり使わない
・paddingで余白を取る。