- 1. 実装の手順
- 1.0.1. Node.js立ち上げ
- 1.0.2. Concurrent Mode時代のReact設計論 (6) Concurrent Modeと副作用
- 1.0.3. qiitaに晒した8つの成果物とソースコード
- 1.0.4. 【CSS】z-index ではみ出しを防ぐ (重ねる)
- 1.0.5. addEventListener() メソッドの引数 listener に設定するコールバック関数で、引数 (event)を省略した場合でも動作する理由
- 1.0.6. 10秒で止めるやつを最速で止める
- 1.0.7. Reduxについて調べて、実際に触ってみた
- 1.0.8. amplify graphql nextTokenを利用してデータを取得しようとするとエラーになる
- 1.0.9. 【React】チュートリアルのその先に~追加課題編~
- 1.0.10. TypeScriptで学ぶデザインパターン〜Builder編〜
- 1.0.11. Storybookが遅いと感じたらLoocを使おう
- 1.0.12. ajax通信のreturnについて【個人メモ】
- 1.0.13. javascript Promiseを実際に書いて理解する
- 1.1.
コロナショックにおける転職活動
# 転職活動の背景
一身上の都合により、1年前頃から転職することを決意しており、3月中に前職を退職。会社を辞めたものの、こんなにコロナショックが広まるとは。。。転職活動、大苦戦（汗）# 経歴
・大学で情報系の学科を専攻
・7年間SIerの企業に勤める# 利用した転職エージェント
・@Type
求人数：○ エージェントによるフォロー：◎
・レバテックキャリア
求人数：△ エージェントによるフォロー：◎
・マイナビエージェント
求人数：◎ エージェントによるフォロー：×# 転職活動の戦績
・応募：60社程度
・書類選考通過：25社
・WEBテスト落ち：2社
・一次面接落ち：9社
・最終面接落ち：3社
・選考辞退：9社
・内定：2社# 応募先の職種
・ITコンサルタント
・一次請けSIer
・社内SE
・セールスエンジニア# コロナショックによる転職活動
### メリット
・ほとんどの企業がWEB面接を導入しており、
都内に住んでいない遠方の方も比較的面接を受けやすい。
交通費も浮く。
・経験的に、WEB面接は、対面に比べて、踏み込んだ質問を聴きづらい。
UNIX時間について調べた【編集中】
UNIX時間は『「協定世界時の」1970年1月1日0時0分0秒からの累計秒』
[GMT、UTC、UnixTimeって何が違うの？](https://kiridaruma.hateblo.jp/entry/2018/02/10/233957)JavascritpでUNIX時間に変換すのは下記で(まだためしてません┏〇゛)
“`
// Dateオブジェクトを作成
var date = new Date() ;// UNIXタイムスタンプを取得する (ミリ秒単位)
var a = date.getTime() ;// UNIXタイムスタンプを取得する (秒単位 – PHPのtime()と同じ)
var b = Math.floor( a / 1000 ) ;
“`
※下記から引用
[UNIXタイムスタンプを取得する方法](https://lab.syncer.jp/Web/JavaScript/Snippet/2/)
【JavaScript】配列の一部だけを合計して新しい配列を作る
変換前の配列：“`array1 = [ 年, 月, 日, 人数1, 人数2, … , 人数47 ];“`
変換後の配列：“`array2 = [ 年, 月, 日, 人数1～人数47の合計 ]; “`つまり、人数を合計したい。
“`javascript
let array2 = array1.slice(0, 3).concat(array1.slice(3).reduce((a, x) => { return a + x }));
“`
『うちで踊ろう』(星野源)をLINE BOTとIoTでプログラムした
星野源さんの『うちで踊ろう』。LINEメッセージを送るとIot(スピーカー）がメロディを奏でるbotをうちでプログラムしました。
基本的な開発方法は[前回の記事](https://qiita.com/Naru0607/items/b523cf9f67fa18bcf7d7)の『きらきら星』と同じです。
##環境
– Windows 10
– Node.js 12.16.1##必要なもの
– [obniz Board](https://obniz.io/ja/products)– [スピーカー](http://akizukidenshi.com/catalog/g/gP-04118/)(30円で購入できました)
##事前準備
[前回の記事](https://qiita.com/Naru0607/items/b523cf9f67fa18bcf7d7)と同じです##BOTの動き
画像をクリックするとYOUTUBEに飛びます[後編
#追記
記事に書き忘れていましたが、複数の言語を中途半端にやるより、一つの言語を極めれる方がいいと思います。
ただその言語が自分に合わない（僕の場合はCが生理的にきつかった) 場合は他の言語へ移った方がいいとも思うのです。#目次
大前提と学ぶ意義と大まかな学ぶ流れ
最初の一歩：Javascript
飛躍の一歩：Python
最初のコンパイル言語：C#
最後の難関、最強言語：C言語http://www.minekawada.com/program-lang-order.html
Node.js(五):Express 実装
今回からはNodeでExpressを勉強しましょう、Expressは人気なのJSバックエンドモジュールと言うことです。先ずはインストールしてみよう。
実装の手順
Node.js立ち上げ
新たなフォルダを作って、エントリポイントとしてのapp.js追加して、vscode中のターミナルでポロジェクトにnode.jsをインストする。
“`terminal
xxx.xxx:my-first-express$npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.See `npm help json` for definitive documentation on these fields
and exactly what they do.Use `npm install
Concurrent Mode時代のReact設計論 (6) Concurrent Modeと副作用
この記事は「Concurrent Mode時代のReact設計論」シリーズの6番目の記事です。
## シリーズ一覧
– [Concurrent Mode時代のReact設計論 (1) Concurrent Modeにおける非同期処理](https://qiita.com/uhyo/items/4a6315bfccf387407631)
– [Concurrent Mode時代のReact設計論 (2) useTransitionを活用する](https://qiita.com/uhyo/items/ba49b25f0a206e933e4d)
– [Concurrent Mode時代のReact設計論 (3) SuspenseやuseTransitionが何を解決するか](https://qiita.com/uhyo/items/27c1282addc06b17a980)
– [Concurrent Mode時代のReact設計論 (4) コンポーネント設計にサスペンドを組み込む](https://qiita.com/uhyo/items/4c45672874874a2aad11)
–
qiitaに晒した8つの成果物とソースコード
## 1. react・websocketで作ったWebアプリ「いつちゃ オープンチャット」
### 成果物
https://chat4.itsumen.com/### リポジトリ
https://github.com/yuzuru2/chat## 2. vueで作ったSPAなWebアプリ「いつめん掲示板」
### 成果物
https://board.itsumen.com/### リポジトリ
#### フロントエンド
https://github.com/yuzuru2/board_front#### バックエンド
https://github.com/yuzuru2/board_back## 3. ログイン不要／最短10秒で画像を共有できるWebアプリ「いつめん画像共有サイト」
### 成果物
https://gazou.itsumen.com/### リポジトリ
#### フロントエンド
https://github.com/yuzuru2/gazousite_front#### バックエンド
https://github.com/yuzur
【CSS】z-index ではみ出しを防ぐ (重ねる)
制作中アプリにて、
写真をアップし、その場でプレビューする機能を実装中に、
z-indexを久しぶりに使ったので、
備忘録も兼ねて、ざくっとご紹介します。
# 解決したい事
**下記のように、写真が来ると文字が枠外にはみ出てしまいます。**
[](https://gyazo.com/0fd4e1d3758f762210227a10ac7b5129)## < 完成形 >
**写真はテキストの上に乗ってもらいます。**
[](https://gyazo.com/2929b2415afccb8526e5e11d44fe020a)# z-index プロパティ
ボックスの重なる順番(優先順位)を決めれるプロパティ。
値は整数で、大きいものが手前に表示される。
____________
addEventListener() メソッドの引数 listener に設定するコールバック関数で、引数 (event)を省略した場合でも動作する理由
`addEventListener()` メソッドの引数 `listener` に設定するコールバック関数は、引数 (event) を省略した場合でも動作する。具体的には、次の通り「引数を省略しない場合」と「引数を省略した場合」が同様に動作する。
“`JavaScript:sample1.js
// 引数を省略しない場合（’event’を引数として設定）
document.getElementById(‘sampleElement’).addEventListener(‘click’, (event) => {
event.target.style.backgroundColor = ‘red’;
});// 引数を省略する場合
document.getElementById(‘sampleElement’).addEventListener(‘click’, () => {
event.target.style.backgroundColor = ‘red’;
});
“`## Q. なぜ引数を省略しても動作するのか
A. 引数を省略する場合の `event`
10秒で止めるやつを最速で止める
#概要
[@totoraj930](https://twitter.com/totoraj930)さんが作った[10秒で止めるやつ](https://totoraj930.github.io/10sec/)をできるだけ早く止めてみようと思います。##多分これが一番早いと思います
###Step1
Webインスペクタを開きます###Step2
コンソールに“`javascript
$button.click();$button.click()
“`
と入力し実行###Step3
やったあ！！！！
##あとがき
アホちゃう
Reduxについて調べて、実際に触ってみた
##はじめに
以下の2つの記事をめっちゃ参考にしました。– [React+Redux で Todoアプリを作ってみる │ Web備忘録](https://webbibouroku.com/Blog/Article/react-redux-todo#outline__9)
– [Redux入門【ダイジェスト版】10分で理解するReduxの基礎- Qiita](https://qiita.com/kitagawamac/items/49a1f03445b19cf407b7)##何ができる?
Reactのstateを一元管理することができる##登場人物
* ActionCreator
* Actionを作成するメソッド
* Action
* 実行する処理
* Store
* State置き場
* State
* データ
* Reducer
* stateを更新するメソッド##処理の流れ
– ユーザーが送信ボタン等をクリックする
– ActionCreatorがActionを作成する
– ActionをStoreに送る(dispatchす
amplify graphql nextTokenを利用してデータを取得しようとするとエラーになる
# はじめに
amplify graphqlにて、nextTokenを利用してdynamoDBから次のデータを取得しようとしたらエラーになって取得できなかった# スキーマ定義
“`javascript
export const mainList = /* GraphQL */ `
query MainList(
$user_name: String
$createdAt: ModelStringKeyConditionInput
$sortDirection: ModelSortDirection
$filter: ModelOcrImageFilterInput
$limit: Int
$nextToken: String
) {
mainList(
user_name: $user_name
createdAt: $createdAt
sortDirection: $sortDirection
filter: $filter
limit: $limi
【React】チュートリアルのその先に~追加課題編~
#はじめに
Reactの[チュートリアル](https://reactjs.org/tutorial/tutorial.html)にある追加課題をやってみました。
順番が前後しますが、まずは2番から。#2. 着手履歴のリスト中で現在選択されているアイテムをボールドにする。
`stepNumber`というstateを作成。
`stepNumber`には今何手目か、もしくは履歴を遡った場合、選択した履歴が何手目だったかを代入。
`stepNumber`と全履歴を保持している`history`のindexである`move`が一致した際に、`bold-btn`というclassを付与する。“`react:index.js
class Game extends React.Component {// 省略
render() {
const history = this.state.history;
const current = history[this.state.stepNumber];
const winner = c
TypeScriptで学ぶデザインパターン〜Builder編〜
# 対象読者
– デザインパターンを学習あるいは復習したい方
– TypeScriptが既に読めるあるいは気合いで読める方
– いずれかのオブジェクト指向言語を知っている方は気合いで読めると思います
– UMLが既に読めるあるいは気合いで読める方# 環境
– OS: macOS Mojave
– Node.js: v12.7.0
– npm: 6.14.3
– TypeScript: Version 3.8.3# 本シリーズ記事一覧(随時更新)
– [TypeScriptで学ぶデザインパターン〜Iterator編〜](https://qiita.com/junkimatsuda/items/c5b016b9762f29ef6f50)
– [TypeScriptで学ぶデザインパターン〜Adapter編〜](https://qiita.com/junkimatsuda/items/e8523185d14e53279fb8)
– [TypeScriptで学ぶデザインパターン〜Template Method編〜](https://qiita.com/junkimatsud
Storybookが遅いと感じたらLoocを使おう
[storybook](https://github.com/storybookjs/storybook)を導入したことがある人なら分かるけど、そこそこ規模が大きいReactプロジェクトだと、Storybookのビルドがかない遅いです。いつでも確認できるようにデプロイされたコンポーネントのカタログとして優れているが、頻繁に小さい修正が入るコンポーネントを視覚的に確認するには遅いです。一度に一つのコンポーネントを独立して見て、ステートを操作するためのツールとして相応しくないように感じます。そこで 僕は [looc](https://github.com/jlkiri/looc) を書くことを決めました。
## Loocとは何か？
Looc は、React コンポーネントをすぐに個別にブラウザーで確認するためのツールです。Looc を使うと、コンポーネントを”サンドボックス化”して 独立してprops も操作できるので、表示がどう更新されるかを確認できます。小さい修正ごとに大きいプロジェクトを時間をかけて再ビルドしなくてもすむので、コンポーネントのテストに非常に役に立ちます。一度に一つ
ajax通信のreturnについて【個人メモ】
【コメントで質問OKです】
.done,.failの外でreturnすること“`
var getEventInfo = function(roomID){
console.log(TGVC.sru + “/api/room/event_and_support?room_id=” + roomID)
$.ajax({type: ‘GET’,url: TGVC.sru + “/api/room/event_and_support?room_id=” + roomID, async: false})
.done(function(re) {
console.log(re);
eventInfo = re;
})
.fail(function() {
// room_info = null;
});
return eventInfo; //.done,.failの外で実行
}
“`
javascript Promiseを実際に書いて理解する
#Promiseを理解する。
javascriptを記述するうえで欠かせないのが、非同期処理です。
非同期処理のためPromiseを理解したいと考えております。
（async・awaitという便利な記述もあるみたいですが、それはまた今度）## Promiseを知らないと
今まではPromiseを使わずに、コールバックを多用してました。# 作ったもの
ページを読み込んだときのboxの「height」を表示。
3秒後に「height」が変更。
再度「height」を取得してサイズを表示。# 実際の記述
“`html
“`
“`js
//変数セット
let size = document.querySelector(“.size”);
let box = document.querySele
railsでグラフ表示を行うための手引き
# railsでグラフ表示を行うための手引き
## 近況
テックキャンプに通って早二ヶ月，コロナの影響で自宅学習になって三週間目となりました。最終課題はと言いますとインフラのメインに携わりながらフロント，サーバーサイドに取り組んできた感じです。最終課題における私のダメなところとしては，サーバーサイドの修羅場をくぐり抜けてきた他のメンバーよりもメソッドなりGEMなりの知識が少なく，サーバーサイドの貢献度が低いことです。ここはメンバーに手法を聞きつつ理解したり，個人アプリで反映させて覚えていこうと思います。逆に自分が行なった部分はもちろんある程度詳しくなったので，Qiitaの記事なり活用して残せたらと。**今回の内容は課題と全く関係ないけどね！！！**## 本題
私はサーバーサイドの学習教材としてrailsを用い，個人アプリでもお世話になるのですが，ある時このような疑問にかられました。**『図示ってどうするんだろう』**結論からいうと，JSのライブラリchart.js（オープンソース）を組み合わせるのが一番手軽みたい。ここでは実際に個人アプリに実装するレーダーチャートを元にデー
ブラウザのローカルストレージに情報を保存する
# はじめに
デジタルサイネージでコンテンツを再生する際、他のコンテンツと交互に再生する場合があります。その場合、コンテンツは再読み込みされるため、ニュース情報やショップ情報などは、数十件とある記事から続きを再生する必要があります。
普段はCookieを使って再生位置を記憶させていますが、コンテンツをまたいで記事の続きを再生させたい場合には、localStorageを使って再生位置を保存して、コンテンツで流す記事を調整します。# 目次
1. 環境
2. localStorage
3. localStorageの注意点
4. Store.js
5. Store.jsの使い方
6. 参考# 1. 環境
Windows10 Pro
Chrome 80.0.3987.163 / 64bit# 2. localStorage
>local storageはHTML5の新機能であり、Webブラウザ（すなわちブラウザのユーザー）がJavaScriptを用いて任意の情報を保存できる仕組み
>*～[HTML5のLocal Storageを使ってはいけない（翻訳）](https://tech
