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

JavaScriptの概要と基礎的な文法

“`
前提
プログラミングを始めたて(1~2ヶ月)の自分が学習した内容をまとめています。
実際の現場では通用しないことや間違いなどあるかもしれません。
お気づきの際はコメントにてご報告いただければ幸いです。
“`
## JavaScriptは何ができる？
JavaScriptというとプログラミングを全く知らなかった私でも聞いたことのある単語でした。
そしてプログラミングを学び始めるまではプログラミング言語であるということすら知りませんでした。
### JavaScriptとはなにか。そして何ができるのか。
Javascriptとは？
JavaScriptはクライアントサイドで主に使われる言語
ブラウザ上のアプリの使いやすさやリクエストの贈り方の工夫ができる
#### 具体的な役割の例
・ページ遷移無しで画面の表示を切り替え
カーソルを合わせると動的な動きをする仕組み
webページの上部のグローバルメニューにカーソルを合わせると項目が出てくるようなあれです。
・画面を更新せずにサーバーから値を取得
twitterでいいね押すとその画面で数値が増えたり減ったりがページの更新をせずに見れ

Nuxt.jsで日時文字列またはDate型をフォーマットして表示

日時を好きな形式にフォーマットして表示したいとき、変換とか色々めんどうですよね。
そんな時に便利なのが `dateformat` です。
今回 `Nuxt.js` のプロジェクトで使用しました。

# dateformat を利用可能にする

まずはインストールします。

“`bash
npm i -S dateformat
“`

どこからでも `dateformat` の関数を利用できるようにするため、 `plugins` ディレクトリ内に `dateformat.js` というファイルを下記内容で作成します。

“`javascript:plugins/dateformat.js
const dateformat = (date, format) => {
const dateformat = require(‘dateformat’);
return dateformat(date, format);
};

export default ({}, inject) => {
inject(‘dateformat’, dateformat);
};
“`

続

JavaScriptとPHPの記載方法の違い

### 変数
| 処理 | JavaScript | PHP |
|:–|:–|:–|
|変数宣言| let name　
const name | $name |
|変数埋め込み|`私は${name}です` |”私は{$name}です”|
|変数連結|name + “です”.|$name.”です”|

### 配列
| 処理 | JavaScript | PHP |
|:–|:–|:–|
|配列の末尾に追加 | names.push(“太郎”); | $names[] = “太郎”; |
|配列の長さ取得| array.length;|count($array);|
|配列の作り方|const array = [“apple”, “orange”, “banana”];|$array = array(“apple”,”orange”,”banaan”);|
|連想配列(js:オブジェクト）の作り方|const obj = {name: “太郎”, gender: “男性}; |$obj = array(“name” => “太郎”,”gender

HTML CSS JavaScriptハンズオン

# HTML CSS JavaScriptハンズオン
CISTLTというサークルで初学者向けにフロントエンドのハンズオンを行いました。
レスポンシブに対応しています。
[完成版サイト](https://elastic-pike-36aad9.netlify.app/)
JavaScriptは使っていません。スタイルはやばめですが、クラス属性を理解させるためにこのようにしています。
ぜひ、ハンズオンやってみてください。
[サークルホームページ](https://cist-lt-group.web.app/)

【Javascript】同じ変数を参照したときの同期を回避する方法

## 結論
以下のようにJSON.parseとJSON.stringfyを使ってuser1との関係性を切ればok

“`javascript
const user1 = {
name: “たろう”,
sex: “man”,
};

let user2 = JSON.parse(JSON.stringify(user1));

user2.name = “はなこ”;
user2.sex = “woman”;

user1.name; // =>たろう
user2.name; // =>はなこ
“`

##解説
変数に代入するときに忘れがちなポイントがあります。
それは
#####変数には参照先の情報が入っているだけで、その中身は入っていない
ということです。
たろう君について見てみましょう。

“`javascript
const user1 = {
name: “たろう”,
sex: “man”,
};
“`
user1にはオブジェクトではなく、「太郎君について書かれたオブジェクトへの参照」が入ります。

この事実を念頭に置いて次の行を見てみましょう。「太郎君に

【Select2】ブラウザの”戻る”ボタン押下時にセレクトボックスの選択状態がズレる件について

こんにちは。

https://select2.org/

セレクトボックスのデザインやコンポーネントをリッチにする
select2プラグインについて、セレクトボックスを選択後に
ブラウザの戻るボタンで遷移をすると、実際の選択状況と
セレクトボックスボックスの表示がズレることがあったので、
改善できないか調査しました。

## 1.事象

上記通り、”Language”,”age”で項目を選択して、ページ遷移を行った後に、
ブラウザの戻る機能で戻ってくると、”Language”,”age”共に”none”（初期値）が表示されているが、
セレクトボックスを開くと実際には”en-us”,”40″が選択されており、表示内容と実際の選択内容が
異なっている。

## 2.再現条件
PCのChromeブラウザで再現することを確認し

【Node.js】LINE BOT グループにプッシュ通知を送る

# はじめに
LINE APIを使ってグループにpush通知を送る個人的メモ

# モジュールインストール
axiosを使うと非常にシンプルにPOSTリクエストが送れるので採用

“`bash
$ npm i axios
“`

# コード

“`js:index.js
const axios = require(‘axios’)

const linePost = async (msg) => {
console.log(‘linePost…’)
const token = ‘API TOKENを入力してください’

const req_url = ‘https://api.line.me/v2/bot/message/push’
try {
const res = await axios.post(req_url, {
//グループID
“to”: “グループのIDを設定してください”,
“messages”: [
{
“type”: “text”,
“text”: msg
}
]

three.jsでアバタービデオチャットを作る

# この記事について
所属しているゼミで夏のオンライン合宿が実施されました。
4人1チーム、3日間の日程でthree.jsを使用したアバタービデオチャットサービスを作成したので、備忘録として使用した技術や参考になったサイトを簡単に残しておこうと思います。
# 使用したもの
* HTML+CSS
* JavaScript(three.js)
* [SkyWay](https://webrtc.ecl.ntt.com/)
* facemesh

## SkyWayについて
>SkyWayは、ビデオ通話、音声通話をかんたんにアプリに実装できる、
マルチプラットフォームなSDKです。
（公式サイトより）

SkyWayのJavaScript SDKを使用することで、自前でサーバを用意しなくても気軽にビデオチャットサービスが利用できるようになります。
今回はwebカメラの映像そのものではなくアバターの動きとマイク音声をやりとりしたかったので、[こちら](https://webrtc.ecl.ntt.com/documents/javascript-sdk.html)のサンプルコードに手を加え

FuelPHPでAjax使ったときの値の見方

Ajax使って非同期でデータのやり取りを実装するとき、
「403エラー出てるけど具体的にどういうエラーなん？」
ってなったときとかに見る方法です。

“`example.php
$value;//おそらく原因であろう変数
var_dump($value);
exit();
“`

`var_dump()`は引数の情報（値、型など）を表示する関数です。`exit()`は現在のスクリプトを終了する`言語構造`というらしいです。関数とは違うんだとか。
参考→https://www.php.net/manual/ja/function.exit.php

非同期かどうかにかかわらずデバッグするときに使えそうですね。

【Nuxt.js】Nuxt文法編：head

? この記事はWP専用です
https://wp.me/pc9NHC-BC

# 前置き
metaタグを設定するhead属性について解説していきます?
SEOに直接的な影響はないと言われていますが、
検索結果のタイトル下に表示されるmeta descriptionは
クリック率に影響するため理解しておいた方がGood?

それではやっていきましょう〜！

# head
## head属性とは

前置きにも書きましたが、
metaタグを設定する場所です??

公式：
https://ja.nuxtjs.org/guide/views/#%E3%83%9A%E3%83%BC%E3%82%B8

基本的にはnuxt.config.jsで
グローバルに設定しますが
pageごとのローカル設定を
優先させることもできます?

pageで個別の設定しなければ
nuxt.config.jsの設定が引き継がれます。

## headに使えるオプションと使い方

head で利用できるオプションは数種類あります。
メタ情報プロパティの認識

主に使うのがtitleやmeta descriptionですね

Zustand: React向け軽量ステート管理ライブラリ

## はじめに

本記事ではZustandという軽量ステート管理ライブラリを紹介します。ZustandはFlux/Reduxの流れを汲むステート管理ライブラリです。React向けに必要な機能だけに削ぎ落とし、シンプルなAPIを提供していることが特徴です。また、Contextを用いていないことも特徴の一つです。今回は技術的な側面よりも、基本的な使い方を紹介します。

## インストール

“`bash
npm install zustand
“`

Zustandは「チュースタンド」のように読み、ドイツ語で「状態」を意味します。

## 一番簡単な例：「カウンター」

“`tsx
import React from ‘react’;
import create from ‘zustand’;

// ステートの型を定義する、アクションもステートの一部
interface State {
count: number;
increment: () => void;
}

// ステートの実装からhookを作る
const useStore = create((s

LaravelとVue.jsの連携

#LaravelとVue.jsの連携

Qiita初投稿です。
最近覚えることが多いのでアウトプットしていきながら理解を深めようと思います。

##環境
– PHP 7.3.11
– laravel/framework 6.2
– vue 2.6.11

##手順
1. Laravelプロジェクトの作成
2. laravelとVue.jsの連携
3. 立ち上げ

##Laravelプロジェクトの作成
Composerのインストールに関しては完了している前提で書いております。

まずlaravelのプロジェクトを作成していきます。
下記のコマンドを実行しましょう。プロジェクト名は自分のプロジェクト名に変えてください。

“`
$ composer create-project –prefer-dist laravel/laravel プロジェクト名
“`

プロジェクト作成が完了したら

“`
$ cd プロジェクト名
“`

cdコマンドで該当プロジェクトまで移動します。
そしてローカルサーバーを立ち上げるために下記のコマンドを実行します。

“`
$ php arti

firebase-cloudStorageでの画像のアップロード

firebase-cloudStorageを使って画像の管理をしようと思い
ドキュメントをみてやってみたけどうまくいかなかった。
自分の見方が悪かった。。。

#修正後

“`html

“`

“`javascript