- 1. 多段階ソートを書きやすい記載で実装する
- 2. バージョン情報ソートができないと面接に落ちるので解答しとく
- 3. Emscriptenのインストール(Windows)
- 4. Winstonでログを出力する
- 5. レスポンシブデザイン対応（addClass, removeClass）
- 6. 【javascript】一行で書かないrange関数
- 7. stripeでサブスク決済。
- 8. Laravel 6.x 【JavaScript 】【jQuery】【 Laravel-mix】 a タグで POST 送信する方法
- 9. プロゲート【JavaScriptⅢ 学習コース】関数の基礎
- 10. Firebase で無料で作るハイスコアDB(2) : 課金・認証を考える
- 11. Javascript内でassetsフォルダの画像を参照する。
- 12. YouTubeAPIを使ってあるチャンネルの動画情報を新しい順に取得
- 13. 【JavaScript】プロミスチェーンをArray.reduceで処理する方法
- 14. 初回のuseEffectの処理を抑制する方法
- 15. オブジェクト指向と関数型プログラミング：関数型プログラミング編
- 16. mapを使って新しい配列を生成する
- 17. thisをつけないとundefinedが出てしまう件(javascript)
- 18. Javascriptのみで作るトップに戻るボタン(rails,haml)
- 19. Darkmode.jsの利用方法
- 20. プロゲート【JavaScript Ⅱ 学習コース】While文,for文,配列,オブジェクト
多段階ソートを書きやすい記載で実装する
やめ太郎先生のところで、lodash の多段階のソートが紹介されていました。
ワイ「なに！？ライブラリをラップするやと！？」 – Qiita
https://qiita.com/Yametaro/items/111ce26637d6a3c2e763“`js
const userList = [
{
name: ‘c’,
age: 20,
},
{
name: ‘b’,
age: 20,
},
{
name: ‘a’,
age: 20,
},
{
name: ‘c’,
age: 21,
},
];const sortedUserList = _.orderBy(userList, [‘name’, ‘age’], [‘asc’, ‘desc’])
console.log(sortedUserList)// [[object Object] {
// age: 20,
// name: “a”
// }, [object Object] {
// age: 20,
バージョン情報ソートができないと面接に落ちるので解答しとく
有名なrana_kualuさんが、Zennに投稿していらっしゃる記事から。
アルゴリズムのせいで面接に落ちた
https://zenn.dev/rana_kualu/articles/efd74e8525ccab6c8474rana_kualuさんは「不労所得で生きたい。」そうですので、Zennでは「￥サポートする」ができるみたいなので、みなさまヨロ。
そこにスタックオーバーフローの回答もリンクされています。
また、Zennで他の方の記事でもコード書いていらっしゃいました。
【Typescript】バージョン比較用関数について
https://zenn.dev/nekoniki/articles/c9c4584bc463e593cb94私も書いておきます。
こだわってみたのは、バージョン番号にアルファベットが付属しているときにその大文字小文字も比較しているところです。これは紹介した上記の回答でも考慮されてない気がします。動作確認はこちら。
https://jsbin.com/xofomudano/1/edit?html,js,consoleコードはこれ。
“
Emscriptenのインストール(Windows)
普段仕事でOpenCV.jsを使用しているのですが、OpenCV.jsのメモリの上限は決まっていて最大まで使用するとnew cv.Mat()などで、新たにメモリを確保する操作に失敗することがあります。
OpenCV.jsはEmscriptenでC++からJavaScriptに変換します。WasmMemoryでメモリの確保をしているのですが、これメモリ上限を上げる方法があったなーと思い、Emscriptenをたまに触ったりするのですが、インストール方法とか最初の一歩を結構忘れがちなので、メモで残しておきます。
# インストール方法
1 . emsdkのクローン
> git clone https://github.com/emscripten-core/emsdk.git
> cd emsdk2 . リポジトリの更新
> git pull
3 . emsdkのインストールのアクティベーション
> emsdk install latest
> emsdk activate latest4 . パスを通す
2通りあります。現在開いているターミナルでのみパスを有効にする
Winstonでログを出力する
## インストール
“`
npm i winston
npm i -D @types/winston
“`## 設定ファイル
“`ts:logger.ts
import * as winston from “winston”;export class Logger {
// クラス変数(this.~)・インスタンス変数の型宣言
private logger: winston.Logger;
private stage: string;// Loggerインスタンス作成時に設定する項目(インスタンス変数)
constructor(stage: string) {
this.stage = stage;
}public async initialize(): Promise
{
this.logger = winston.createLogger({
level: “info”,
format: winston.format.combine(
winst
レスポンシブデザイン対応（addClass, removeClass）
“`
// リロード時
$(function() {
// ウィンドウサイズ768px以下の場合、クラスを削除
if (window.matchMedia( ‘(max-width: 768px)’ ).matches) {
$(function(){
$(‘.tabs__content’).removeClass(‘order-last’);
});
//768px以上の場合なにもしない
} else {
};
});
“`
“`
// リサイズ時
$(window).resize(function(){
let x = $(window).width();
let y = 768;
if (x <= y) { $('.tabs__content').removeClass('order-last'); } else { $('.tabs').addClass('order-last'); } }); ```
【javascript】一行で書かないrange関数
ワンライナー以外の記述をしたかった。
“`javascript:
const range = (from, to, step) => {
if (Number.isFinite(from) === false) from = 0;
if (Number.isFinite(to) === false) to = 0;
if (Number.isFinite(step) === false || step < 1) step = 1; if (from === to) return [to]; const result = new Array(); if (from < to) { for (; from <= to; from += step) result.push(from); } else { for (; from >= to; from -= step) result.push(from);
}
return result;
};console.log( range() ); //[0]
console.log( range(5
stripeでサブスク決済。
stripeでサブスク決済を作成しました。
作成にあたって住所（請求書）の部分が制作するに困っている方が
いるかも知れないということでコードを抜粋して記載します。
因みにnameはファーストネームとラストネームに分けて渡すことは
可能だったと思います。“`javascript:js側
const { paymentMethod, error } = await stripe.createPaymentMethod({
type: ‘card’,
card: cardElement,
billing_details: {
name: last_name + ” ” + first_name,
email: email,
phone: phone,
ad
Laravel 6.x 【JavaScript 】【jQuery】【 Laravel-mix】 a タグで POST 送信する方法
#制作環境
Windows 10
Laravel : 6.18.35
Laravel/ui : 1.0
Laravel-mix : 5.0.1
jQuery : 3.2
Bootstrap : 4.0.0
MDBootstrap : 4.19.1
chart.js : 2.9.3
XAMPP
PHP : 7.4.3
Visual Studio Code#はじめに
この記事はプログラミングをはじめたばかりの素人が、できたことをメモするのに利用しています。
内容には誤りがあるかもしれません。機能の確認のみに特化しているので、必要最低限の記述しかしていません。
#コントローラの作成
Laravelのプロジェクトのディレクトリでターミナルを起動し、以下を実行してください。
“`PHP
php artisan make:controller PostController
“`処理が完了したら、作成された`PostController.php`を開き、以下のように記述してください。
“`PHP:PostController.php
namespace App\Http
プロゲート【JavaScriptⅢ 学習コース】関数の基礎
# prorate:JavaScript 学習コース Ⅲ
## 関数
“`javascript// 関数の定義の仕方
const 定数名 = function(引数){
// まとめたい処理
};// 例
const introduce = function(){
console.log(“こんにちは”);
console.log(“私はにんじゃわんこです”);
};introduce(値); // 関数の呼び出し
// アロー関数 ES6から導入された書き方
function() = () =>“`
“`javascript
// 引数を使った例
const introduce = function(name){
console.log(“こんにちは”);
console.log(`私は${name}です`);
};introduce(“ニンジャワンコ”);
introduce(“ひつじ仙人”);“`
### 複数の引数を受け取る関数の呼び出し
“`javascript
const introduce = funct
Firebase で無料で作るハイスコアDB(2) : 課金・認証を考える
## 前回までの砂漠のひつじ
無料プログラム学習用ピコピコゲーム[砂漠のひつじ](https://kaku3.github.io/the-sheep-in-the-desert/)を作成しつつ、その過程を記事にしている。
現在はハイスコア実装編で、DBをfirebaseに選定し実装を行っている最中となる。## 課金に関するあれこれ
読み取り、書き込みで課金が発生。
Spackプランの無料枠は以下。|処理 |件数 |
|—|—|
|書き込み |2万/日 |
|読み取り |5万/日 |「回数」ではなく「件数」っぽいので注意。
ハイスコアテーブルという性質上、上位のスコアとしての書き込みは極めて少ないハズ。
そこで、Functionsを利用して、**『書き込みイベント時に上位レコードを集計して1レコードにまとめる処理』**を作りたかったが、**SparkプランではFunctionsが利用できなくなっていた**ので断念した。
※挫折気味のサンプルコードはリポジトリに一応コミットしておいた。現状、20件程のダミーレコードを用いて少し開発してい
Javascript内でassetsフォルダの画像を参照する。
タイトルの通りですが、Javascript内でassetsフォルダの画像を参照するときのパスの書き方についてです。
現時点でとりあえず分かったことを記録しておきます。## 結論
####imagesは抜きでパスを書く
現状として該当アプリケーションのファイル階層は以下のようになっています。
“app/assets/images/hoge.png“
そしてJavascriptファイル内で参照するときは以下のように記述します。
“/assets/hoge.png“このようにassetsの下の階層にあるimagesを抜いて記述をすることで参照ができるようになります。
##最後に
imagesを抜くことで参照ができるということはわかりましたが、なぜ抜くのかがわかっていません。
わかり次第追記していこうと思います！！
(もし、わかる方や参考記事等知っている方いましたら教えていただけると嬉しいです:blush:)### 参考記事
[Ruby on Rails] JavaScript や CSS ファイル内で画像を読み込むときのパス(Path)の指定方法
YouTubeAPIを使ってあるチャンネルの動画情報を新しい順に取得
#作ったもの
ばっちり新しい順に動画リストを取得できました。
すみません、個人の趣味が入ってしまうので何を取ったかは塗らせていただいています。
限定公開のものではないのでたぶん大丈夫ｗ#何故やるのか
今回お試しで趣味のチャンネルで情報を取れるかをやってみましたが、
実は業務に生かそうとしています。
動画のアップロード情報をメールで受け取って、YouTubeの別のお仕事に使っていました。
しかし、**8月あたりに仕様変更**でメールが送られなくなったので、
自動で何とか情報を取得できないかと考えていてちょうどよい機会になりました。アウトプット先が何で平文のメッセージになっているのかというと、
ただ単に**きれいに送る方法がわからなかった**からです！
業務では自分のTeamsに綺麗に送れるようにしたいところです。#気
【JavaScript】プロミスチェーンをArray.reduceで処理する方法
# はじめに
配列をループしながら、順番に非同期処理を行いたい…
単純に`for`でループすればなんのことはないのですが、Arrayメソッドでもぜひやってみたい…
# 要求
– 音声ファイルが配列に入っている
– 再生のための`audioPlay()`メソッドは`Promise`を返す
– 音声ファイルを再生し、終わったら自動で次のトラックへ
– 最後まで再生したら、終了する“`javascript:音声データ
const audioDatas = [
‘https://otologic.jp/sounds/jing/pre/mei%20kara%20mei%20switch1.mp3’,
‘https://otologic.jp/sounds/jing/pre/pastel%20color1.mp3’,
‘https://otologic.jp/sounds/jing/pre/yattaze!2.mp3’,
‘https://otologic.jp/sounds/jing/pre/birdland1.mp3’,
‘https://otol
初回のuseEffectの処理を抑制する方法
普段useEffect()を使っていて、「初回だけ処理を走らせたくない」みたいなケースが結構あると思います。
今回はそれを抑制する方法と、custom Hookの作り方を紹介します。### コード
具体的な方法としては、**useRefで指定した値が初回レンダリングが終わるまではcurrentに入らない**ことを利用して実現します。“`react
import React, {useState, useRef, useEffect} from ‘react’;export default function App() {
const [click, setClick] = useState(false);
const [clicked, setClicked] = useState(false);const initialRender = useRef(true);
useEffect(() => {
if(initialRender.current) {
initialRender.current = false;
オブジェクト指向と関数型プログラミング：関数型プログラミング編
オブジェクト指向プログラミングObject Oriented Programming (以下OOP), 関数型プログラミングFunctional Programming (FP)のコンセプトを紹介します．どっちがいいって訳はなく、どっちも超頭いい先人たちが思いついたアイデアなので知っていて損は無いし、何なら両方使っちゃえばって感じです．
考え方の紹介なのでコードは（あんまり）無いです．長くなってしまったので今回は関数型プログラミングを主に扱います．どうせオブジェクト指向はいろいろ記事出てるし．
## なんでこんなこと考えるのさ？
OOP、FPはプログラムを整理する手法、つまり考え方の１つです．
そのためこれら以外の方法でプログラムを書いても実行できますが、何も計画なしでコードを書き続けるとそのうち管理が大変になったり、修正に大変な労力を必要とするクソコードになってしまうかもしれません（いわゆるスパゲッティコードと呼ばれる状態ですね）．
{
NEW_LISTS[index] = item*item;
})console.log(NEW_LISTS); // [1, 4, 9, 16, 25, 36]
“`
こういった操作がしたい時…“`javascript
const list = [1,2,3,4,5,6];const newList = list.map(item => {
return item*item
})console.log(newList); // [1, 4, 9, 16, 25, 36]
“`これで完結！
thisをつけないとundefinedが出てしまう件(javascript)
苗字と名前をconsoleで出力するクラス(設計図)を定義して
それをインスタンス化(製造)した場合下記のコードだとundefinedが出る“`javascript
const Member = function (firstName,lastName) {
firstName = firstName;
lastName = lastName;
};
const women = new Member(‘天王寺’,’璃奈’);
console.log(women.firstName +’ ‘ + women.lastName);
“`——————
——————-これにthisを付与すると名前を出力してくれる。
これが
Javascriptのみで作るトップに戻るボタン(rails,haml)
## ■ はじめに
Javascriptのみで作るトップに戻るボタンについて記事にしました。
この記事で得る内容は以下の通りです。・Javascriptの基礎知識が増える
・jQueryに依存せず、Javascriptを使ったトップに戻るボタンの作り方が理解できる様になる・参考にさせて頂いたサイト・動画
→ [JSでscrollしたら◯◯する！スクロールに紐づかせて処理をしましょう！](https://www.youtube.com/watch?v=_agZ_AP6W44&ab_channel=%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89%E3%83%81%E3%83%A3%E3%83%B3%E3%83%8D%E3%83%AB-%E5%9F%BA%E7%A4%8E%E3%81%8B%E3%82%89%E5%BF%9C%E7%94%A8%E3%81%BE%E3%81%A7-%E6%AD%A6%E7%94%B0%E4%B8%80%E7%9C%9F)
→[【脱jQuery】Javascriptのみでト
Darkmode.jsの利用方法
皆さんこんにちは！本日は「Darkmode.js」についてご紹介していきたいと思います。
公式のドキュメントに沿って紹介を進めていきますので、下記のリンクを参照しながらご覧ください！
Darkmode.jsのURL: https://darkmodejs.learn.uno/###下記の順で解説していきます
– Darkmode.jsとは何か？
– 実装方法
– オプションの解説それでは早速いってみましょう！！
#Darkmode.jsとは？
Darkmode.jsは簡単に「ダークモード」の実装ができるJavaScriptのライブラリです。近年TwitterやInstagramに限らず、モダンなアプリケーションにはほぼ確実に実装されているダークモード。
目に強い光が送り込まれないので、深夜帯にスマホ画面を見ていても睡眠に支障が出難くていいですよね。「アプリケーションを作ったはいいけど、ダークモード入れたい。でも難しそう…」
そう言った方でも簡単に実装できる内容になっていますので、ご安心ください！#実装方法
それでは早速実装していきましょう。
まずは簡単なhtm
プロゲート【JavaScript Ⅱ 学習コース】While文,for文,配列,オブジェクト
# prorate:JavaScript 学習コース II
## while文“`javascript
while (条件) {
処理;
} // セミコロン不要
“`“`javascript
// 変数numberを定義
let number= 1;// while文
while(number <= 100){ console.log(number); number += 1; //1を足して繰り返し101にfalseになったところでストップ } ``` ## for文 ```javascript for (変数の定義;条件式;変数の更新) { 処理; } // セミコロン不要 number ++ //number += 1を省略 number -- // number -= 1を省略 ``` ```javascript for (let number = 1; number <= 100; number ++){ console.log(number); } ``` ### 3の倍数のときは「3の倍数です」と出力する ``
