- 1. 何でJavaScriptはsingleThreadを選んだんだろう。
- 2. Stripe Element でカード番号の入力フィールドを縦に並べたい
- 3. 【忘備録】JavaScriptできちんと日付を取得する
- 4. 【Node.js】promiseの使い方
- 5. Next.jsとtailwindを使ってダークモードをサクッと実装する
- 6. JavaScriptの基本文法
- 7. 【JavaScript】 海外Teck系YouTuberを真似てみた！(partⅢ) Task Tracker App | React JS
- 8. [React]フォーム入力の度にフォーカスが外れてしまうときに確認すべきこと2選
- 9. モダンJavascript基礎 分割代入を学んでコードの可読性を上げよう！
- 10. 【Rails】JSが読み込まれない時の対処法
- 11. Lodashを使って配列の差分を取得する
- 12. 【monaca/iOS】でカメラがクラッシュする原因
- 13. 【Node.js】promiseの非同期処理について
- 14. Reactの公式チュートリアルを進化させる（2）
- 15. モダンJavaScript基礎 Constの深掘り
- 16. Reactの公式チュートリアルを進化させる（1）
- 17. 完全未経験の学生がvue.jsでポートフォリオ作成した
- 18. JavaScript中級者がChrome拡張を作る実況
- 19. オンプレ環境で使えるDiscordの読み上げBotを作りました
- 20. ruby on rails 非同期いいね（編集中）
何でJavaScriptはsingleThreadを選んだんだろう。
疑問を抱いた時点はtypeScriptを勉強したところ読んでしまったある文章。
> ジャヴァスクリプトは単一スレッド（single-thread)で動作するため、できる限りreadFileSyncのような同期APIは使用を控えましょう。あれれ。それではJAVAのマルティスレッドとはどう違うのだろ。
—————————————
まずはjavaScriptから呼出があった場合を流れを探ってみましょう。
“`
console.log(‘a’);
setTimeout(() => console.log(‘c’));
console.log(‘b’);“`
結果はアルファベットから予想野通り ”a, “b”, “c”この呼出を始まりに行われる環境を見てみよう。
 を用いてカード番号を入力するフォームを生成する時、デフォルトではカード番号・有効期限・CVCの入力フィールドが横並びになってしまう。
– デザイン上、フィールドを縦に並べたい時にどのようにフォームを生成したら良いのか調べた。## 完成イメージ
## フォームの生成
– まずフォームの生成時は stripe.elements() の返り値からカード番号・有効期限・CVCを入力する各フィールドを create する。
– この時、 elements.create() を実行する時点で document 上に対象として selector で指定した element が存在している状態であることを確認すること。
– 今回の場合は `#c
【忘備録】JavaScriptできちんと日付を取得する
# 【忘備録】JavaScriptできちんと日付を取得する
getDateに +1するだけでは 月をまたぐ際に、32日となったりする
【正】
“`js
let date = new Date();
date.setDate(date.getDate() + 1);
“`【使用例】
今日から1週間を取得
“`js
let date = new Date();
for(let i = 0; i<7; i++){ date.setDate(date.getDate() + 1); console.log(date.getDate()); } ``` 一昨日 ```js let date = new Date(); date.setDate(date.getDate() - 2); ``` 明後日 ```js let date = new Date(); date.setDate(date.getDate() + 2); ``` 1週間後 ```js let date = new Date(); date.setDate(date.getDate(
【Node.js】promiseの使い方
#プログラミング勉強日記
2021年2月28日#基本的な書き方
promise処理を作るには任意の関数の中で`new Promise()`を返すのが基本となる。“`js
return new Promise(resolve) {
// 処理を記述する
}
“`“`js:具体例
function myFunction() {
return new Promise(function (resolve) {
resolve(“Hello World”);
})
}
“`#thenを使ったメソッドチェーン
promiseによる非同期処理の結果を取得するにはthenを使ったメソッドチェーンを使用することができる。“`js
// dataにpromiseの結果が格納されている
// resolve()に設定した文字列になる
myFunction().then(function(data) { console.log(data) })
“`“`:実行結果
Hello World
“`#promiseの並列処理
allメソッ
Next.jsとtailwindを使ってダークモードをサクッと実装する
## 初めに
最近、`Next.js`に`Tailwind CSS`で作成した個人ブログにダークモード機能を追加したので、その備忘録として。## Tailwindのダークモードを有効化する
[TailwindのV-2](https://blog.tailwindcss.com/tailwindcss-v2)からダークモードが組み込まれており、ダークモード時に指定の色に切り替えてくれるようになりました。
ダークモードを有効化するのは簡単で、`tailwind.config.js`の`darkMode`に`class`か`media`を指定するだけです。`media`を指定した場合は、OSの設定に基づいて、自動でdarkモードに切り替えてくれますが、今回はユーザーがページ上でON/OFFの切り替えが出来るようにしたいので、`class`を指定して、ダークモードを有効化させます。
詳細は[Tailwindのドキュメント](https://tailwindcss.com/docs/dark-mode)に記載されてます。
“`js:tailwind.config.js
module
JavaScriptの基本文法
#デイトラWeb制作コース中級編DAY1の学び
# 【この記事に書いてあること】
プログラミング学習27日目⏩
Web制作コース中級編DAY1?
学習時間:4時間6分⏳
学習内容:JavaScriptの基本文法①✏
学び?
・文字の出力
・変数
・定数
・文字の埋め込み
・関数
・条件分岐難易度が一気に上がった気がします！
楽しい！?#デイトラ【JavaScript】 海外Teck系YouTuberを真似てみた！(partⅢ) Task Tracker App | React JS#１，はじめに
この記事は、海外Teck系YouTuberの動画を参考に、同じプロジェクトを作成してみたものになります！簡単にですが、動画を通して学べた技術や知識をまとめました！
今回の完成品は、下記に載せています:bangbang:
#２，学んだこと
今回はさらに発展して、Reactのモジュール（**Route**や**Link**）なども使ってページ遷移も行いました！
**async** **await** の技術も使っているので、内容が盛り沢山でした:star:今回は、
① async await の使い方
② JSONサーバーをローカルの5000portに立ち上げて、そこにデータを保存する方法
③ フォーム画面から値を受け取る方法
④ **onClick**、 **onToggle**、 **onDelete**、 **onDoubleClick**、 **onChange**async await の考え方を理解していないと、終盤についていくのが大変でした:joy:
#３，参考動画
[
# 問題のコード と CodeSandbox
CodeSandbox:
“`javascript
import React from “react”;function App() {
const [inputValue, setInputValue] = React.useState(“”);const handleInput = (event) => {
ev
モダンJavascript基礎 分割代入を学んでコードの可読性を上げよう！
## はじめに
今回はES2015(ES6)で追加された分割代入について学んだことをまとめていこうと思います！
わかりにくいところや間違っているところがあったら、ご指摘お願いします！## 分割代入とは
まず分割代入について説明していきます。分割代入を簡単に説明すると,**オブジェクトからプロパティを取り出して変数に代入するもの**
です。
ちょっとイメージが湧きにくいですよね。コードで解説していきます。
“`javascript
const myProfile = {
name: “田中”,
age: 20,
};
“`
このようなオブジェクトがあるとします。そしてこのオブジェクトを使った変数を定義します。“`javascript
const myProfile = {
name: “田中”,
age: 20,
};const message1 = `私の名前は${myProfile.name}です。年齢は${myProfile.age}です。`;
“`
この変数message1の中身をconsole.logで見てみると
を利用すると配列の差分を簡単に取得することができます。## 準備
### インストール
npmの場合
“`
$ npm i -g npm
$ npm i –save lodash
“`yarnの場合
“`
$ yarn add lodash
“`### インポート
“`
import _ from “lodash”;
“`## 使い方
[_.differenceWith](https://lodash.com/docs/4.17.15#differenceWith)の第一引数に対象の配列、第二引数に比較対象の配列、第三引数に
【monaca/iOS】でカメラがクラッシュする原因
問題：input type=”file” accept=”image/*”で画像を取得するとき、カメラを起動しようとするとクラッシュする
状況：monacaでマークアップ言語とJavaScriptで開発 Cordovaバージョン10.0.0結論：クラッシュするのは、monacaのカメラプラグインを有効にしていなかったから。
monacaでオナ禁アプリを作ったのですが、App Store Connectに申請したところ
Apple『カメラを起動した時にクラッシュするぞ。それ直してから出直してこい』
とリジェクトされてしまいました。該当箇所は
“`html
“`で画像を取得して表示、ローカルストレージに保存するという機能です。PCだとFinderが呼び出されますが、iOSだとこの画面が出て3つのオプションから選べるという仕様になっています。
でJavaScriptの非同期処理について扱ったが、今回はNode.jsのpromiseの使い方をまとめる。#promiseとは
Node.jsのpromiseは、非同期処理を読みやすいコードで実装できる。
Node.jsでも使用されるJavaScriptでは、非同期処理のときにコールバック関数を使用する。だが、処理が複雑になるほどコールバック関数が入れ子になってしまい、コードの内容がわかりにくくなる。#Node.jsでpromiseを使う方法
まず、promiseをインストールする。“`
$ npm install promise
“`promiseの書き方は以下のようになる。
“`js:文法
// promiseパッケージを読み込む
var 変数 = require(‘promise’);変数(function (fulfilled, rejected) {
処理内容
}
Reactの公式チュートリアルを進化させる（2）
# はじめに
[Reactの公式チュートリアルを進化させる（1）](https://qiita.com/Jun-T/items/4dc7d2d068e064e8e33f)の続きです．
[React公式](https://ja.reactjs.org/tutorial/tutorial.html)から与えられた課題はこれでした．>まだ時間がある場合や、今回身につけた新しいスキルを練習してみたい場合に、あなたが挑戦できる改良のアイデアを以下にリストアップしています。後ろの方ほど難易度が上がります：
>1. 履歴内のそれぞれの着手の位置を (col, row) というフォーマットで表示する。
>2. 着手履歴のリスト中で現在選択されているアイテムをボールドにする。
>3. Board でマス目を並べる部分を、ハードコーディングではなく 2 つのループを使用するように書き換える。
>4. 着手履歴のリストを昇順・降順いずれでも並べかえられるよう、トグルボタンを追加する。
>5. どちらかが勝利した際に、勝利につながった 3 つのマス目をハイライトする。
>6. どちらも勝利しなかった場合
モダンJavaScript基礎 Constの深掘り
## はじめに
はじめまして！今現在、プログラミングを学習中のタイソンです。今回はjavascriptの基礎中の基礎であり、最も頻出する「const」についてまとめていこうと思います。## Constの基礎of基礎
constとは値の書き換え、または変数の再宣言ができない変数を宣言する方法です。書き方は以下の通りです。“`
const 変数名 = 変数に入れる値;
“`
値の書き換えや再宣言ができないので、以下のように使うとエラーが出てしまいます。“`
値の書き換えはできないconst str = ‘aiueo’
str = ‘kakikukeko’
“`
“`
変数の再宣言はできないconst str = ‘aiueo’
const str = ‘kakikukeko’
“`## オブジェクトをconstで定義する場合
前のチャプターで述べた通り、constで定義した変数は書き換えることはできません。
**しかしconstで定義したオブジェクトは値を変えることができてしまうのです！！**“`
const man = {
name: ‘田中
Reactの公式チュートリアルを進化させる（1）
# はじめに
[Reactの公式チュートリアル](https://ja.reactjs.org/tutorial/tutorial.html)では，三目並べゲームの実装方法が紹介されていますが，このページの最後にこんな記述があります．>まだ時間がある場合や、今回身につけた新しいスキルを練習してみたい場合に、あなたが挑戦できる改良のアイデアを以下にリストアップしています。後ろの方ほど難易度が上がります：
>1. 履歴内のそれぞれの着手の位置を (col, row) というフォーマットで表示する。
>2. 着手履歴のリスト中で現在選択されているアイテムをボールドにする。
>3. Board でマス目を並べる部分を、ハードコーディングではなく 2 つのループを使用するように書き換える。
>4. 着手履歴のリストを昇順・降順いずれでも並べかえられるよう、トグルボタンを追加する。
>5. どちらかが勝利した際に、勝利につながった 3 つのマス目をハイライトする。
>6. どちらも勝利しなかった場合、結果が引き分けになったというメッセージを表示する。やるしかないですね．
てことで，実装し
完全未経験の学生がvue.jsでポートフォリオ作成した
[Portfolio](https://key40121.github.io/portfolio/#/)
トップページ
まず最初に，この記事では技術的な部分にはあまり触れないです．単純に初学者が作成に至るまでに参考にしたリファレンスや方法をまとめるだけです．したがって当たり前ですが，ほとんどの方にとっては何の価値もない記事となっています．
[フロント未学習の大学生が1週間でVue.jsを使ったポートフォリオを作った話](https://qiita.com/p1ass/items/a01578b782f17f573510)
この記事に触発されて，自分もvue.jsでポートフォリオを作成しました．
他の動機として，普段の研究やバイトではpythonばかり使ってるので，web系の言語も習得したいなと思って始めました．ただ最初はDjangoを使
JavaScript中級者がChrome拡張を作る実況
# はじめに
本記事は，自称JavaScript中級者の私が初めてのChrome拡張を作る模様を実況したものとなります．実況なので，細かい解説は割と省いています．JavaScriptの基本的な文法を抑えてる人が「大体こんな流れでChrome拡張を作るんだ〜」ってわかるような，一歩踏み出すきっかけになればいいなと思います．
なお，本記事は実際に自分が作りながら平行して執筆しているため，話し言葉多め，リアリティが増し増しになっているかもシレマセン．ご容赦を．# Step0. 何を作るか決める
当然，何を作るかはっきりしなければ作るものも作れません．先へ進めません．
ここでは，「最近マーケティング等の分野の記事で~~多用~~乱用されているカタカナ言葉(横文字)をどうにかする拡張機能」を作ろうと思います．
~~イケてる感を出したいのか，「日本語でええやんけ！」って単語までカタカナになっていると，まぁ読みにくいこと．それか素直に全部英語で書いてくれ．「エビデンス」とか「根拠」でええやん．~~おっと愚痴がすべりました．
以前から構想はあったのですが，友人からも「それ欲しい」と言われたので重い腰
オンプレ環境で使えるDiscordの読み上げBotを作りました
# 事の発端
知り合いとDiscordサーバーでは土日に通話しながらゲームをするときに、通話の際テキストチャンネルで発言するのみで喋らない”聞き専”が結構います。
そこでチャットを読み上げてくれる「Shovel」というBotを導入しました。
しかし、土日の夜は非常に人が多いのか、ボイスチャットに呼ぼうとしても呼べない時が何度かあり、そこで自分たち専用のサーバーを用意する案が上がります。# Raspberry Piを入手
秋葉原に行って、Raspberry Pi4と電源などの一式を入手。
早速、以下の条件を満たす読み上げDiscord Botを探し始めます。– ラズパイ上で動く
– Dockerでいける(環境を汚したくないため)
– オンプレ環境で使える
– 完結している、クラウドサービスを使っていない(Cloud Text-to-Spe
ruby on rails 非同期いいね（編集中）
# アプリケーションの立ち上げ
“`ruby
% rails new favorite-app -d mysql
% cd favorite-app
% rails db:create
% rails g scaffold post title:string user_id:integer #postコントローラ作成
% rails g controller likes #likesコントローラ作成
% rails g model Like user_id:integer post_id:integer
“`# Gemfileの下部に以下を追記
“`ruby
gem ‘devise’
gem ‘font-awesome-sass’
“`# Gemfile編集後に実行
“`ruby
% bundle install
% rails g devise:install
% rails g devise user
% rails db:migrate
“`
#「application.css」を「applicati
