Firebaseを使わずにブラウザ上でローカル画像をリサイズ【canvasのdrawImage()をReactで利用した方法】

Firebase側で画像のサイズを変えることはできますがFirebase側への通信量を抑えたいと思ったのでブラウザ上でサイズを小さくすることにしたことのまとめです。
プロフィール画像を想定していて画像の最大幅がある程度は分かっていた流れがあります。

## 成果物
アップロードされた画像は canvas の drawImage() でリサイズされたものです。

## ソースコード

```App.js
import { useState } from "react";
import "./styles.css";

const uploadToFirestore = () => {
console.log("画像をuploadしました"); //ダミー処理
};

const App = ()

Vue.js入門～jQueryとの対比編～

こんにちは！
LIFULLエンジニアの吉永です。
本日は最近あまり関わらなくなったのであまりキャッチアップできていなかったフロントエンド開発技術についてインプットした内容を備忘録として記載していきます。

## 本記事の概要

私自身、jQueryを用いたフロントエンド開発はなんとなく実装イメージが湧くのですが、Vue.jsで同じことを実現しようとすると都度検索してということが多いので、jQueryとVue.jsで同じことを実現する際のコードの対比を記していこうと思います。
なので、対象読者はjQuery経験者でこれからVue.jsに入門しようとしている人となります。

また、私自身jQuery経験者ではありますが、ベストプラクティスを知っているかと言われると自信がないので、有識者の方から見たらおかしな実装になっている箇所も多々あるかと思いますし、Vue.jsに関しては初心者なので、もっとひどいかもしれません・・・ツッコミどころ満載な内容になってしまっているかもしれませんが、ご容赦くださいませ。

なお、Vue.jsに関しては現在個人的に学習中の教材がバージョン2系になっているので、2

【WYSIWYG】WYSIWYGエディタ

# WYSIWYG（ウィジウィグ）とは
- 「What You See Is What You Get」の略
- 入力画面と出力画面が一致する様に表現する技術

# よく使用されるライブラリ
## Draft.js
[公式サイト](https://draftjs.org/)

### 特徴
- Facebook製
- Reactベースで作られているため、簡単かつ堅牢な仕組みで実装可能
- Twitter、Wantedly等で使用されている

### データの入出力方法
- 入力: JSONで保存可能
- 出力: [draft-js-export-html](https://www.npmjs.com/package/draft-js-export-html?activeTab=dependencies) を使用することで保存データ（JSON）をHTMLへ変換可能

## Quill
[公式サイト](https://quilljs.com/)

### 特徴
- PC・タブレット・スマートフォンに対応
- Slack、salesforce、LinkedIn等で使用されている

### デ

モダンJavaScriptの使用にあたって覚えておきたいこと

#本記事
本記事は筆者がJavaScriptを学習している中で学んだことを記したものです。
備忘録的な位置付けですので、間違い等あるかもしれませんが、よろしくお願いします。

#モダンJavaScriptとは
仮想DOMを用いるライブラリ/フレームワークを使用している、npm/yarn等のパッケージマネージャーを使用している、ES2015(ES6)以降の記法を使用している。webpack等のモジュールパンドラーを使用していること。Babel等のトランスパイラを使用していること。

#JavaScriptとは
・Webブラウザ上(HTMLやCSSで構成される)で複雑な動きをするためのもの。

#仮想DOMとは
DOMとはdocument object modelの略。HTMLなどを解釈して木構造で表現したもの。JavaScript上でかそうDOMを使用して差分を抽出して変更分のみDOMで操作する。

#npm/yarn等のパッケージマネージャー
かつて、JavaScript開発では一つのJSファイルに全てを記述していた。
それを大きな処理ごとに分割して使う様になった。
しかし、読み込

2021年 給料が一番高いプログラミング言語 5選

多くの人が高給のためにプログラミング業界を選びますが、世界で最も収益性の高いプログラミング言語は何か知っていますか？
##1）Java
「Javaは時代遅れですか？」と尋ねるかもしれません。もちろん、そうではありません。
なぜJavaはまだ人気があるのですか？Javaは最も古く、堅牢なプログラミング言語の1つです。また、主にAndroidアプリケーション開発に使用されるオブジェクト指向言語です。これが、今日でも使用されている主な理由の1つです。しかし、Kotlin（Android開発にも適しています）のようなプログラミング言語の出現により、Javaの人気は低下しています。
ただし、Javaは依然として最も高額なプログラミング言語の1つであり、かなりの需要があります。Indeedによると、ソフトウェア開発会社はJava開発者に興味があり、毎年10万

単語をfor文を用いて接続

単語をfor文を用いて接続

言語: Javascript

```javascript
const mySports = ["野球" , "サッカー" ,"テニス"]
let text = "私の好きなスポーツは"
for (let i = 0; i < mySports.length ; i++){ text += mySports[i] if (i !=mySports.length - 1){ text +="と" } } text += "です。" console.log(text) ``` 上記のコードで重要な点
・リストの長さを取得するメソッドはリスト.length
・for 文のなかにif文を用いて場合わけする点

JavaScriptで1から100までを出力

```
for (let number=1;number<=100 ;number++) { console.log(number); } ```

javascriptリファレンス

デフォルト引数
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Functions#default_parameters

論理演算子
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#logical_operators

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_NOT

coffee

coffee の存在チェック
http://coffeescript.org/#existential-operator

CoffeeScriptの exsitential operator

https://coffeescript.org/#existential-operator

mdn読む。

【javascript】Symbol()を使ってfilterMap()

#前置き

前回

https://qiita.com/noenture/items/121575071fec9fa11dd6

フィルタでfalsyな要素は`Symbol('ignore')`を返すようにする。

#function

```javascript
const APPS = {
ignore: Symbol('ignore'),
filterMap: (array, func) => {
const arr = array.slice();
const res = [];
for (let i=0,len=arr.length; i i%3===0 ? a.slice(i,i+3)

javascriptは処理がバラバラ

javascriptは上の処理が終わってなくても次の処理が始まるので、順番にしたい場合はインデントつける。

個人制作：Todoリストを作成しました

## Todoリストを作成しました！
ProgateでのJavaScript学習が落ち着いたので、思い切ってTodoリストを作成しました！

https://kiku-cha.github.io/todo/

学習したとはいっても、まだガッツリ出来るというわけではないので、
参考物を確認しながら、作成するにあたっての考え方、組み方などを理解出来るようにすることを
目標として作成を行いました。

## 作成したい内容にマッチしたものを参考にしました
日付の表示・並び替えといった機能も実装したいな〜と考えていましたが、
初めての作成ということなので、
**① 記入したものを表示、削除が出来る
② タスクの内容をローカルストレージに残すことが出来る**
といったシンプルなTodoリストを作成することに決めました。

上記の内容に当てはまったのが、以下のサイトで紹介されているTodoリストでした。

JavaScriptで作るTodoリスト

こちらを参考に、作成を