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

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

javaScript81_Date

Jsの中に、Dateを使用し、時間を表すことができる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1067004/ea26f379-272a-1c0a-36a5-3c6a62a0336e.png)
getDate()メソッド
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1067004/86554f68-b899-5731-115c-045a98b4eb21.png)
getDay()メソッド
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1067004/32cbcd43-6e38-0218-e341-b8a6a842b56c.png)
getMonth()メソッド
![image.png](https://qiita-image-store.s3.ap-northeast-1.ama

元記事を表示

【Nuxt.js,Firebase】ゲストログイン機能の実装

#はじめに
こんにちは!
今回は多くの方に私が開発したアプリに触れていただきたいと思い簡単にログインできるよう**ゲストログイン機能**の実装についてアウトプットしていきます!

#対象
・firebaseを使用してのユーザー登録、ログイン/ログアウト機能の実装を行いたい方
・firebaseを使用してのゲストログインを実装したい方
・既にユーザー登録、ログイン/ログアウト機能の実装がお済みの方。
(こちら[参考記事](https://qiita.com/Yudai_35_/items/cb6f360863cf2838b7d5))

##使用環境

|使用技術 |バージョン |
|:-:|:-:|
|nuxt.js |2.15.7 |
|firebase |9.6.1 |
|firebase-tools |9.23.3 |
|@nuxtjs/tailwindcss |4.2.0 |

##使用ファイル,概要

|ファイル名 |概要 |
|:-:|:-:|
|pages/login.vue |ゲストログイン機能、テンプレート表示 |
|plugins/firerbas

元記事を表示

MicrosoftのWeb開発教材を使ってみた ⑦-2銀行プロジェクト【ログイン/データ管理/状態管理】

## はじめに

**「Web Development For Beginners」**というMicrosoftがGithubに公開している教材についての記事です。

教材の紹介・選んだ理由など

### この教材を選んだ理由

https://github.com/microsoft/Web-Dev-For-Beginners

– HTML/CSS/JavaScriptを触れるいい感じの教材が欲しかった
– そこそこのボリュームがあり、作りながら学べるタイプの教材
– 基礎的なトピックが一通り網羅されている
– 質が高そう
– なにせあのMicrosoftなので、きっと良いものでしょう。
– 題材が**面白そう**
– 軽く調べた感じだとチュートリアルでよくある題材として「TODOアプリ」「クイズアプリ」などがあるみたいですが、どれもどう実装するのか想像がついてしまって、余り興味がわきませんでした。
– しかしこの教材は「テラリウム」「タイピングゲーム」「ブラウザ拡張機能」

元記事を表示

javaScript80_arguments

関数を呼び出す際に、ブラウザは関数に二つの隠された引数を渡します。
一つはthis,もう一つはarguments.

argumentsの構造はArray(リスト)に似ていますが、Arrayではありません。
argumentsを使い、インデックス番号で値を操作することができます。リストの長さも確認することができます。
関数を呼び出す時、渡した値(実引数)は全部arguments内で保存されます。

値がArrayかどうかを確認する方法として、Array.isArray()メソッドを使用します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1067004/f81852be-a4db-87bd-43bb-dfe28c496549.png)
形式引数と定義しなくても、argumentsで実引数を渡すことができます。
arguments[0]: 一つ目の実引数
arguments[2]:二つ目の実引数

argumentsの中にcallee属性があります。callee属性は現在指している関数オ

元記事を表示

GraphQLのQueryとMutationについて

GraphQLの公式に書かれているQueriesとMutationsを自分の言葉に変換して、
メモがわりに記事にしておきます。

コードは、公式で利用されているものを使用させていただいています。

公式で書かれている文章で何ができるのかを把握しようとしている最中です。
ハンズオンで動画を見ながらコードを書くこととは別に、公式で書かれている内容に目を通すことでできることの理解が進むことを実感じました。

# Fields(フィールズ)
オブジェクト中のhero以下がfieldという。
オブジェクトを取得したい時はfield以下でfriends fieldを作成する。

“`graphql
# 実行クエリ
{
hero {
name
friends {
name
}
}
}
“`

レスポンス

“`json
{
“data”: {
“hero”: {
“name”: “R2-D2”,
“friends”: [
{
“name”: “Luke Skywalker”

元記事を表示

javaScript79_callとapply

主にcall()とapply()メソッドについて書きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1067004/7d7bd68e-dc2a-9e80-3734-bdd0199e83aa.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1067004/1b4f5bbc-7991-e534-eeb8-6b27b64df27e.png)
メソッド内に、引数を追加することもできます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1067004/e723c45c-9d8e-7f07-fafb-d569f152824b.png)

元記事を表示

pushの勘違い

“`js
const cafe = [‘Starbucks’,’SAINTMARC’,’Doutor’]
>undefined

console.log(cafe.push(‘Veloce’))
>4

console.log(cafe)
>(4)[‘Starbucks’, ‘SAINTMARC’, ‘Doutor’, ‘Veloce’]

“`
pushメソッド込みで出力すると、配列の数を返します。

“`js
const newCafe = cafe.push(‘EXCELSIOR’)
>undefined

console.log(newCafe)
>5

console.log(cafe)
>(5)[‘Starbucks’, ‘SAINTMARC’, ‘Doutor’, ‘Veloce’, ‘EXCELSIOR’]

“`

#pushは元の配列を更新
newCafeが`(5)[‘Starbucks’, ‘SAINTMARC’, ‘Doutor’, ‘Veloce’, ‘EXCELSIOR’]`
になると思った方はご注意ください。最初、勘違いしていました。

※TULL

元記事を表示

[JavaScript]スーパーリロードってできるのか(但し、非推奨)

# はじめに

WEBサイトの画像表示時にキャッシュを無効化してサーバーから取得するようにできないかなーと思って、色々調べてたら「こんなことできるんだー」と思ったのでメモ(但し、アンチパターンとして認識)

# やりたいコト

特定の画像をキャッシュから取得しないようにしたかった

“`php

“`

# やったこと

王道でいくと`Cache-Control`で`content=”no-cache”`を設定する、とか

“`php

“`

imgタグなので、srcを動的にするとか

“`php
format(‘U’);
?>
JS100戦をやります!!

# 今年はJSの使い手になりたくて基礎的で意外とわかってないことをまずは100個やってみる!!!

## NO1 Array.at

配列を後ろから数えることができる
以下は参考ソース

“`javascript






Document

  • 要素1
  • 要素2
  • 要素3
  • 要素4
  • 要素5