- 1. 変数Aにid属性値hogeを代入する
- 1.1. 上記ソースコードの意味
- 1.1.1. まとめ
- 1.1.2. 新人が、ほぼ一人で、PC専用だったWebサービスをタブレット/スマホ対応した話
- 1.1.3. nuxt.js の header に出てくるCSSを削除してページのサイズを小さくする
- 1.1.4. JavaScript（学習記録）
- 1.1.5. Gatsby カテゴリ一覧の作り方
- 1.1.6. turbolinksはjsにとって”良薬口に苦し”だった話
- 1.1.7. Vue.jsの始め方②(classのデータバインディング)
- 1.1.8. 【Nuxt.js】axios導入編：かんたん・お手軽API通信
- 1.1.9. JavaScriptの条件分岐を簡単に理解する方法
- 1.1.10. jquery スクロールでフェードイン、フェードアウトメモ
- 1.1.11. Visual Studio Code インストール JavaScript / VBScript編
- 1.1.12. Chromeの拡張機能を2つ使うだけでブラウザの操作を自動化！？
- 1.1.13. Github ActionsでeslintとJestを実行するworkflow
- 1.1. 上記ソースコードの意味
JavaScriptで実装してみるQRコードジェネレータ
[「有限体のプログラミング」](https://qiita.com/bellbind/items/5636c99be7ed8d7eaaf1)での[応用例](https://qiita.com/bellbind/items/b85fe5f5055fc9d42472)として、[リードソロモン符号](https://ja.wikipedia.org/wiki/%E3%83%AA%E3%83%BC%E3%83%89%E3%83%BB%E3%82%BD%E3%83%AD%E3%83%A2%E3%83%B3%E7%AC%A6%E5%8F%B7)と[BCH符号](https://ja.wikipedia.org/wiki/BCH%E7%AC%A6%E5%8F%B7)のしくみを取り上げました。
その中では、このリードソロモン符号とBCH符号を両方使っている例として、[QRコード](https://ja.wikipedia.org/wiki/QR%E3%82%B3%E3%83%BC%E3%83%89)に触れました。
Fetchを使ってポケモンのデータを取得してみた
こんにちは、初めての投稿です。現在Javascriptを学習しているので、今まで学んだことを備忘録として、かつアウトプットとしてQiitaにあげていこうと思います。
まだ理解が浅い部分もあるので、修正点があれば是非コメントお願いします:pray:また、これから投稿していく記事はあくまで備忘録であり、細かい解説などをしていくものではありませんので、そこはご了承ください:bow:
#今回学んだことについて
今回は非同期通信の学習の一つとしてfetchメソッドについて学びました。fetchメソッドとは引数にWebAPIのURLを渡して外部とデータのやり取りをすることができるメソッドです。
また、fetchメソッドの返り値はPromiseオブジェクトになります。今回は練習で使うAPIとして[Pokemon API](https://pokeapi.co/)を使用しました。
##WebAPIのURLにアクセスしてみる
今回は以下のAPIのURLを使ってポケモンのデータを取得してみます。https://pokeapi.co/api/v2/pokemon/25/
なんのポケモンか
Submitボタンを非活性にしてユーザビリティを良くする
###ボタン押してから遷移するまで時間がかかりそうなフォーム
本当に処理されているのかわからないユーザーは、不安のあまりボタンを連打したりブラウザバックしたり画面を閉じてしまうかもしれない。“`html:html
“`
###そうだ、jQueryでボタンを非活性にしよう！！！
3秒で思いついた方法?
ボタンをクリックしたら非活性にして、submitしてグルグルを表示する。“`javascript:jQuery
集合住宅の内部をストリートビューにしてみた
## 概要
360度写真をWeb上で表示できるA-frameというライブラリと、Canvas内を操作するKonvaを組み合わせて、技術実験で親戚の経営するシェアハウスの内部を360度写真で撮影し、グーグルマップのストリートビューっぽくしました。PCとスマホの両方で見れます（VRゴーグルは対応中）。現状簡単に解説しますが、後々サンプルや動画とかを用意する予定です。パークサイドハウス吉祥寺|内覧
https://guesthousetokyo.info/view360/
各エリアの矢印や丸のアイコンで隣接するエリアに移動したり、一覧やマップからジャンプすることが可能です。
ここでは簡単にやり方と注意点をまとめておきます。
## やり方
1. 360度カメラを買います。
2. 撮影するポイントを決めます。隣接するエリアを
暇を持て余した高校生による給料計算npmモジュール
# はじめに
ざっと自己紹介をすると– 高校2年生
– JS書いてます
– [Twitter](https://twitter.com/AlGoRiT94422608)
– [GitHub](https://github.com/kota-yata)# きっかけ
現在僕は給料計算とカレンダーのwebアプリを開発中で、カレンダーについては[FullCalendar](https://fullcalendar.io/)で行けたんですが給料計算に関しては国ごとに法律が違うこともあってライブラリやモジュールがありませんでした。モジュールが無いなら自分で作るしかなくて、どうせならnpmパッケージにして公開しようと思い立ったので開発しました。# 沼ったところ
そもそも僕はnpmパッケージとかモジュールなんて一度も作ったことがなく、どうやってパッケージにするかも全くわからなかったので、ローカルでinitするところからGoogle先生の力を借りなければならなかった訳です。参考にしたサイトは以下のような感じです。– [初めてのnpm パッケージ公開](https://qiita.com
CloudFunctionをデプロイするための備忘録
#はじめに
CloudFunctionをデプロイする際に少々苦戦したので、備忘録として書き記しておきたいと思います。当記事の使用言語はJavaScript（Node.js）です。####CloudFunctionとは？
Googleプラットフォーム上で関数を実行する機能であり、クライアント側からのイベントをきっかけに発火します。サーバーサイドで行いたい処理を実行できるので、開発中のサービスにおいてユーザー情報の変更の際に採用しました。####下準備
①Firebaseプロジェクトを作成 ※省略②Node.js と Firebase CLI を設定する
該当プロジェクトのソースコードのディレクトに対して、ターミナルから“`
npm install -g firebase-tools
“`
を実行。プロジェクトにfirebaseコマンドがインストールされます。③FIrebaseにログインをする
“`
firebase login
“`
プロジェクトを作成したアカウント、あるいはコラボレートしているGoogleアカウントでログインします。④functionの
なぜJavaScriptのDateコンストラクタは例外を投げないのか
**Q.** なぜJavaScriptのDateコンストラクタは例外を投げないのか？
**A.** `NaN`があるから—
`Date`はJavaScriptで日時を扱うためのAPIで、JavaScriptの当初から存在します。
`Date`オブジェクトは主に`Date`コンストラクタを用いて作られます。`Date`コンストラクタにはいろいろな機能があり、`new Date()`のように引数なしで呼び出すと現在時刻を取得できるほか、`new Date(“2020-04-24T00:00+09:00”)`のように文字列から日時に変換したり、`new Date(1587654000000)`のように数値（UNIX時間）を日時に変換したりすることができます。
一般に、データの変換作業には失敗が付き物です。しかし、`new Date`は決して失敗しません[^note_1]。例えば、`new Date(“foobar”)`のように明らかに日時を表していない文字列から`Date`オブジェクトを作ろうとしても、ちゃんと`Date`オブジェクトが得られます。これは一体どうしてなのでしょう
【JavaScript】getElementById
JavaScriptでコーディングしていると結構な頻度で使うであろうgetElementByIdに
ついて気になったので調べてみました。これも私の備忘録として残しておきたくて書きました。変数Aにid属性値hogeを代入する
var A = document.getElementById(‘hoge’);※変数名とid属性値は本記事用に変更しております。
上記ソースコードの意味
① varでAという変数を宣言
② ある要素のid属性値として定義しているhogeをAという変数へ代入まとめ
JavaScriptにおけるgetElementByIdは変数で使用されることが多いと思われる。
今回のソースコード例でいうと要素のid属性値をJavaScriptのプログラムで
新人が、ほぼ一人で、PC専用だったWebサービスをタブレット/スマホ対応した話
# はじめに
– 私について
– プログラム初心者（半年くらい）
– HTML、JS、CSSが、ググりながらある程度書けるくらい。– サービスについて
– 法人向けのERPシステム
– 人を検索や、人を参照などをするサービス（他にもありますがメインはコレ）
– HTML、CSS、JS、Java、Tomcat、Nginx、OracleRDBで動いているらしい
– PCブラウザでしか、動作も検証もしたことが無い
– 一応マテリアルデザインを参考に作られている– したこと
– 前述のサービスの主要画面をスマホ、タブレットで使用できるようにする– 条件
– スマホは機能落ちは許容できる
– タブレットの機能落ちはダメ– 開発期間
– 4か月# タブレット/スマホ対応するうえで、検討したことと結論
### 対応するOS、ブラウザについて
まずはじめに決めたことが、対応するOSとブラウザをどうするのかです。
テストするための実機も必要になることから、会社での稟議～調達のタイムラグも見て、早
nuxt.js の header に出てくるCSSを削除してページのサイズを小さくする
# モチベーション
デフォルト設定のまま nuxt.js を使っていると以下のようにCSSが大量にHTMLページ内に書き込まれてしまう。
これからCSSの埋め込みを削除し、別のファイルやCDNから読み込むようにしたい。理由はAWSとかを使っていると通信量で課金されるので、HTMLファイルのロードの度にかかるコストを抑えたいため。
検証バージョンは nuxt.js の 2.12.2。“`html:bootstrap-vueを選択した場合のindex.htmlから抜粋
JavaScript（学習記録）
“`
・ console.log(値);・ //
・ let 変数名 = 値;
・ 変数名 = 新しい値;
・ const 定数名 = 値;
・ ${定数}
// 必ずバッククォーテーション(“) で囲むこと・ else if
・ switch (条件の値) {
case 値1:
条件の値が値1と等しい時の処理
break;
default:
処理
break;
}・ === / !==
“`
##用語
– ES2015(ES6)
– コメントアウト
– テンプレートリテラル##注意点
– 文の最後はセミコロン(;)で終わる
– if文、switch文などは不要
– 変数の命名について、2語以上の場合は大文字で区切る##参考記事
##参考教材
– Progate JavaScript 学習コース Ⅰ,Ⅱ,Ⅲ,Ⅳ,Ⅴ,Ⅵ,Ⅶ
Gatsby カテゴリ一覧の作り方
Gatsbyでどのページにでも表示できるカテゴリ一覧を作る方法。
応用すればタグ一覧も作れます。
## コンポーネントでページクエリ使えない
componentでクエリ使用すると次のようなエラーがでる。“`
TypeError: Cannot read property ‘allMarkdownRemark’ of undefined
“`クエリはpageかtemplateでしか使えない。なのでコンポーネントでクエリを使用する場合は`StaticQuery`を使用する。
公式ドキュメントは[こちら](https://www.gatsbyjs.org/docs/static-query/)
## コンテンツにカテゴリー入れる
コンテンツにcategoryを入れておく。“`markdown
—
title: コンテンツのタイトル
description: 説明文
date: 2020-04-22T11:30:00+09:00
category: gatsby
—
“`## コンポーネントを作る
componentフォルダにコンポーネントファイルを作成
turbolinksはjsにとって”良薬口に苦し”だった話
#困り事はタイトルの通りです。
webサイト、webツール様々開発する中でwebツール系をwebサイトの雰囲気で作っていると、この障壁にぶち当たりました。
turbolinks使用時にjavascriptが発火しないなどの記事は山ほどあったのですが、発火しすぎるという記事は少なかったので書いてみます。##本記事を読む対象の人
– rails環境にて、turbolinksとjsを併用する時に思い通りの動きにならない。
– ページ毎に記述したいjsファイルの読み込みが呼ばれなかったり、多重にリッスンしてしまう。
– ‘page:before-change’などよく分からない独特な書き方を覚えるのがめんどくさい、けどpjaxの恩恵が欲しい。##具体的な問題
“`js:application.js
//= require jquery
//= require jquery.turbolinks
//= require rails-ujs
//= require turbolinks
//= require common
//= require cropper.min.js
//=
Vue.jsの始め方②(classのデータバインディング)
#Vue.jsの始め方②(classのデータバインディング)
今回はclass属性のデータバインディングの基礎です
前回の記事はこちら
[Vue.jsの始め方①(html/css/js/jQueryがある程度わかる方向け)](https://qiita.com/fumiya0414/items/f15f8ec22c334de8a696)#classのデータバインディング基礎
以下のhtml,js,CSSを記述してブラウザーで実行してください
“`html:index.html
Hello vue.js
【Nuxt.js】axios導入編：かんたん・お手軽API通信
# 前置き
**API通信に便利なaxios！**
導入からデータ取得までの
簡単な流れを解説します?
(Firebase & Vuexやりたいのですが
1万字を越えたため整理中です?♀️?)**❓API
機能を共有できる仕組みです！**
例えばこんなことができます?
・amazonの商品データを引っ張ってきて
売れ筋商品を把握する
・Google Mapsの地図を引っ張ってきて
地図をカスタマイズする自分で1から作らなくても、
既にあるものを利用できたら楽ですよね？?
それを叶えてくれるのがAPIです?**❓axios**
HTTPクライアントライブラリです。
HTTP通信は
ブラウザとサーバーの
やり取りのことです！ブラウザが
「これ表示してほしい！?」
ってサーバーにお願いして
表示してもらったり、
(GETメソッドのこと)「このデータ預かっといて！?」
ってお願いしたら預かってもらったり。
(POSTメソッドのこと)**axiosはjsonファイルでそれが可能です。
jsonファイルを取ってきたり
そこに追加したりできるもの**
と覚えておけばO
JavaScriptの条件分岐を簡単に理解する方法
# 条件分岐って何？
rubyでいうところのif文です。JSでもその概念はあります。
普通ならサンプルコードみたいなのを見せられて
はい、終わりだと思うのですが、
簡単に理解するために細々としたところまで見ていきたいと思います。# JSで条件分岐を書くために（前提条件）
以下、２つのファイルを用意。
:page_facing_up:index.html
:page_facing_up:script.js
今回もconsole.log()を用いてどのような結果になるのか検証していきます。
**console.log()って何？って思った人は事前にこの記事を読んでください。**
[JavaScriptでのconsole使用方法](https://qiita.com/Nyanmaru-12/items/fc430a1ee28c26901e91)# Rubyと違うところ
もちろん、rubyとはいくつか違う箇所があります。
それを先に抑えてしまいましょう。
以下４つです。
①条件式は（）でくくる。
②処理の内容は{}でくくる。
③endはいらない
④elsifではなく、else ifと記
jquery スクロールでフェードイン、フェードアウトメモ
“`javascript
$(function(){
$(window).scroll(function (){
$(“.fade_off”).each(function(){
var imgPos = $(this).offset().top;
var scroll = $(window).scrollTop();
var windowHeight = $(window).height();
if (scroll > imgPos – windowHeight + windowHeight/5){
$(this).addClass(“fade_on”);
} else {
$(this).removeClass(“fade_on”);
}
});
});
});“`
Visual Studio Code インストール JavaScript / VBScript編
Windows の開発環境も、やっと無料で構築できるようになりました。
Visual Studio Code は、非常に軽く使いやすいようです。私は、Excel、Access を使って、Officeアプリを作っているのですが、Web関連の開発を Visual Studio Code を利用するようにしました。
このページは、開発環境構築用の備忘録です。
## Visual Studio Code のインストール
Visual Studio Code(以下、VSCode)をインストール
## VSCodeを日本語化
Japanese Language Pack
を探すとかなり豊富に色々な開発者が開発をしたActionが利用出来るようになっているので、まずそちらを見てみるといいかもしれません。
## Github Actionsの導入方法
Github Actionsを導入したいgithubで管理されているrepoに以下のようにworkflow定義用の`main.yml`を作成します。
> 上記で`main.yml`としていますが、ここのファイル名は自由です。
> かつ、複数のymlファイルを配置して、actionを分割することも可能です。“`sh
$ cd path/to/myrepo$ mkdir -p .github/w
