- 1. Basic認証の領域へプリフライトでリクエストしてハマった
- 2. 入力された値を大文字で表示したい
- 3. 簡素なtodoリストをjavascriptで作る
- 4. jQueryでonChange属性にJavaScriptコードを埋め込む
- 5. Vue.jsでファイル名に連番を付けていく方法
- 6. 【個人開発】ゲージの画像を作るサービスをリリースした
- 7. FirebaseとCircleCIを用いたWebアプリ開発でproductionとstagingを分ける
- 8. 関数式と関数宣言の違い
- 9. キモいけどすごいUnicode
- 10. Javascript 覚書
- 11. vue cliでmixinを作成し、インポートする方法
- 12. Web コンソールヘルパーのMDNを読んで勉強してみた
- 13. JavaScript と HTML を使って「感染を封じこめる」を可視化してみた
- 14. vue cliのプロジェクトにaxiosを読み込む方法
- 15. Node.js (TypeScript) におけるキャッシュの実装方法とその戦略
- 16. [開発]javascriptフレームワーク比較
- 17. 180日でWeb開発者になる方法(コンピューターサイエンスの学位なしで)
- 18. JavaScriptを書いてGitHub Actionsのハッカソンに参加しよう
- 19. スクロールフェードインをjQuery無しで
- 20. 魔法JS☆あれい 第3話「もうsortもreverseも怖くない」
Basic認証の領域へプリフライトでリクエストしてハマった
# 概要
CORS（クロス オリジン リソース シェアリング）となるリクエストを出したのにうまくレスポンスが戻らない。こんな時、プリフライトという仕組みに悩まされたエンジニアも多いでしょう。私もそんなエンジニアの１人でしたが、もう克服したものだと思っていました。
先日、Basic認証下の領域にあるJSONファイルについて、CORSで取得する必要がありました。まぁいつものプリフライトかと思い、過去の経験から適切な設定をしたリクエストを投げたのですが、401エラーのみが戻りうまくいきません。
手元でサーバーサイドも再現させたところ、Basic認証とプリフライトの相性の悪さを知ることができたので、共有したいと思います。## 前提
少々前置きが長くなるが、今回の問題を理解するためには前提知識が必要となります。わかっている方は飛ばしてください。
### Chromeでプリフライト リクエストの観察
標準では、Inspectを使ってもプリフライト リクエストは隠されていて見ることはできません。以下にアクセスして、Out of blink CORS を Disabled に設定する必要があります
入力された値を大文字で表示したい
## JavascriptのtoUpperCase();
$(‘#abc’).keyup(function(){
this.value = this.value.toUpperCase()
});『テスト』と打とうとすると。
『Tテスト』になる。## text-transform: uppercase;
解決
簡素なtodoリストをjavascriptで作る
# はじめに
こんにちは。javascript初学者のたけしです。
javascriptで自分なりにtodoリストを作成したので、備忘録とアウトプットを兼ねて投稿します。
全てのコードを自分でググりながら書いたので、わかりにくい箇所やもっと良いやり方があるかもしれませんが私と同じような初学者の方の参考になれば幸いです。##作成の流れ
まずはtodoリストに追加したい機能を洗い出していきました。
機能の洗い出しの方法は前回私が投稿した記事を参考にして頂ければと思います。
「[JavaScript初学者の私がFizzBuzzアプリを自作して学んだこと](https://qiita.com/takeshi_104/items/b392418587fa91c9db39)」**今回私が洗い出した機能**
・入力された値の読み取り
・追加ボタンを押すことで入力された内容を追加する
・追加した内容にボタンを追加する(作業中・完了ボタンのことです)
・作業中・完了をボタンを押すことで切り替える
・ラジオボタンを押すことでリストの表示を切り替える
・削除ボタンを押すことでリストから削除する
・入
jQueryでonChange属性にJavaScriptコードを埋め込む
# こんな経験ありませんか？
ローコード開発を行っていて「基盤の制約により入力値の変更時イベントが設定できない」こんな経験ありませんか？
今回は「jQueryでonChange属性にJavaScriptコードを埋め込む」方法を紹介します。# 方法
画面の初期表示時にクライアントサイドJavaScriptにて、以下のコードを実行します。“`js
$(‘input[name=”%任意のname値%”]’).on(‘change’,function(){
// %任意のJavaScriptコード%
});
“`# 結果
これで任意の画面項目の入力値の変更時イベントが設定できます。
その他のイベント属性にも応用できると思いますので、試してみてください。
Vue.jsでファイル名に連番を付けていく方法
vue-awesome-swiperを使うときにファイル名をバラバラにせず、連番にすればスッキリできるのではと思いそのやり方をまとめてみました。
開発環境はNuxt.js + Vuetifyにvue-awesome-swiperを使った状態です。
[Nuxt.jsにvue-awesome-swiperを導入し、カルーセルを表示させてみる](https://qiita.com/hiroyukiwk/items/4ead9e150579363d50bb)
[【Nuxt.js】imgファイルの指定方法について](https://qiita.com/hiroyukiwk/items/a26e767d193ef8d9155b)
[【Nuxt.js】Universalモードで「window is not defined」エラーが出たときの対処法](https://qiita.com/hiroyukiwk/items/a3ea08bc50e15384f9bb)# 変数を宣言する
“`javascript
const items = []
“`# ループを作る
“`javascr
【個人開発】ゲージの画像を作るサービスをリリースした
個人開発のサービス [まいゲージ](https://www.cappps.com)をリリースしました。
ゲージの画像を作るサービスです。
#作るときに考えたこと
やっぱり、無名の人が頑張っても人気にはならないわけで、有名にするには**SNSを使う**必要があります。
ツイートボタンとかを用意して、投稿されたツイートがクリックされるように、twitter cardを使いました。
もともと、ダウンロードさせて自分で画像添付にしようかと思ったけど、手間がかかって途中で諦める人が多くなるので却下。
あと、「リンクが広告臭いのがいやだ」って消される可能性もあるし、、#Twitterカードの失敗
Twitterカードのメタタグをつけて、何回ツイートしても、Twitterカードがでませんでした。
理由はカードがBASE64に対応をしていなかった
FirebaseとCircleCIを用いたWebアプリ開発でproductionとstagingを分ける
# 初めに
筆者は趣味で個人開発してるだけの学生なので、いわゆる実務におけるstagingとはちょっとニュアンスが違うかもしれません.
firebaseを用いた個人開発で、｢本番環境と限りなく同じ環境だが、本番環境とは分離されているもの｣くらいの感覚です.## 背景
– Vue.jsを用いたWebアプリ(Vue.jsに限った話では無いと思うが念の為)
– FirebaseのFirestoreをDBとして用い、Firebase上にHostingがしたい.
– CI/CDにはCircleCIを用いる.## やりたいこと
– Production環境とStaging環境で接続するDBやHosting先をいい感じに分けてほしい.## ざっくりとした方針
– Production環境とStaging環境でそもそもFirebase上のプロジェクトを分離し、prodcutionブランチにpushされたときはProduction環境に、
StagingブランチにpushされたときはStaging環境に接続するように設定する．
– Production環境とStaging環境の両方のAPIキ
関数式と関数宣言の違い
#はじめに
関数を定義する際、
JavaScriptでは、関数宣言または関数式を使用します。今回は、この２つの違いについて、
説明していきます。#関数式、関数宣言
まずは、２つの記述方法について、
説明します。###関数宣言…
記述例↓↓
“`js
function color(){
document.write( ‘white’ );
}color(); //whiteと表示
“`関数宣言は、「function 関数名」で関数を定義して、
「関数名（）」で関数を呼び出す方法です。###関数式について..
記述例↓↓
“`js
let introduce = function () {
document.write( “white” );
}introduce(); //whiteと表示
“`関数式は、
関数を間接的に使うやり方です。
変数に関数を値として代入し、後からその変数を呼び出す方法です。#本題の、違いについて…
上記２つの大きな違いは、
2点あります。1.「無名関数」であるか? ないか?
2.「
キモいけどすごいUnicode
#この記事は
Unicode…本当は触りたくない領域だったので無視してきたのですが、ひょんなことから調べざるを得なかったので調べた内容をまとめたものです。#すごキモい
Unicodeは非英語圏の人たちがテクノロジーへの市民権を得る足掛かりを作ってくれました。
Unicodeはできる限り少ないリソースで多くの言語に対応してくれています。Unicodeは調べるほどにやっぱりキモいです。直感的に分かることあんまないし。
でもこのキモさは既存の枠組みの中で試行錯誤した凄みを感じるキモさだと分かってきます。#Unicodeの仕組み
Unicode以前から使われてきたASCIIコードは16進数で00~FFの16*16=256通りが最大。
英語圏の人たちにとってはそれで何ら問題ないのですが、アルファベット以外の記号を
使いたいというニーズに対してASCIIでは応えられないものがありました。Unicodeの基本的な考え方は、16進数で00~FFの16*16=256通りを1単位として、
これを2単位並べることで256*256=65536通りの文字を表すことにしましょうというものです。
Javascript 覚書
## JavascriptでTinderのスワイプ自動でやるための基本操作
1. 基本
– くり返し系
– setIntervalとsetTimeout“`javascript:hoge.js
function hoge(){
console.log(‘hoge’);
}setInterval(hoge(), 1000)
// 1000m秒間隔でhoge()を永遠にクリア返すsetTimeout(hoge(), 1000)
// 1000m秒間隔でhoge()を一回くり返す
“`
– 要素取得系（セレクタ）“`javascript:hoge.js
Document.getElementBy~
//~はIDとかclassNameとか
Document.querySelector(“~”)
//JqueryみたいにかけるgetAttribute
//アトリビュート指定。（例：aria-label=”いいね”のaria-label部分とか）//Jqueryが埋め込まれてるサイトであれば、
$(”)
//でいろんな要素取れる
//http
vue cliでmixinを作成し、インポートする方法
備忘録です。
### したいこと
・vue cliでmixinを作成し、componentファイルで使いたい同じ動作を複数箇所で使用したい場合は、mixinが便利です。SCSS/SASSで使うmixinと同じ役割です。
### Step 1: mixinはjsファイルに書く
mixinはvueファイルではなく、jsファイルに書きます。ここではmyFirstMixin.jsという名前のファイルを作りました。
補足：**src** のフォルダー内に **mixinフォルダー** を作成し、その中に **mixinを書いたjsファイルたち** を保存しておくと管理しやすそうです。
書き方はVueファイルで作ったコンポーネントの、scriptタグの中身と一緒です。ここではcomputedを使ったmixinを書いています。mixinしたい内容を書きます。
#### myFirstMixin.jsファイル内
“`
export default {
computed: {
filteredBlogs: function(){
ret
Web コンソールヘルパーのMDNを読んで勉強してみた
[Web コンソールヘルパー – 開発ツール | MDN](https://developer.mozilla.org/ja/docs/Tools/Web_Console/Helpers)
ただこちらのリンクを読んで試してみただけの投稿になります。リンク先に書いてある以上のことはやっていないので、リンクを見た方が早いです、よろしくお願いします。
最新のchromeかfirefoxで試しています。—
# `$(selector, element)`
`document.querySelector()` と同等
# `$$(selector, element)`
document.querySelectorAll() と
JavaScript と HTML を使って「感染を封じこめる」を可視化してみた
プログラマとして、なにかできることはないのか、、、。
リアルなウイルスに関して、無力感を感じていたところに、以下のエントリに出会った。https://www.washingtonpost.com/graphics/2020/world/corona-simulator/
なるほど、こうやって可視化することで、パニックにならず冷静な対応をすることができるわけか、、、
このようなコードなら、プログラマには朝飯前？ （これは、普段からあまり表には出てこない、プログラマという職業が、みなさまのお役にたてるチャンスかもしれないじゃないですか。）
そして、半日後にできたコードがこちらです。お納めください。
## 「感染を封じ込める」を可視化する
「START」ボタンを押すと、入力した条件で、どのくらい感染を封じ込められるのか（広
vue cliのプロジェクトにaxiosを読み込む方法
備忘録です。
### したいこと
・vue cliのプロジェクトでHTTP Requestを行いたい### 方法
vue.jsにはHTTP Requestをする機能が備わっていないので、HTTP RequestができるようJavascriptのライブラリを読み込む必要があります。簡単にHTTP Requestを行えることから[axios](https://github.com/axios/axios)が多くの人に好まれているようです。まずはaxiosをプロジェクトにインストールします。
#### ステップ1
プロジェクト内のターミナルからaxiosをインストール?
(npmはすでにインストール済みと仮定します)
補足：Visual Studio Codeを使用している場合、プロジェクトファイルを開いた状態で`表示 ? ターミナル`に行くと、ターミナルが開けます。私の場合は、`vuejs`というファイルがプロジェクトファイルなので、そのなかにaxiosをインストールします。“`
USER-no-MacBook-Air-2:vuejs user$ npm instal
Node.js (TypeScript) におけるキャッシュの実装方法とその戦略
現代の Web アプリケーションにおいて、キャッシュはもはや不可欠と言っていいくらい需要な技術でしょう。アプリケーションの負荷を軽減し、ユーザーへのレスポンスを高めます。
本記事では Node.js (Typescript) を使用したバックエンド API を実装する際に、どのようなキャッシュのテクニックが使えるか解説します。※なお、説明の簡略化のためエラーハンドリングなどは省略しています。
# Node.js を使用した非同期バッチパターンとキャッシュ機構
本章では以下の３つの実装パターンを比較し、Node.js を使用したキャッシュを実装していきます。
1. キャッシュのないサンプルアプリケーション
2. 非同期バッチ処理パターン
3. キャッシュパターン## 1. キャッシュのないサンプルアプリケーショ
[開発]javascriptフレームワーク比較
#■ 【JavaScriptフレームワーク】
| No | JavaScriptフレームワーク | 開発 | 公開年 | バージョン(確認日時) | 概要 |
|—-|———————————————|————————–|——–|———————-|——————————————————-|
| 1 | [Angular](https://angular.jp/) | Google及びコミュニティ | 2016年 | 8.2.9(2019.12) | モダンなWebアプリのための機能を多く標準で備えています |
| 2 | [AngularJS](https://ang
180日でWeb開発者になる方法(コンピューターサイエンスの学位なしで)
>こちらの記事は、[Indrek Lasn](https://medium.com/@indreklasn) 氏により2019年10月に公開された『 [Become a Web Developer in 180 Days (Without a CS Degree)](https://medium.com/better-programming/become-a-web-developer-in-180-days-without-cs-degree-e869395972e1) 』の和訳です。
本記事は原著者から許可を得た上で記事を公開しています。幾つものプログラミング言語、何百ものフレームワーク、何千ものライブラリが存在するなか、ウェブ開発の世界への明確な道筋は存在しません。どのような順番で、どのようなことを学べば良いのでしょうか？
私は独学から始めたプログラマーで、これまで様々なスタートアップやスイスの大手銀行などの大企業でシニアエンジニアとして働いてきました。ここでは、私が学んできたことと、その知識を活用する方法について説明します。どんな人でもWeb開発者になれます。大事なのは粘
JavaScriptを書いてGitHub Actionsのハッカソンに参加しよう
# はじめに
[GitHub Actions](https://github.co.jp/features/actions)とは[CircleCi](https://circleci.com/ja/)や[Jenkins](https://jenkins.io/)のような**継続的インテグレーション**をGitHub内で行うことができるサービスです。これを使うと外部サービスとの連携を行わずに自動ビルド・デプロイといった設定を組むことができます。
そして今回の内容ですが、実は**3/5~3/31**にかけてこのGitHub Actionsのハッカソンが開催されています。参加方法は、じぶんのGitHubレポジトリに`action.yml`を用意して何かしら動作するGitHub Actionsを用意して、[ここのエントリーページ](https://githubhackathon.com/)にアクセスして提出します。# GitHub Actionsってどうやって作るの？
おそらく多くの方がこのGitHub Actionsを作成する方法にハードルを感じるような気がします。実際私も同じく難しそう
スクロールフェードインをjQuery無しで
#はじめに
jQuery使わず、フェードイン実装。いつでも見れるようにメモ的な感じでQiitaに残してます。“`main.js
window.onscroll = function(){
function fadeIn(el, duration) {
var node = document.getElementById(el);
// display: noneでないときは何もしない
if (getComputedStyle(node).display !== ‘none’) {
return;
}else {
node.style.display = ‘block’;
}
//opacityの操作
node.style.opacity = 0;
var start = performance.now();
requestAnimationFrame(function tick(timestamp) {
// イージング計算式（linear）
var ea
魔法JS☆あれい 第3話「もうsortもreverseも怖くない」
登場人物
丹生（にゅう）あれい
魔法少女「魔法（マジカル）JS（女子小学生）☆あれい」として活動中。イテレー太
正体不明の魔法生物。* [第1話「popでpushした、ような……」](https://qiita.com/8amjp/items/e44e707ccc8c95b4a40d)
* [第2話「shiftはとってもunshiftって」](https://qiita.com/8amjp/items/3fc1b2defd28ba1c2df3)## sort()
イテレー太「あれい、状況説明をサボるけど、今戦闘の真っ最中だよ！」
あれい「ついにサボるとか言い出したなこの駄犬」
イ「そしていつものように、僕が魔法世界から召喚したデータを、あれいの配列魔法を使って、敵の弱点に合わせた値に変換して`return`する事で、ダメージを与えて敵を倒してよ！」
あ「そこだけはセリフが説明的なんだよな」
イ「さて、今回僕が魔法世界から召喚したデータは……これだよ！」“`
items = [
{ name: ‘越前おろしそば’, price: 650 },
{ name:
