QiitaのAPIをつかって、Quiita住民の生態について考察してみた。

はじめに

１ヶ月まえくらいまで、Quiitaってなんやねん！？って言う状態だったプログラミング初心者の初めての投稿です。
先週からはじめてプログラミング教室の宿題でとりあえず、QiitaAPIをつかってQiitaに投稿しよう！ということで、
とりあえずやってみました。

目的

Quiita APIをつかって、投稿されている日時をしらべ、投稿が多い曜日や時間を検討・考察してみる

環境

Visual Studio Code: 1.60.2
Node.js: 14.16.0
OS: Darwin x64 19.6.0

サンプルコード

とりあえずQiita APIの説明書みながら作ってね！といわれたんですが、
この　説明書　めっちゃ字が細かくてみにくい・・・・
同じプ

【JavaScript】スコープの学習の振り返り③

#はじめに

Udemyの[【JS】ガチで学びたい人のためのJavaScriptメカニズム](https://www.udemy.com/course/javascript-essence/)の講座の振り返りです。

前回の記事

https://qiita.com/nao0725/items/58838204ff058eb9abc8

#目的

* スコープについての理解を深める

#本題
###1.クロージャー

クロージャーとは**レキシカルスコープの変数を関数が使用している状態**のこと

####クロージャーを使った実装
#####A.プライベート変数

ここではincrementを使って数字が１つずつカウントアップされていく仕組みを作ります。

““javascript
// 数字を1,2,3と増やしていきたい
increment();
increment();
increment();

// 関数でincrementを定義
function increment(){
let num = 0;
// 変数numが１ずつ増えていく
num = num +

Typscriptについて簡易まとめ

Typescript {
・型定義できるJS
・JSの上位互換。
・インターフェース、クラスが使える
・null/undefined safeにできる
・型定義ファイルがあれば外部ライブラリも形を利用できる
・ジェネリック使える

記述したコードをコンパイルするとJSのコードに変換するため、JSとはライブラリ群を含め100%互換性を持っている。
メリット {
コードが短く読みやすい
JSとの互換性が高い
エラー防止
動作が早い
}

ちょっとした JavaScript 確認コードのための下敷きコード

ちょっとした JavaScript 確認コードのための下敷きコードをここにメモ。
JavaScript を .js ファイルに記入して、.htmlファイルを Webブラウザで開くことにより実行できます。

### simplejs.js

“`js
// Simple JavaScript
console.log(‘Hello JavaScript World.’);
document.write(“

Hello JavaScript world

“);
“`

### simplejs.html

“`html

Qiita版『自民党総裁選』開催してみた 結果は‥

## Node.jsでQiitaAPIを使ってみたい!
　QiitaAPIを少し勉強したので、Node.jsで何か作ってみたいな。と考えていたところ
　とて面白いQiita記事を発見。早速参考にして自分なりに応用してみました。
　https://qiita.com/twtjudy1128/items/836efaf748b8b76a6b82

## 『ネット民に人気』は本当か？
　河野さんの紹介文でよく目にした「ネット民に人気」。
　それどうやって調べているのかな、とかねてから疑問でした。
　このAPIを使えば、**期間中全Qiita記事内の名前出現回数を計測できる**ので、
　ほかの候補者と比較すべく、「Qiita版総裁選」を開催してみました。

## サンプルコード
“`js

const axios = require(“axios”);

async function main() {
let response = await axios.get(
“https://qiita.com/api/v2/items?p

これからReact始めたい人のための今日だけでできるTODO#17 React.memo

## メモ化
– 同じ結果を返す処理を初回のみ実行して記録する
– 2回目以降は保持していた計算結果を再利用する

`useCallback()`、`React.memo`、`useMemo`を理解することはメモ化を実現させるための必須知識です。

Reactコンポーネントは`state`や`props`が更新されるたびに際レンダリングされます。
`useCallback()`、`React.memo`、`useMemo`を利用すると前回との差分がない場合は再レンダリングをスキップすることができます。

コンポーネントのレンダリングを抑えることでサイトパフォーマンスの向上が期待できます。

`useCallback()`　は必ず`React.memo`と組み合わせて利用します。

:::note alert
メモ化はレンダリングコストの高いコンポーネントや頻繁に再レンダリングされるコンポーネントを親に持つコンポーネントで利用しないと大きな効果は見込めません。
:::

## React.memo
コンポーネントのレンダリング結果をメモ化するReactのAPIです。
親コンポーネントから

【TypeScript】tsconfig.jsonで出力先を設定したのに反映されないあなたへ

TypeScriptに入門した際に、tsファイルのコンパイル後の出力先を設定したはずなのに、想定通り出力されないということがありました。
初学者の中には、同じつまづきをされる方もいるかもしれないので共有します。

## 安心してください。設定は間違っていないのだから（多分）

今回は、tsconfig.jsonで「出力先」を設定した想定です。
こんな風に記述しているのではないでしょうか？

“`:tsconfig.json
{
“compilerOptions”: {
“module”: “commonjs”,
“target”: “es2015”,
“outDir”: “./dist”,
“sourceMap”: true,
“strict”: true
},
“include”: [
“src”
],
}
“`

今回問題となる出力先に関する記述は、`”outDir”: “./dist”`の部分。
この場合、出力先はtsconfig.jsonと同じ階層にあるであろうdistディレクトリになるはです。

各ファイルの位

コピペで始めるプログラミング

# よくある話
プログラミング言語を詳しく覚えている人なんていません。言語の開発者でさえ覚えていないでしょう。（ド偏見）
で、
プログラミングしたことない人はこう言います。
『プログラミングって、覚えるのメンドイじゃーん』
そんな事ありません。覚えなければいいのです。

# コピペ？
コピー&ペースト。
ググって、コードコピって、貼り付けるだけ。多少の変更はしますが、そんなもんです。
ただ、これだけは守る必要があります。
それは、『先人に感謝すること』です。
検索して、思い通りの結果が出るのは、先人達の偉大な開発があったからです。感謝をしましょう。
さて、話を戻します。
コピペと言っても、ググるだけではありません。

## GitHub
ある程度、『なんかかけるようになった～』と思ったら、[GitHubを始め](https://qiita.com/nnahito/items/565f8755e70c51532459)ましょう。
『まだあんまよくないから公開したくない！』わかります。めちゃくちゃわかります。でも、非公開にすれば良いのです。未来の自分のために残しておくだけで良いのです。
実

Angularでのサービスの作成方法とシングルトンデザインパターンについて

Qiita初投稿です！
技術ブログを書いたことがない＆メモ書き程度の文章なので読みにくかったらご容赦

# サービス作成のコマンド
サービス名.service.tsを作成する

“`
ng generate service サービス名
“`

# サービスの作り方
@injectableデコレーターが使われていることがサービスであることの条件

“`book.service.ts
import { Injectable } from ‘@angular/core’;
import { Book } from ‘./book’;

@Injectable({
providedIn: ‘root’
})
export class BookService {

getBook(): Book[] {
return [
…
“`

上記の例のように「providedIn: ‘root’」が設定されている場合（デフォルト時）は、コンポーネント内でimportするだけでコンポーネントから直接呼び出すことができる。

それ以外の設定を使う場合、モジュールにサービス

【個人開発】スマホの傾きを検知して、気になるあの子を転がすだけのアプリを作ってみた。

# **はじめに**
気になるあの子をコロコロしたいという要望を聞いたので、物理的に気になるあの子を転がすスマホ用アプリを作りました。

iphoneだと動作が安定しないので、androidでの利用をお勧めします。
ちなみにipadだと動作が安定していました。

今回は約3日で作成しました。

https://affectionate-bohr-19c20b.netlify.app/

# **構造**
HTML、CSS、JavaScriptのみのお手軽実装。UIフレームワークとしてはbootstrapを使ってます。

# **デプロイ**
netlify

# **作ってみての感想**
javascriptでジャイロセンサーを使ったアプリを作れることを知ってウキウキで着手しましたが、canvasを使っての実装にだいぶ手こずりました。

また、バーにぶつかった時の検知も手動で作っているので、そこにも時間がかかり、リファクタリングが後回しになってしまったので、これから頑張って整えていきたいと思います。

また、私自身androidを使っていたので、iphoneでの動作確認がしっかりでき

画面遷移しても地図の位置座標を維持。sessionStorageを使って制御してみた。

Leafletを使って地図を使ったアプリを作成しいていましたが、画面遷移（あるいはリロード）したときに必ずデフォルトの座標に戻ってしまい、使いづらさを感じていました。
そこで、画面遷移しても遷移前に見ていた地図座標を保持したいと思いsessionStorageを使いました。

具体的に実現した方法をまとめてみます。

# 開発環境
Ruby 2.6.5
Ruby on Rails 5.2.6
Leaflet.js 1.7.1

# Leafletの初期設定
ここではLeaflet.jsの導入は省略します。
[Leaflet.js](https://leafletjs.com/)
まずLeafletで地図を表示するためのデフォルトの設定をします。
マップタイルはオープンソースのOpenStreetMapを使用します。

“`html:index.html