- 1. FrontEndのいくつ技術の用途の取り纏め
- 2. Nuxt.jsで認証認可入り掲示板APIのフロントエンド部分を構築する #3 個別記事ページの作成
- 3. Nuxt.jsで認証認可入り掲示板APIのフロントエンド部分を構築する #2 NuxtとRailsとの疎通テスト
- 4. 【JavaScript／初学者向け】打倒！ズンドコキヨシ（後半戦）
- 5. 【JavaScript／初学者向け】打倒！ズンドコキヨシ（前半戦）
- 6. Safari で disable_with オプションを付けても変わらない場合
- 7. プロパティによってオブジェクトをグループ化したい
- 8. styled-componentsでレスポンシブを楽に書く
- 9. styled-componentsのThemeを使ってみる
- 10. styled-componentsでJavascriptの値を使う
- 11. styled-componentsを使ってみる
- 12. クロージャ―を簡単にまとめてみた(1話)
- 13. addEventListenerをクラス名で使用する方法
- 14. [PlayCanvas]入力イベントの取得
- 15. ワンタイムパスワードをサーバー側とクライアント側で作るサンプル
- 16. Nuxt.jsのdataはvuexのstate,gettersでデータ管理しよう
- 17. 複数チェックボックスを全選択した時のみ押せるボタン
- 18. Vue.jsでビジュアルコンテンツエディタ作成
- 19. 【JS学習その⑦】JavaScriptにおけるthis
- 20. Angular+Golang(gin)でSPAを作る
FrontEndのいくつ技術の用途の取り纏め
FrontEndではいろいろな技術が創造されています。その中に、幅広く使ったものはHTML、JavaScript、CSS、DynamicHTML、DOM、AJAXです。
以下、用途により、説明します。
##HTMLの用途はなんですか##
今はWEB開発が流行しています。WEB開発以前はデスクトップアプリケーションが流行でした。WEB開発に変わってから、何の技術でブラウザにコンポーネントを表示しますか、画面でどのような効果を表示しますか。
この場合、HTMLが登場しました。
HTMLでは、テキストコンポーネント、ボタンコンポーネントが定義されています。文字色、背景色が指定できます。script、cssも組み込めます。
つまり、以下の二点の用途があります。
・画面でデータの輸出と輸入及びユーザ体験のために効果の表示
・script、cssなどほかの技術のインターフェースを持つ
##JavaScriptの用途はなんですか##
Nuxt.jsで認証認可入り掲示板APIのフロントエンド部分を構築する #3 個別記事ページの作成
←[Nuxt.jsで認証認可入り掲示板APIのフロントエンド部分を構築する #2 NuxtとRailsとの疎通テスト](https://qiita.com/rf_p/items/34cc453c7c232e07a1d7)
# 個別記事ページの作成
“`powershell
$ mkdir pages/posts
$ touch pages/posts/_id.vue
“`“`vue:pages/posts/_id.vue
{{ post.subject }} – {{ post.user.name }}
Nuxt.jsで認証認可入り掲示板APIのフロントエンド部分を構築する #2 NuxtとRailsとの疎通テスト
←[Nuxt.jsで認証認可入り掲示板APIのフロントエンド部分を構築する #1 環境構築](https://qiita.com/rf_p/items/0277ae96c5de433b4849)
# axiosの導入
URLのリクエストを送る際はaxiosを使います。
create_nuxt_appの時にaxiosを入れているはずですが、もし入れるのをミスっていた場合は以下の手順で追加します。“`powershell
$ yarn add @nuxtjs/axios
“`“`diff:nuxt.config.js
export default {
** Nuxt.js modules
*/
modules: [
+ ‘@nuxtjs/axios’
],
“`# APIとの疎通テスト
“`diff:pages/index.vue
Welcome to the Vuetify + Nuxt.js template
+
【JavaScript／初学者向け】打倒！ズンドコキヨシ（後半戦）
**こんにちは！どいこです。**
ズンドコキヨシ問題について、前回の記事で
「「ズン」「ドコ」のいずれかをランダムで出力」する所までできました。[前回：【JavaScript／初学者向け】打倒！ズンドコキヨシ～生中継（前半戦）](https://qiita.com/doiko/private/d2cff877e24b8fbfd83d)
しかし、まだキヨシは倒れていない・・・！
あきらめたらそこで試合終了なので、続きをやります。
#ズンドコキヨシとは（再掲）
>「ズン」「ドコ」のいずれかをランダムで出力し続けて
>「ズン」「ズン」「ズン」「ズン」「ドコ」の配列が出たら
>「キ・ヨ・シ！」って出力した後終了する#手順その②
###「ズン」「ズン」「ズン」「ズン」「ドコ」の配列が出たら
「キ・ヨ・シ！」って出力した後終了する・ まずは「この並びで出たら反応するよ～」の「この並び」を判定するための配列（`targetList`）と
「反応」の内容（`answer`）を定義しておきます。“`JavaScript
const targetList = [‘ズ
【JavaScript／初学者向け】打倒！ズンドコキヨシ（前半戦）
**こんにちは！どいこです。**
初Qiita投稿です。
現在JavaScript絶賛勉強中のため
「fizzBuzz問題」をクリア後、「ズンドコキヨシ問題」にも手を出してみました。[（参考）フィズバズ問題 (FizzBuzz問題)とは](https://wa3.i-3-i.info/word18535.html)
まさに今、キヨシと戦いながら書いています。
#ズンドコキヨシとは
>「ズン」「ドコ」のいずれかをランダムで出力し続けて
>「ズン」「ズン」「ズン」「ズン」「ドコ」の配列が出たら
>「キ・ヨ・シ！」って出力した後終了する#手順その①
###「ズン」「ドコ」のいずれかをランダムで出力し続ける・ 「ズン」と「ドコ」を配列（`wordList`）にする
“`JavaScript:
const wordList = [‘ズン’,’ドコ’]
“`
・ 配列（`wordList`）のインデックス（`[0]` or `[1]`）をランダムで出現させる
ランダムな値は`Math.floor()`と`Math.random()`を使って作る“
Safari で disable_with オプションを付けても変わらない場合
Railsでフォームを作る際、送信ボタンに disable_with オプションを付けることで、二重送信を防ぐことができる。
“`ruby
= f.button ‘送信する’, data: { disable_with: ‘送信中…’ }
“`しかし、Safariに限って、なぜかボタンの文言が変化しなかった。GitHub上でも、多々報告されている。
[disable_with doesn’t work with link in Safari #306](https://github.com/rails/jquery-ujs/issues/306)## 解決策
結論から書くと、JSで送信処理をあえて遅らせることで、とりいそぎは回避できた。
Issue内ではバニラJSで書かれた例が出てくるので、jQueryを使っていなけば、そちらを参考にした方が早いかもしれない。“`ruby
= f.button ‘送信する’, data: { disable_with: ‘送信中…’ }, class: ‘disable_with_safari’
“`
“`js
$(‘.dis
プロパティによってオブジェクトをグループ化したい
## プロパティによってオブジェクトをグループ化したいです
オブジェクトの配列を、プロパティによってグループ化したいです。
想定するデータは以下のような感じです。“`javascript
const data = [
{ type: ‘野菜’, color: ‘赤’, name: ‘トマト’ },
{ type: ‘野菜’, color: ‘赤’, name: ‘パプリカ’ },
{ type: ‘野菜’, color: ‘緑’, name: ‘ブロッコリー’ },
{ type: ‘果物’, color: ‘紫’, name: ‘ぶどう’ },
];
“`最終的に望む形式は以下のような感じです。
“`javascript
const groupingData = {
‘野菜’: {
‘赤’: [‘トマト’, ‘パプリカ’],
‘緑’: [‘ブロッコリー’],
},
‘果物’: {
‘紫’: [‘ぶどう’],
},
};
“`## MDNにやりたいことが載ってた
まさにずばりやりたいことがそのまま載ってま
styled-componentsでレスポンシブを楽に書く
## はじめに
今回はstyled-componentsを使ってレスポンシブデザインをできるだけ楽にする方法を紹介します。他のstyled-componentsの記事はこちら
* [styled-componentsを使ってみる](https://qiita.com/NozomuTsuruta/private/c9b2cf705e94b0e809eb)
* [styled-componentsでJavascriptの値を使う](https://qiita.com/NozomuTsuruta/private/89324deabd6ad2a82b0d)
* [styled-componentsのThemeを使ってみる](https://qiita.com/NozomuTsuruta/private/b2e5a83dc28c701d39f5)## 実際に描いてみる
今回のは一回書いてしまえばつかいまわせるので簡単に書きます。src直下にmedia.tsを作成し、以下のコードを書きます。Javascriptで書く場合はtypeの部分は全部消します。
“`js:src/media
styled-componentsのThemeを使ってみる
## はじめに
今回はstyled-componentsのThemeに焦点を当てていきたいと思います。
themeに関しては実務で使った事がなく、あまり理解できていないところもあるので、詳しい方コメントで教えていただけると幸いです^_^他のstyled-componentsの記事はこちら
* [styled-componentsを使ってみる](https://qiita.com/NozomuTsuruta/private/c9b2cf705e94b0e809eb)
* [styled-componentsでJavascriptの値を使う](https://qiita.com/NozomuTsuruta/private/89324deabd6ad2a82b0d)
* [styled-componentsでレスポンシブを楽に書く](https://qiita.com/NozomuTsuruta/private/9d2bae12ee8291ceeec8)## themeとは？
ReduxみたいにProviderで囲ったコンポーネント内のどこからでもアクセスできる値みたいなイメージで
styled-componentsでJavascriptの値を使う
## はじめに
一応、下の記事の続きとして書いているのでインストールなどはお手数ですが下の記事をご覧ください。* [styled-componentsを使ってみる](https://qiita.com/NozomuTsuruta/private/c9b2cf705e94b0e809eb)
他のstyled-componentsの記事
* [styled-componentsのThemeを使ってみる](https://qiita.com/NozomuTsuruta/private/b2e5a83dc28c701d39f5)
* [styled-componentsでレスポンシブを楽に書く](https://qiita.com/NozomuTsuruta/private/9d2bae12ee8291ceeec8)今回はstyled-componentsでJavascriptの値を使う方法を試していきます。
## 実際にやってみる
## 連想配列で定義した値を使う
まず、srcディレクトリ直下にstyle.tsファイルを作り、以下のコードを書きます。“`js:src/st
styled-componentsを使ってみる
## はじめに
今回はstyled-componentsの簡単な使い方をやります。他のstyled-componentsの記事
* [styled-componentsでJavascriptの値を使う](https://qiita.com/NozomuTsuruta/private/89324deabd6ad2a82b0d)
* [styled-componentsのThemeを使ってみる](https://qiita.com/NozomuTsuruta/private/b2e5a83dc28c701d39f5)
* [styled-componentsでレスポンシブを楽に書く](https://qiita.com/NozomuTsuruta/private/9d2bae12ee8291ceeec8)## styled-componentsとは？
styled-componentsはReactにおけるCSSの当て方の一つで、Reactのコンポーネントのようにjsの値を渡したりでき、コンポーネントのようにスコープが作られるため、使いやすいです。## インストール
React
クロージャ―を簡単にまとめてみた(1話)
クロージャ―
→「関数と、その関数が宣言されたレキシカル環境の組み合わせ」らしい。わからん。。。。
★かみ砕いていく★
「関数と、その関数を産んだ(定義した)親が持っている変数を合わせたもの」★さらにかみ砕いていく★
例を使って説明する。「一郎function」と、自分を産んだ「太郎function」が持っている変数(age,「次郎function」)を合わせたもの
クロージャ―の利点
①オブジェクトのカプセル化
→上の例でいうと、外部からは「age変数」、「一郎function」にはアクセスできない。
②イベントハンドラ(イベントが発生したら起動)として登録しておくことで、コールバックとして使える。
addEventListenerをクラス名で使用する方法
### はじめに
クラス名でaddEventListenerを作る際にエラーが出たので、解決策を投稿します。### エラーが出たソースコード
“`html:HTML
“`
“`javascript:JavaScript
const btn = document.getElementsByClassName(‘btn’);btn.addEventListener(‘click’, () => {
alert(‘上手に押せました！’)
})
“`
“`:エラー文
TypeError: btn.addEventListener is not a function
“`
ボタンタグがidであればエラーは出ませんが、classなのでエラーが出てしまいます。### 解決方法
“`javascript:JavaScript
const btn = document.getElementsByClassName(‘btn’);for (i = 0; i < btn.le
[PlayCanvas]入力イベントの取得
# 概要
キーボードやマウス、スマホのタッチ操作などのイベントを処理する機能。# 実装例
## マウス
“` javascript:mouse.js
var Mouse = pc.createScript(‘mouse’);Mouse.prototype.initialize = function() {
this.app.mouse.on(pc.EVENT_MOUSEDOWN, this.mouseDown, this);
};Mouse.prototype.mouseDown = function(event) {
console.log(“X: ” + event.x.toString() + “Y: ” + event.y.toString());
};Mouse.prototype.update = function(dt) {
// ホールドはupdateで取れる
if( this.app.mouse.isPressed(pc.MOUSEBUTTON_LEFT) ){
console.log(“Pressin
ワンタイムパスワードをサーバー側とクライアント側で作るサンプル
## ワンタイムパスワードのロジックを作ってみた
2020/09/25 現在では何かと銀行がクラックされまくっているが、いずれもワンタイムパスワードのような認証が入ってない。もちろんワンタイムパスワードも「そのワンタイムの間に」盗まれればアウトなんだけど、常時通信内容を奪うのは盗む方も大変だ。
ただ、ワンタイムパスワードの仕組みが、Google Authenticator などの外部の仕組みに依存するのは、別の意味でリスク（急に仕様が変わるなど）。
なので、自前でどこまでできるかを検証。
## どのようにして動く？
以下の要素を組み合わせて、ダイジェスト（sha256）を生成し、ダイジェストから数値6桁を取り出してます。
– ユーザ毎に違う秘密鍵（クライアントとサーバーで同じ秘密鍵を持ちます）
– タイムスタンプ（今回のサンプルでは60秒で割った整数部を使います）
– ソルト（サーバー側で保持する長い文字列）## サンプルソース
### 端末側
“`onetime.js
async function digestMessage(message) {
cons
Nuxt.jsのdataはvuexのstate,gettersでデータ管理しよう
##はじめに
vueinstanceでは親子component同士でdataを通信をする場合は`Props/$emitco`やcomponent同士でデータ通信をするためには`Event Bus`を使うのが一般ですがこのように複雑なdata通信を簡単に通信することができる考え方がVuxです。
##Vuexとは
ざっくりですが下記のイメージ図のように中央管理所からデータを必要な時呼び出しして使えるイメージです。
自分のイメージだと親と子component同士関係なく中央管理所からdataを管理し必要な
複数チェックボックスを全選択した時のみ押せるボタン
“`HTML
確認ボタン
【JS学習その⑦】JavaScriptにおけるthis
#JS学習シリーズの目的
このシリーズは、私ジャックが学んだJavaScriptのメカニズムについてアウトプットも兼ねて、
皆さんと知識や理解を共有するためのものです。
(理解に間違いがあればご指摘いただけると幸いです)#thisとは
「**呼び出し元のオブジェクトへの参照を保持するキーワード**」“`main.js
const person = {
name: ‘Tom’,
hello: function() {
console.log(‘Hello ‘ + this.name);
}
}person.hello(); /*Hello Tom*/
“`
上記のコードでは、1.JavaScriptではまず変数personを呼び出す
2.person内のhelloメソッドに参照が向く
3.helloメソッドが参照しているfunctionを実行する↑の流れになっています。
**this**はこの時、呼び出し元のオブジェクトである**person**を参照するので、this.nameはpersonオブジェクトのnameプロパティ
Angular+Golang(gin)でSPAを作る
## 目標
Angularで作成したSPA(シングルページアプリケーション)に対して、GolangのWebフレームワークであるginを使ってHTTPアクセスできるようにします。## なぜginを使うか。
– ログがわかりやすいから。
– 記事が見当たらなかったから### 前提
– [「Angularのチュートリアル」](https://angular.io/start)を通していること。
– チュートリアル程度のAngular CLIが使えること。
– 既に、ご自身で作成されたAngularプロジェクトがあることを想定しています。
**ご自身で作成されたAngularプロジェクトがない場合:**
後述する[「プロジェクトをコピー」](#プロジェクトをコピー)の手順を無視して進めてください。
デフォルトで生成されるSPAを表示することができます。#手順
###プロジェクト作成
始めのプロジェクト構成は以下のようにしています。“`
go-angular
└── main.go
“`
`go-angular`ディレクトリに移動して、Angula
