- 1. これからReact始めたい人のための今日だけでできるTODO#23 TODOアプリの作成① ローカルサーバーと用意したサーバーと通信できるようにする
- 2. QiitaAPIでVRタグが付いた記事の投稿推移を調べてみた。
- 3. Qiita APIから取得したJsonをPower BIに読み込ませる
- 4. 【Vue.js】 親子コンポーネント間のライフサイクルフック
- 5. 【フォーム】追加ボタンを押して関連した入力欄2つを同時に増やしていく方法
- 6. onchangeイベントで確認ダイアログの結果に応じてキャンセル with jQuery
- 7. 【JavaScriptのメモ】OKやキャンセルのダイアログを表示する関数
- 8. コロナ禍前後で、クラウドファンディングへの関心は変わったのか？
- 9. Qiita APIを使う練習 #1 特定の検索ワードで記事を取得してみる
- 10. FirebaseのFirestore v9でサブコレクションを取得する
- 11. Node.jsにおける同期/非同期処理に関して
- 12. 【Nuxt.js】axiosを使った非同期通信
- 13. 初心者がQiitaに人気投稿時間があるか調べてみた
- 14. 【JS】相対パスを正規表現でディレクトリ部分とファイル名部分に分ける
- 15. GASで動的ページのスクレイピング
- 16. 指数バックオフ + ジッターをTypeScriptでやるだけ
- 17. ウェブページは作れませんでした 【RESTART】
- 18. Reactで作るTodoアプリ
- 19. 【Laravel】bladeファイルでReact側に変数を渡す
- 20. face-api.jsの値を安定させるため、取得し続ける連続データの平均値を出した
これからReact始めたい人のための今日だけでできるTODO#23 TODOアプリの作成① ローカルサーバーと用意したサーバーと通信できるようにする
## TODOアプリの作成
これまで学んできたことを応用してTODOアプリを作成していきます。
少し長くなると思うので、1日で軽くできるTODOごとに記事にしていきます。## 開発環境の準備
まずは開発環境を準備します。“`
npx create-react-app 任意のディレクトリ名
“`
で環境を構築しましょう。
次に不要なファイルやコードを消していきます。### 不要ファイル一覧
– App.css
– App.text.js
– index.css
– logo.svg
– reportWebVitals.js
– setupTests.js### 不要な記述削除
削除したファイルが読み込んでいる記述も削除していきます。“`js:App.js
//修正前———————————————————–
import logo from ‘./logo.svg’;
import ‘./App.css’;function App() {
return (QiitaAPIでVRタグが付いた記事の投稿推移を調べてみた。
今回が初投稿になります！
つたない記事ではございますが、最後までお付き合いいただけると嬉しいです。。さて、初めて投稿するにあたって何を書こうかとなったのですが、そもそも自分があまりQiitaを知らない！ということで、QiitaAPIで情報取得しながら遊んでみたいと思います。
#何をするのか？
今回は、QiitaAPIで「VR」のタグが付いた記事の投稿日時を取得し、「VR」タグが付いた記事がどのような頻度で投稿されているのかを可視化します。また可視化したうえで、投稿頻度が高かった時期に「VR」関連のイベントはどんなことがあったのか、影響はあるのか考察していきたいと思います。##環境
__環境については以下の通りです。____◆実行環境__
Node.JS 16.10.0__◆パッケージ__
npm 7.24.0
axios 0.23.0__◆QiitaAPI__
・GET /api/v2/tags
・GET /api/v2/tags/:tag_id
・GET /api/v2/tags/:tag_id/items__◆コーディング__
・Visual StuQiita APIから取得したJsonをPower BIに読み込ませる
Qiita API を使って記事を取得し、記事をAPIで取得してJSON形式で出力。
そのファイルをPower BI というMicrosoftのBIツールにインポートして分析してみました。
なお、今回はQiitaのトップコントリビューターの10名の神々を対象に実行しています。
## 利用したもの
### API
– API Qiita API v2### 実行環境
– Windows 10 Home
– Node.js
– axios### BIツール
Power BI Desktophttps://powerbi.microsoft.com/ja-jp/
## 書いたコード
“`Javascript//ライブラリの読み込み
const axios = require(‘axios’); //APIをたたくa【Vue.js】 親子コンポーネント間のライフサイクルフック
## Vue.js 親子コンポーネント間のライフサイクルフック
### はじめに
・Vue.jsの単一コンポーネントのライフサイクルフックは[こちらの記事]([https://qiita.com/chan_kaku/items/7f3233053b0e209ef355)などにもあるように、実装をするうえで避けては通れない概念です。
ただ、親子間のライフサイクルについて、あまり言及されている記事が無く、実装中に詰まった箇所がありましたので、こちらでまとめようと思います。### 前提
Vue.jsのライブラリとしてVuetityを使用。### 起こった事象
下記のような親子コンポーネントを想定する。“`vuejs:parent.ts
:
XXXX 【フォーム】追加ボタンを押して関連した入力欄2つを同時に増やしていく方法
#はじめに
今回以下のようなフォームは作ったので、備忘録として残しておきます。
#HTML部分
“`php:create.brade.php
onchangeイベントで確認ダイアログの結果に応じてキャンセル with jQuery
# 結論
Deferredとクロージャ使った。
もっとベターなやり方は山ほどありそう。# なりゆき
やっほー☆フロント側をjQueryだけで開発しているみんな、こんにちは！
なんでこんなことになっているんだろうね！？うらむならプロジェクトをうらもう⭐️突然だけど、プルダウンの変更時、変更前の情報を知りたいと思ったことはないかい！？
んー、そう？
ぼくはあります！今まで何度もありました！ていうか今日もありました！
んでまあ、過去の実装を参照してもいいんですけど、今の自分ならどうするか、って考えてあんまりみないことにしました。jQueryのみでなんとかしていることから分かる通り、プロジェクト自体が緩いので許される・・・・・・と思いたい。
# 考えたこと
## DOM側に情報を持たせる
多分、今までも大体これでやっていたはず。
確定したタイミングで``みたいなやつに値を設定するとか。
全然悪くはないし、手っ取り早いし、いいとは思う・・・・・・。でも責務がぶれてるかなあ・・・・・・？
【JavaScriptのメモ】OKやキャンセルのダイアログを表示する関数
今回は、JavaScriptで使用される基礎的なダイアログを表示する関数を紹介します。
confirm()
“`JavaScript
confirm(‘文字列’)
“`
confirm()においては、戻り値が意味を持ちます。
戻り値はTrue、Falseの二種類で
OKを押せばTrueでキャンセルを押せばFalseを返す仕組みになっています。confirm()とalert()の違いは、ボタンの数
alert()はOKだけですが、confirm()はボタンがOKとキャンセルの二つです。
prompt()はボタンがOKとキャンセルそして、テキスト入力エリアが表示されます。コロナ禍前後で、クラウドファンディングへの関心は変わったのか？
# はじめに
はじめまして、JavaSqript初心者です。
恥ずかしながらAPIについても数日前に初めて意味を知った素人。当然ながらQiitaAPIに触れたのも初めて。知識を武器にできるよう、楽しみながら学んで行きたいです。# 目的
どうせやるなら自分が好奇心を持てるものを。
思い浮かんだのは、最近よく耳にするクラウドファンディング（以下、CF）について。
数年前に小学校の同級生が、子供の頃からの夢を実現させるためCFを達成させ企業した話を聞き、とても夢があると感動した。2021年10月現在はコロナ禍真っ只中。私がCFで初めて支援したのも昨年コロナが蔓延し始めた頃だった。
ちなみに当時支援したのは、こちら。https://camp-fire.jp/projects/view/261212
プリントごっこを思い出す、昔懐かしい印刷が楽しめる印刷所。シルクスクリーン発注をして自分で手刷り印刷もできるので、いつか利用してみたいなぁと思っていたところ、経営難となり経営存続を賭けてCFが発起された。（結果は是非、リンク先からご確認を！）
同じようにコロナの影響でCFに救いの手を
Qiita APIを使う練習 #1 特定の検索ワードで記事を取得してみる
#はじめに
プロトアウトスタジオという学校に入った。
プログラミングと企画のスキルを磨いてモノづくりにチャレンジしようという、
日々インフラシステムを保守しているだけのシステム会社9年目の人間から見れば
なんとも眩しくて近寄りがたい学校である。とりあえずの入門としてプログラムに触れてみようとなり、
何かしらの成果物を作らねばと、今私はQiitaAPIを使ってテキトーにプログラムを動かそうとしている。
まじでなんもわからん。せめて興味のあるものに絡めよう。好きなものとか。
趣味は麻雀と競馬。
なんかアルゴリズムとか難しそうだし(知能指数2)、麻雀に関連する記事とかを引っ張ってこればいいか。
考察とか分析とかはできないけど、プログラムを動かした記録があればいいんだろう。
・・・というぐらい意識が低い。同期のみんな安心してほしい、私が劣等生だ。#やったこと
・検索クエリに「麻雀」というワードが含まれる記事を取得する
〇取得する項目
-タイトル
-URL
-作成日付
-LGTM数（普通にいいねって言えばいいのに）GET /api/v2/items でやってみ
FirebaseのFirestore v9でサブコレクションを取得する
FirebaseとReactでアプリを作成していたときに、Firestore ウェブバージョン9のサブコレクションを取得する方法を記載した記事が中々なかったのでまとめます。
# サブコレクションとは？
Firestoreはリレーショナルデータベースとは構造が違い、ドキュメントとコレクションの組み合わせで構成されています。### リレーショナルデータベースとFirestoreの違い
とあるユーザがいてそのユーザに紐づくブログ記事（複数）があった場合、
リレーショナルデータベースでは「ユーザ」テーブルと「ブログ記事」テーブルがそれぞれあり、ブログテーブルにユーザIDを持つなどして「ユーザ」とそれに紐づく「ブログ記事」を定義すると思います。Firestoreでは、複数の「ユーザ」というコレクションがあり、個々のユーザの中にそれぞれサブコレクションとして「ブログ記事」があるというイメージです。
# FireStoreからサブコレクションを取得する方法
上記で書いた通り「ユーザ」と紐づく「ブログ記事」があるという想定で、ユーザに紐づくブログ記事を取得してみます。
以降のソースは全Node.jsにおける同期/非同期処理に関して
Node.jsの同期/非同期処理に関してのアウトプットするために本記事を投稿します。
### マルチスレッド
スレッドとはCPU利用の単位です。
CPUとは、Central Processing Unit(中央演算処理装置)の略で、プログラムの命令を解釈して、コンピューター全体の動作を制御する制御装置や演算を行う演算装置などの機能を持つ装置です。
近年のCPUでは、1つのプロセッサ・パッケージ内に複数のプロセッサ・コアを搭載するマルチコアプロセッサを使用しており、それに応じて複数のスレッドを同時に処理できるようになっています。(マルチスレッド)マルチスレッドを利用するとサーバーは複数のリクエストを受け取った際に、スレッドを増やして対応します。
しかし、リクエスト
【Nuxt.js】axiosを使った非同期通信
#はじめに
こんにちは。
こちらの記事では、axiosで非同期通信を行う方法を記しています。
誤っている点がございましたらコメントいただけると幸いです。##axiosとは
axiosとはブラウザやnode.js上で動くPromiseベースのHTTPクライアントで、HTTP通信を行いたいときに使うと簡単に実装できるようになる。Nuxt.jsに限らず、JavaScriptで使えるライブラリです。##実装のゴール
非同期通信で受け取ったデータのIDとユーザー名を表示させる。###axiosをインストールする
Nuxtで新規プロジェクトの作成する際や個別でインストールできる。
axiosのインストールがされていると、`package.json`の`dependencies`のところにバージョンが表示される。###APIからデータを取得する
今回は`JSONPlaceholder`のusersデータを使用する。“`javascript:script
face-api.jsの値を安定させるため、取得し続ける連続データの平均値を出した
#face-apiで取得した値が安定しない。
いま表情で動かすゲームをつくっていて、
face-api.jsを使って、表情データを取得するようにしているのですが、
ランドマークの値ってなかなか安定しないんですよね。じゃあ、どうするかと考えて、
取得した連続10個のデータの平均値を出すことで、
ある程度安定させてみました。#連続した10個のデータの平均値を出す
10個のデータは常に更新されていくので、
引数を配列にしてました。```javascript
function getAverage(array){
let total = 0;
let average = 0;
for (let i = 0 ; i < array.length ; ++i) { total += array[i]; average = total / array.length; } return average; } ``` ここまでが平均を出す関数。 ```javascript let array = [0 ,OTHERカテゴリの最新記事
- 2024.09.19
JavaScript関連のことを調べてみた
- 2024.09.19
JAVA関連のことを調べてみた
- 2024.09.19
iOS関連のことを調べてみた
- 2024.09.19
Rails関連のことを調べてみた
- 2024.09.19
Lambda関連のことを調べてみた
- 2024.09.19
Python関連のことを調べてみた