- 1. Javascriptで全部のDOMにアクセスしたい時
- 2. [GitHub] 東京都公式 新型コロナウイルス対策サイトがプルリク募集してる[COVID-19]
- 3. 【Node.js】定義したクラスを別のファイルで使用する
- 4. JavaScriptで時刻の二桁目をゼロ埋めする
- 5. React Native で画面遷移やタブメニュー【react-navigation 5.x】
- 6. 1つの投稿で複数の画像をプレビュー表示させながら保存する
- 7. 実践！令和 500円貯金(投資)をするといくら貯まるのか？(Vue.jsでのグラフ&テーブル表示)
- 8. kintoneで相対日付のバリデーションを行う
- 9. JavaScriptの問題 「DOM Based Xss / Webストレージの不適切な使用」
- 10. 初心者によるプログラミング学習ログ 254日目
- 11. Best 65+ Informatica Interview Question and Answers in 2020
- 12. キラやば～っ☆ な「COTOHA DECO」作っちゃった！？よーしっ、さっそくQiitaへ投稿だーっ☆
- 13. AWS Lambda入門①(Node編)〜関数をデプロイして動かす〜
- 14. Vue.jsのComposition APIについて自分なりに考えてみたメモ
- 15. javascript で文字列を date オブジェクトに変換するときのメモ
- 16. 【JavaScript】Moment Timezone
- 17. WSHで複数あるファイル名の末尾に特定の文字を追加する
- 18. esa.io のカテゴリ表示を並べ替えたかったので Chrome 拡張を作った
- 19. 知識ゼロから始めるTypeScript その① 〜型編〜
- 20. 【JavaScript】 便利メソッド 【ゆるっとまとめ】
Javascriptで全部のDOMにアクセスしたい時
しょっちゅう書いてるのに忘れるからメモ
再帰的に処理するだけ“` javascript
const getRecursionNodes = node => {
node = node.firstChild;
while (node) {
getNodes(node);
node = node.nextSibling;
}
};
“`フレームワーク内で書いたら負け。
node.jsでスクレイピングしたい時とかにね例えばこんなDOMっぽい文字列一部だけでもいいし全部でもいいし
axiosとかで普通に取得する。“`javascript
const tagText = `タイトル
サブタイトル`;
“`で文字列をパースする
“`javascript
const parser = new DOMParser();
const doc = parser.parseFromString(tagText, ‘text/html’)
[GitHub] 東京都公式 新型コロナウイルス対策サイトがプルリク募集してる[COVID-19]
[東京都公式 新型コロナウイルス対策サイト](https://stopcovid19.metro.tokyo.lg.jp/)が、[GitHub上にソースコードを公開](https://github.com/tokyo-metropolitan-gov/covid19)（MIT license）して、
[Issue、Pull Requestを受け入れています。] (https://github.com/tokyo-metropolitan-gov/covid19/issues/328)IssueとPull Requestが以下の画像のように[カンバン形式で見える化](https://github.com/tokyo-metropolitan-gov/covid19/projects/1)され
【Node.js】定義したクラスを別のファイルで使用する
定義したクラスを別のファイルで使用するには、*module.exports*を使います。
まず元となるクラスを作成
“`javascript:smartPhone.js
class iphone {
constructor() {
}call(){
console.log(‘call’);
}mail(){
console.log(‘mail’);
}}
class android {
constructor() {
}call(){
console.log(‘call’);
}mail(){
console.log(‘mail’);
}}
“`
*module.exports*で外部に公開します。“`javascript:smartPhone.js
module.exports = iphone
“`
これだけで、外部へ公開することができます。
しかし、今回クラスは2つあり
JavaScriptで時刻の二桁目をゼロ埋めする
## 取得した時刻をStringへ変換してpadStart
1時2分を「1:2」ではなく「01:02」みたいに表記したかった。
忘れないようにメモ。“`javascript:console
const d = new Date(‘2020-03-05T01:02:03’);
const hourStr = d.getHours().toString().padStart(2, ‘0’);
const minuteStr = d.getMinutes().toString().padStart(2, ‘0’);
console.log(hourStr + “:” + minuteStr); // 01:02
“`## 参考資料
[String.prototype.padStart() – JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/padStart)
React Native で画面遷移やタブメニュー【react-navigation 5.x】
# react-navigation とは
[react-navigation](https://reactnavigation.org/) とは、React Native アプリのルーティングで使える便利なライブラリです。
画面遷移や、タブバー、そしてドローワー（横からすっとでてくるメニュー）などを利用できるので非常に便利。
4.x->5.x のメジャーバージョンアップに伴い、コンポーネントベースになりました。今回は、5.x の使い方を紹介します。
# インストール
“`
# ライブラリのインストール
yarn add @react-navigation/native
# dependencies のインストール
yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
“`### App.tsx
“`typescript
im
1つの投稿で複数の画像をプレビュー表示させながら保存する
##概要
Railsアプリケーションにて、投稿に紐付く画像を複数枚、プレビュー表示させながら投稿できる機能を実装したので備忘録としてまとめます。
ProductにImageが紐付きます。
ビューのところは特にもっといい方法があるんだろうなと思っておりますが、
改善点や間違いがあれば是非コメントいただけますと幸いです！##完成イメージ
##マイグレーション
マイグレーションは通常通り・・・
“` .rb
class CreateProducts < ActiveRecord::Migration[5.2] def change create_table :products do |t| t.string :n
実践！令和 500円貯金(投資)をするといくら貯まるのか？(Vue.jsでのグラフ&テーブル表示)
##はじめに
昨年2019年、元号が「平成」→「令和」に変更されました。普段、元号使わないし、「いま平成何年だっけ？」と考えるのは、煩わしいと思っていました。しかし、予想以上に令和への改元が盛り上がり、時代の節目として、元号ってよいものだと思いました。そう思った人も多かったのではないでしょうか。そこで、「令和」のテーマで何かできないかな、と考えはじめました。平成は約30年。令和は何年の続くのかは、今のところ誰にもわかりませんが、この令和の期間中、**「令和500円貯金」**と称して、500円貯金をしようと思いました。
##「令和500円貯金」とは
– 500円貯金：わかりやすく1年間を360日とすると、500円を毎日貯金箱にいれたとすると、18万円になります。（毎日きっかり500円というわけではなく、**わかりやすさ重視で、1年360日（年間18万）・1ヶ月30日（1万5千円）**とします。）
– **貯金箱に貯金していても、おもしろくないので、時代に合わせて「投資」にしようということで、「令和500円積立投資」とします。**
– 令和の時代、ずっと積み立てを実施します。（令和元
kintoneで相対日付のバリデーションを行う
先日[kintoneで宣言的にフィールド値の検証を行う](https://qiita.com/shellyln/items/cebe1b0ca4f1ae4d9559)という記事を投稿しました。[Tynder](https://github.com/shellyln/tynder)というライブラリを使い、型宣言を書くことで、（手続き的ではなく）宣言的に入力値の検証を行いました。
今回はその応用編として、日付や日付時刻型のフィールドを相対日付（例えば、今月、来月、今年）で検証します。
さらに、フィールドのエラーに合ったカスタムエラーメッセージを表示するようにします。
# コード
* [tynder.min.js](https://github.com/shellyln/tynder/releas
JavaScriptの問題 「DOM Based Xss / Webストレージの不適切な使用」
JavaScriptにまつわる脆弱性について。
「DOM Based Xss」と「Webストレージの不適切な使用」について記載する。[JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript)
#DOM Based Xs
1. 概要
2. 攻撃手法と影響
3. 脆弱性が生まれる原因
4. 対策##概要
JavaScriptが原因で発生するXXSをDOM Based Xssと呼んでいる。
XXSはサーバ側のプログラムの不備が原因で発生するが、クライアントサイドで動作するJavaScriptの記述の不備で発生するケースもある。
このケースがDOM Based Xssに該当する。##攻撃手法と影響
###影響
通常のXSSと同じ。具体的な被害としてはフィッシング詐欺、セッションハイジャック、ウェブサイトの改ざんなど。– クッキー値の盗み出し
– その他のJavaScriptによる攻撃
– 画像の書き換え###攻撃手法
– innerHTMLプロパティ
– document.writeメ
初心者によるプログラミング学習ログ 254日目
#100日チャレンジの254日目
twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
254日目は、おはようございます
254日目
・udemyでjavascript講座 インプット学習#早起きチャレンジBest 65+ Informatica Interview Question and Answers in 2020Here, is the list of mostly asked Informatica Interview Questions and this list includes two types of questions- scenario-based Informatica questions and advanced Informatica questions. Nevertheless, all these questions are suitable for beginners, intermediates, or advanced Informatica learners to crack the job interview.
click here to read more
キラやば～っ☆ な「COTOHA DECO」作っちゃった！？よーしっ、さっそくQiitaへ投稿だーっ☆
わたし、《ことは ひかる》！
CSSとJavaScriptがだ～いすきなエンジニア。ある日、Qiitaを眺めながらCSSを書いてたら、突然、 [謎のプラットフォーム](https://api.ce-cotoha.com/contents/index.html) を使った [キャンペーン](https://zine.qiita.com/event/collaboration-cotoha-api/?utm_source=qiita&utm_medium=article_banner)に出会ったのっ！
…これを使えば、「自然言語処理」 できるの！？キラやば～っ☆
Qiitaではフロントエンドエンジニアたちが、おしゃれな記事を書いて共有しているらしいのだけど…
あるとき、目的をはき違えた [センスのかけらもない記事](https://qiita.com/j5c8k6m8/items/dbc3a766b0c1daba7768) が、Qiitaに投稿されてしまったの！
「CSSの表現力をもっと伝えたい」そう強く思った瞬間、 [《構文解析》](https://api.ce-cotoha
AWS Lambda入門①(Node編)〜関数をデプロイして動かす〜
## 概要
– ServerlessFrameworkを使ってLambda関数を作り、ローカルで動作確認したあとにAWSにデプロイしてアクセスするところまでやってみます
## Lambdaとは
– LambdaはAWSが提供するサービスの1つで以下のような特徴を持ちます
### サーバーレス
– 通常のアプリケーションはサーバにデプロイし稼働させることでアクセスすることができますが、当然サーバが止まっていたら利用することはできません
– Lambdaはサーバーレスに分類されるサービスで、アクセスがあるとそのつど起動し処理が実行され終了すると停止します
– つまりLambdaはサーバの死活監視のようなことをする必要がなく、また課金も実行時間単位なので金銭面でもお得といった特徴があります### FaaS
– LambdaはいわゆるFaaS(Function as a Service)に分類されます
– つまり、Function(関数)をデプロイして、それを公開するサービスというわけですね## Lambda関数の作成
### 関数の作成
– 今回は[Serverles
Vue.jsのComposition APIについて自分なりに考えてみたメモ
#何があった？
気が付くと今年にはVue.js 3.0が出るらしい。
しかも、今までの書式とは結構変わってしまうらしい…。何と言う事でしょう、巧[^巧]の仕業か！？
[^巧]: 人呼んでEvan Youと言うらしい？
# Composition APIを調べてみて思った事
Vue.js 3.0から導入される新機能の大玉はComposition APIと言う仕組みらしいです。
なんでもTypeScriptとの相性を解消するためだったり[^typescript]とか、高速化の為だったりとか。[^typescript]: 実はtypescript良くわかってないです。
当初、Vue.js 2.xでも完璧超人[^完璧超人]に感じてたので、わざわざ新しい書式なんて要らないんじゃないかな？
…と思ったのですが、Composition APIを少し触ってみて結構いいんじゃないと思ったのと、自分なりに思う所が出てきたので、そういった部分をメモしてみたいと思います。[^完璧超人]: グロロロロ…
# setupについて
Composition APIでは**テンプレートで使用す
javascript で文字列を date オブジェクトに変換するときのメモ
下記のいずれかではいけるようです。
“`str_to_date.js
var str = “YYYY/MM/DD HH:mm:ss”;
var d = new Date(str);
“`“`str_to_date2.js
var str = “YYYY/MM/DD HH:mm:ss”;
var d = Date.parse(str);
“`perse はブラウザによって、Date オブジェクトではなく、1970/01/01 からの経過時間を数値でかえしてくることがあるようです。
str は例えば `”2020/02/29 12:34:56″` とかです。区切り文字がハイフンだと(例えば `”2020-02-29 12:34:56″`)、ブラウザによって時差の分だけズレが生じることがあるようです。ハイフンを `/` に直してから `new Date()` すれば良いようです。
“`replaced.js
var str = “YYYY-MM-DD HH:mm:ss”;
var d = new Date(str.replace(/-/g, ‘/’));
“`D
【JavaScript】Moment Timezone
Moment Timezoneは日付の操作などの機能を提供するライブラリです。
早速インストールして使っていきます。“`
npm i –save moment-timezone
“`##基本的な使い方
moment()メソッドを使います。
引数なしの場合、現在時刻が返されます。“`javascript
const now = moment()
console.log(now)//2020-03-01T17:22:39+09:00“`
色々な形式で取得することが可能です。“`javascript
const now = moment().toDate() //Date型を返す。Sun Mar 01 2020 17:28:10 GMT+0900 (GMT+09:00) {}
const now = moment().unix() //unixのタイムスタンプを返す。1583051420
const now = moment().toDate() // ISO 形式 (ISO 8601) の文字列を返す。2020-03-01T08:31:45.639Z
`
WSHで複数あるファイル名の末尾に特定の文字を追加する
##はじめに
複数あるファイルのファイル名の末尾に一括して特定の文字を追加したいことがありました。例えば、複数の報告書があり、完成したものについてファイル名末尾に”_DONE”を追加しておき、完成したかどうかが視覚的にわかるようにしておく場合などです。ファイルが１つや２つであれば別に良いのですが、１０個とかあると結構大変です。そこで、WSHで自動化を考えました。
##コード
###JavaScript
まず、勉強がてらJavaScriptで記述してみました。“`sample.js
var fso = new ActiveXObject(“Scripting.FileSystemObject”);var args = WScript.Arguments;
for (var i=0; i
esa.io のカテゴリ表示を並べ替えたかったので Chrome 拡張を作った
## 概要
タイトルの通りです. [esa.io](https://esa.io) のカテゴリを並べ替えたくなったので Chrome 拡張にしました.
[lusingander/esa-sorter](https://github.com/lusingander/esa-sorter)
## 使用方法
[インストール](#インストール)するとカテゴリ一覧の上部にソートキー表示が追加されます.
以下の各キーでのソートを切り替えることが可能です.– タイトル（昇順／降順）
– 記事数（昇順／降順）
– カスタム（後述）# はじめに
現在担当するプロジェクトでTypeScriptが使われていたので学習備忘録です。
– TypeScriptってよく聞くけどイマイチよく分からない
– 導入することで何が嬉しいの？そんな疑問を吹っ飛ばしていきましょう。
### TypeScriptとは
– Javascriptに静的型付けの定義をすることで堅牢なプログラムを書くことが可能。
– 型を定義することによりプログラムを動かす前にエラーに気付くことが出来る。
– 型を定義することによりプログラムを動かす前に意図しない型が代入されるのを防ぐ。### TypeScriptを導入する目的
– 型安全を確保してバグを減らすのが目的### 実行環境
– MacOS Catalina 10.15.2
– VScode### 型宣言について
– 型宣言は変数に対して制約が強くなるような型を定義することが理想的。### 使用するモジュール
`typescript`
typescript本体`ts-node`
tsファイルをコンパイルしてターミナルに吐き出す`ts-node-dev`
ts-nod
【JavaScript】 便利メソッド 【ゆるっとまとめ】
# :link: はじめに
産休・育休に入って1年間、全くコードを書かなかったら忘れてしまっていた…
頑張れ、脳。記憶力・・！#### 注意事項
あまり使わない引数や、直感的に理解できるメソッドの説明は省略しています。
下記にピックアップされているメソッドは個人的によく使うものたちで、
:warning: **全てではありません** :warning: のでご注意ください。# :link: 対象者
– 育休してて忘れている人（私です）
– JavaScript 初〜中級者（私です）# :link: Array 編
## join
配列の全ての要素を連結して、新しい文字列を作成する“`JavaScript
const date = [‘2020′, ’02’, ’23’];
const result = date.join(‘.’);console.log(result); // “2020.02.23”
“`## forEach
配列のループ処理
配列の各要素に対して一度ずつ実行する“`JavaScript
const animals =
