情報基礎２　第３回

“`HTML:ex03-1.html











“`

“`HTML:ex03-2.html




<

WordPressでjQueryを読み込む

◉functions.phpへの記述

◉header.php（もしくはindex.php）への記述 ※“`“`の直前に記述する。

アラートメソッド

#window.alwrt メソッド

###目的
アラートの表記

###方法

“`script.js
window.alert (“ありがとう”); //シングルで囲っても良い
“`

window.alert()
引数でアラートに表示させる情報が渡ります
変数でも可能

ハンバーガーメニューのon/off

Quitta5
ハンバーガーメニュー　オンオフ

ボタンを2種類作り、オンでactiveというクラスをglobalnavクラスに与え、表示させる。
offの場合はactiveというクラスを取り除き、また、”.removeAttr(’style’)”で今回書き足したCSSを削除し、元の状態に戻る。

/*———html———*/

≡
×
/*———javascript———*/

jQuery(document).ready(function(){
$(‘#open’).on(‘click’,function(){
$(‘.globalnav’).addClass(‘active’);

$(‘.globalnav’).css(‘

JavaScript 基礎　

#実装する上での基礎知識

#####書き方は２通りある

①プラウザ上で検証から直接入力
②HTMLファイル内からスクリプトコードで囲んで呼び出す

“`index.html



“`

宮本さんjest導入 ~オブジェクト関数からclass構文への移行~

# 宮本さんjest導入の話

## 最初の壁

最初にjestの方に宮本さんのscriptをimport してとりあえずテスト回そうとしたら
動かないんですよね…
てか、オブジェクト関行importできまへんやん!
となりclass構文への移行を決意。

## 移行

とりあえずソースのせる

“`オブジェクト関数
loadDateUtils = function () {
var DateUtils = {};

// 今を返す
var _now = new Date();
var now = function(datetime) {
if(typeof datetime != ‘undefined’) {
_now = datetime;
}
return _now;
};
DateUtils.now = now;

// テキストから時間を抽出
DateUtils.parseTime = function(str) {
str = String(str || “”).toLowerCase()

libphonenumberで国際電話番号をバリデーション

今年もAdvent Calendarの時期なので、久しぶりに記事を書くことにしました。

今回は、海外の方向けの、問い合わせフォームを作成した際に、
国際電話番号をjavascriptで、バリデーションした際に色々調べたことを、
まとめたいと思います。

国際電話番号とは?

日本から海外の固定電話・携帯電話にかける場合、
相手の国番号を先頭に指定する必要があります。(日本の国番号は+81)

その国の国番号を含めた電話番号が、国際電話番号となります。
国際電話番号の決まりについては、[こちら](http://eedu.jp/blog/2015/02/14/call_philippines_from_japan/?gclid=Cj0KCQiAiZPvBRDZARIsAORkq7dOH-GCvvg4WYA5mdYDbN62086_gDX0FkRbuaIoqplB4-08aFQ_VYsaAoKvEALw_wcB)の記事が、とても参考になりました。

国際電話番号のバリデーション

最初は国番号を含んだ文字列を、正規表現で判定しようと思ったんですが、
世界各国

フロントエンドフレームワーク選定前に知っておくべき Angular の 6 つの問題点と、それでも Angular を選ぶ理由

~~[Angular #2 Advent Calendar 2019](https://qiita.com/advent-calendar/2019/angular-2) X 日目の記事です。~~ 界隈の方々にご迷惑がかかりそうでしたのでアドベントカレンダーへの参加は取りやめました。
私の Qiita 初投稿記事です。

Angular と React （と Vue.js）を比較する記事は検索すればいくらでも出てきますが、「いやいやそこじゃないんだよ」と感じる記事ばかりです。誰かの受け売りで「Angular は大規模開発に向いてる」みたいな適当なことを書くのは本当にやめてほしい。

そんなわけで、これからフロントエンドフレームワークを選ぶ方へ向けて、 Angular の問題点と、それでも Angular を選ぶ理由についてまとめてみました。

## (1) 6ヶ月ごとにメジャーバージョンアップ

普通に考えましょう。これは正気の沙汰ではありません。

### Angular 開発者の気持ちになってみよう
* 設計ミスしても短期間で取り消せる♪
* 実験的な機能も入れちゃえる♪

##

フロントエンドで音声データを扱うときの基礎知識

最近音声データを触ることが多かったので、基本的な用語の説明だけしていく。

## sampleRate
単位 : Hz
1秒間のデータを分割する数。
6000Hzだと、0.01秒ごとに分割。
この分割した1つ1つのデータをサンプリングと呼ぶ。
CDは44.1KHz。ChromeのStreamingも44.1KHz。

## bitDepth
単位 : bit
デフォルト : 16bit
サンプリングに対して与える情報量。
何bit与えるかを示す。

## channels

音をどの程度分けるか。多いほど立体感のある音が作れる。
1 なら モノラル, 2 なら ステレオ。
基本的には、音声なら 1, 音楽なら 2 以上。

## sampleRateを修正するJavaScript

48KHzを16KHz(LINEAR16)で保存するには、 `downSampleBuffer(buff, 48000, 16000)` で呼び出す。

“`javascript
export const downsampleBuffer = (buffer, sampleRate, outSampleR

HTMLと連携するアプリはUnityよりthree.jsのほうが相性がよかった話

Unity(WebGL)のオブジェクトを親のjavascriptから入力するアプリを作成していたが
https://structuralengine.github.io/FrameWebforJS
開発が進まなくって three.js に変えました

## Unity(WebGL)と親のjavascriptとの連携方法は以下の通りです。
https://docs.unity3d.com/ja/current/Manual/webgl-interactingwithbrowserscripting.html

こんな感じでjavascript と unity を連携させる

### Unity スクリプトから JavaScript 関数を呼び出す

プロジェクトでブラウザJavaScriptを使用する推奨方法は、JavaScriptソースをプロ

【React】JSXをcssで修飾するとき babel-plugin-react-html-attrs を使ってclassName属性を用いないようにする

## 前置き
JSXを利用している場合、class属性を利用することはできない。
これはclassキーワードがJavaScriptの予約語になっており、JavaScript のソースコード内利用できないため。

なので通常はclassNameとして次のように書く。

“`js:
import React from “react”;

export default (props) => ;
“`

## babel-plugin-react-html-attrsを入れてclassName属性を不使用とする

どうしてもclassName属性を使いたくない人向けにbabel-plugin-react-html-attrsを導入する。

“`
npm install –save-dev babel-plugin-react-html-attrs
“`
webpack.config.jsのoptionsの位置に追記する

“`webpack.config.js
loader: ‘babel-load

[JavaSctript]varとletの違いって何ですか?[変数のスコープ]

#JavaScriptの変数宣言について#
こんにちは！皆さんは変数を宣言したことはありますか？
私はあります！

JavaScriptで変数を宣言するときって

– var “`var foo“`
– let “`let foo“`
– const “`const foo“`
– 何もつけない “` foo “`

などの選択肢がありますよね。
constはその名前から「まあ、よくわかってないけど定数に使うっぽいな」ってなるけど、
じゃあvarとletって何が違うの、そもそも何者!?状態に陥りがちです。

結論から言うと、ほとんどの場合はletを使うべきです！
立ち位置的には、letはvarの問題点を改善したようなものです。

「ん、じゃあvarってなんのために存在するの？」
「varを使ってるサンプルコードいっぱい見るんだけど…」
なんて声が聞こえてきます。

それでは、歴史的な背景を踏まえて見ていきましょう！

#letとconstは後から追加された#
letとconstは初めからいたわけではありません。
ES2015（ES6)になってから追加されたものです！

Vue.jsでselectタグの初期値にオブジェクトを設定する際の注意

# オブジェクト型（数値、文字列、論理値などプリミティブではない型）をoptionの値に設定

　以下のように、オブジェクト型を選択肢に設定して、そのデフォルト値を「v-model」で指定することができます。
　例の場合は、「selectedInfo」に「code=2」の値を設定しています。

“`sample.vue

果物を選んでね

好きなだけ選べるよ

jQuery 基本その1 javascriptとの違い

javascriptライブラリの中で代表的なjQueryについて書きます。

# javascriptとの違い
タブの切替から比較紹介していきます。

## javascriptの場合
javascriptの場合だと前回の紹介文の様に長くなります。

```js:javascript
window.addEventListener("load", function() {
// タブのDOM要素を取得し、変数で定義
let tabs = document.getElementsByClassName("menu_item");
// tabsを配列に変換する
tabsAry = Array.prototype.slice.call(tabs);

// クラスの切り替えをtabSwitch関数で定義
function tabSwitch() {
// 全てのactiveクラスのうち、最初の要素を削除（"[0]は、最初の要素の意味"）
document.getElementsByClassName("active")[0].classList.re

権限のない一般ユーザーがRedmineのマイページのカレンダーを乗っ取った件

# 背景

[Redmine Advent Calendar 2019](https://adventar.org/calendars/4221)の第3日目の記事として「JavaScript」を利用して「権限のない一般ユーザーがRedmineのカレンダーを乗っ取った件」を投稿します。
(昨日はhanachinさんの「[agileware-jp/redmine-plugin orb実装詳解](https://hanachin.hateblo.jp/entry/2019/12/01/235823)」でした。)

元々Advent Calendarがクリスマスまでのカウントダウン用のカレンダーだそうです。[^1] 2019年、令和元年も今日を含めて後残り29日、クリスマスまでは残り23日になりました。
[^1]: https://ja.wikipedia.org/wiki/アドベントカレンダー

「Advent Calendar」イベント自体への参加が今回初めてで、Redmine Advent Calendarでどんな記事を書こうかと悩みましたが、「Red

元記事を表示

メモ 読んでも意味ない【React】react-router@v4でルーティングを書くときのちょっとした注意事項

ルーティングは次のファイルに書いているものとする。
/, /archives, /settings のパスにアクセスした時に表示されるコンポーネントをそれぞれ、Featured, Archives, Settings になるように設定している。

```js:
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Route } from "react-router-dom";
import Layout from "./pages/Layout";
import Featured from "./pages/Featured";
import Archives from "./pages/Archives";
import Settings from "./pages/Settings";

const app = document.getElementById('app');

ReactDOM.render(

元記事を表示

プログミラミング学習始めて６週間、感動した関数

プログラミングを学んで**２ヶ月**が経過しました。
主にHTML, CSS, Java Script, PHPの学習をしました。
学んだ事は山のようになるのですが、その中でも今回は個人的に驚いた関数をランキング形式で記載します。
初心者のただの忘備録です。

#ベスト３ PHPの日付取得
JSしか知らない時は、日付取得って結構大変なんだなと驚きました。
書いていたコードこちら。

```javascript
$(function() {
var now = new Date();
var y = now.getFullYear();
var m = now.getMonth() + 1;
var d = now.getDate();
var w = now.getDay();
var wd = ["日", "月", "火", "水", "木", "金", "土"];
const today_time=(y+"年"+m +"月"+d+"日"+"(" + wd[w] + ")");
console.log(today_time);
$("#today"

元記事を表示