JavaScript関連のことを調べてみた2021年02月15日

Javascriptのカリー化と部分適用とパイプライン演算子の話。

皆さんアロー関数大好きですよね。
アロー関数かっこいいですよね。

“`Javascript
const plus = (x, y) => x + y
“`

引数を2つ受け取って和を返す関数を作りました。さてカリー化しましょう。
は？カリー化ってなにって感じですよね…

**考えるな、感じろ。**

というわけで理論的な説明は置いといてカリー化を感じてください。

“`Javascript
const curriedPlus = x => y => x + y
“`

さて問題です。関数curriedPlusの説明として正しいのはどちらでしょう？
1. 引数を2つ受け取って和を返す関数。
2. 引数を1つ受け取って(引数一号くんと名付けましょう)、「引数を1つ受け取って引数一号くんとの和を返す関数」を返す関数。

勘のいいあなたならもうお気づきでしょう。答えは２です。

“`Javascript
const curriedPlus = x => (y => x + y)
“`

ほら、関数が返ってるように見えるでしょ？

例えばxに10を代入してみましょう。

“

【2021年版】サーバーサイドエンジニアがVue.jsでモダンフロントエンド開発を始めるまで

2020年12月からのプロジェクトで、Vue.js(2系)によるモダンフロントエンドの開発の一端を担うことになりました。そこで、プライベートで2ヶ月ほどフロントエンド開発の学習をし、なんとかフロントエンドの業務をこなせるようになってきましたので、やったことをご紹介します。

意外とやるべきことが多かったため、体系的にまとまっていると今後復習する際に役立つかと考え、この記事を執筆することにしました。

## これまで

Web系の受託開発会社に入社し、1年ほどサーバーサイド開発をメイン行ってきました。
この1年間はRuby, Ruby on Rails, RSpec にどっぷり浸かっている一方、フロントエンド開発はほぼゼロの状態からのスタートでした。

## やったこと

### JavaScript

#### JavaScript Primer を読む & ハンズオン

**所要時間: 20時間**

– まずは JavaScript の言語仕様を理解することを重視し、時折ハンズオンを交えながら進めました。
– プログラミング言語を Ruby しか知らない私でもだいたいは理解すること

【React Native】簡単なAPI連携のアプリケーションを作成する　①準備編

#はじめに
2021年になってからUdemyで下記の講座で勉強していたため、学習のアウトプットとして記事にします。
[2021年版 React Native, Firebase, Expo でアプリ開発をゼロから始めよう！](https://www.udemy.com/course/react-native-ios-android/)
業務でもスマホアプリ関連に携わっていますが、SwiftやKotlinはちょっと敷居が高そうなのでReact Nativeで開発してみました。

## 本記事で説明すること

* 環境構築（公式ページの紹介程度）
* アプリの作成手順
* アプリ開発の流れ、実機での確認手順

# 環境
* OS: Windows（macもそんなに変わらないと思います）
* Expo: 3.28.5
* Node.js: v14.15.0

# 実行する予定のAPI
* [郵便番号検索API](http://zipcloud.ibsnet.co.jp/doc/api)
* [Weather API](https://openweathermap.org/api)
上

【Vue.js】v-forで回ってきたオブジェクトをcomputedにデータとして保持する

#はじめに
このようなデータがv-forで使用され、中身のオブジェクトをデータとして保持したい時がある。
その時の例を備忘録として残す。

“`vue
data () {
return {
members: [
{
id: 1,
name: ‘sato’
},
{
id: 2,
name: ‘tanaka’
},
{
id: 3,
name: ‘kobayashi’
}
],
}
}
“`

##選択要素のidを取得
1. レンダリングされたnameの元のオブジェクトからidを取得するイベントを設定する。
2. 取得したidをもとに__dataに保持__

“`
data() {
return {
selectedMemberId: undefined
}
},
methods: {
setId: f

【Express】__dirnameと__filenameの使い方

#プログラミング勉強日記
2021年2月14日
[昨日の記事](https://qiita.com/mzmz__02/items/23e8e8f840ccd169daec)で`__dirname`を扱っているが、いまいち理解できていなかったのでまとめる。

#__dirnameとは
　現在のディレクトリのパスを示す特別な変数。

“`js:
// C:/sample/sample.js
console.log(__dirname);
// C:/sample と表示される
“`

#__filenameとは
　現在のモジュールの絶対パスを取得する。

“`js
// C:/sample/sample.js
console.log(__filename);
// C:/sample/sample.js と表示される
“`

#参考文献
[面倒なJavaScriptコードのとりまとめがこれ1つで可能に、「webpack」入門](https://knowledge.sakura.ad.jp/21623/)

ReactでMarkdownエディタ(code highlightと画像のD&D upload)を使う

# react-markdown-editor-lite
要件に合うものを探していた結果、これを使ってみることにしました。
Repository:
Demo:
Demo: source

# 環境
– Windows 10
– node v14.15.4
– PHP 7.2.34(XAMPP) ※ アップロードテスト用

“`powershell
npx create-react-app react-app
“`

“`json
“devDependencies”: {
“axios”: “^0.21.1”,
“highlight.j

Node.jsからC++クラス、dllを使う

## はじめに
– node.jsからC++関数を利用するための記事、第三弾です。
– 今回は、C++のネイティブクラスをラッピングしたり、dllを利用するための方法をまとめます。
– この記事では、`node-addon-api` を利用しています。

## 環境構築がまだの方は？
– この記事の内容をトライする前に、以下の記事で環境構築を完了させてください！
– [【Step-By-Step】Node.jsからC++クラスを利用する](https://qiita.com/NA_simple/items/dc31f9ae9519602f9f50)

## 目次
– [1. ネイティブC++クラスの追加](#1-ネイティブcクラスの追加)
– [2. ネイティブC++クラスのラッピング](#2-ネイティブcクラスのラッピング)
– [3. javaScriptからC++クラスを使ってみる](#3-javascriptからcクラスを使ってみる)
– [4. dllを利用する](#4-dllを利用する)

##1. ネイティブC++クラスの追加
– node.js

React.FC使う必要ある？

## はじめに
React.FC型を使うことが絶対に悪いことだと言う記事ではありません。

ただ、React.FC型を使うことにもいくつかデメリットもあり、React.FC型をあえて使っていないプロジェクトが多く存在します。
今回はそんなReact.FCについて書いていきます。

## React.FCとは
“` jsx
type Props = {
hoge:string
}

const Component:React.FC = ({hoge}) => {
return (

{hoge}

)
}
“`

`React.FC`はReactの関数コンポーネントを定義するための型です。
ジェネリクスにpropsの型を入れられます。

## React.FCを使わなくても書ける
“`jsx
type Props={
hoge:string
}

const Component = ({hoge}:Props) => {
return (

{hoge}

究極に便利な検索サイトを作った【Ultimate search】

Qiita初投稿失礼します、たぬきっつぁんと申します。一応高校生です。

2年ほど前から勉強し始めたHTML/CSS/JavaScriptを使って初めて作った、ネット検索を便利にするために作ったサイトについて紹介します。初めて技術系の記事を書いたので読みづらい点もあると思いますが、よろしくお願いします。

## Googleっぽいサイトを作ってみたい！

最初の動機はそんな感じでした。Googleのサイトってとてもシンプルなので自分のような初心者でも作れるのではないかと思った次第です。

しかし完全に同じサイトを作るのはただのコピーサイトになってしまうので、どうせだったらGoogle以外のサイトも一緒に検索できるサイトを作ることにしました。

ここからはUltimate searchができるまでに作った4つの検索サイトを紹介していきます。

## GoogleAmazonTwitterYouTubeサーチ、略して「GATY search」

![app.tanukizzan.com_gaty-search_ (1).png](https://qiita-image-store.s3.a

Payjp v2をRuby on Railsアプリに導入する：購入処理編

※この記事は後編です。
前回の記事はこちら
[カード登録処理編](https://qiita.com/tokiya_ruby/items/2d04708676460392afbc)

## まずは処理の流れを確認(コントローラ名#アクション名)
1. カード登録処理 [前回](https://qiita.com/tokiya_ruby/items/2d04708676460392afbc)
1. カード登録画面へ遷移(cards#new)
2. カードを登録(cards#pay)
3. カード情報表示ページへ遷移(cards#show)
4. (必要であれば)カード情報を削除(cards#delete)
2. 購入処理　　←今回はこっちやで
1. 購入画面へ遷移(orders#new)
2. 購入ボタンを押下→確認画面へ遷移(orders#confirm)
3. 購入確定ボタンを押下(orders#create)
4. 購入完了画面へ遷移(orders#complete)

***それでは実装していきましょう***

#

久々reactでの個人的ハマったポイント備忘録

reactとreduxを一気に学習すると最初はわかったつもりでも
忘れたり、こんがらがったりすることがありました。
その中での備忘録です。

# getElementByIdでオブジェクトが取れない
自分の場合はコンポーネントのライフサイクルを完全に忘れてしまっていました。
コンポーネントのライフサイクルをざっくり書くと

コンポーネントがマウントされて
↓
再レンダーされて
↓
アンマウントされる

というものです。

“`errorCompleteGet.jsx

const ButtonText = () => {
const buttonName = document.getElementById(“button”).innerText;

const getButtonName = () => {
alert(buttonName)
}

return (

{getButtonName()}} id=”button”>ボタ

Swiperを使ってスライダーアニメーションを実装する〜使い方編〜

## はじめに

タイトルについて記事にしました。
この記事で得る内容は以下の通りです。

・ Swiperの各クラスの役割やオプションについて

■ 関連記事
[Swiperを使ってスライダーアニメーションを実装する〜導入編〜](https://qiita.com/s79ns/items/08a7775f47122acbdcff)

## HTML

以下は公式の『Add Swiper HTML Layout』よりコピー＆ペーストしたものです。
それぞれのクラスの役割について順に説明します。

“`html:index.html

Slide 1

Slid

リストが二つ表示される時の解決方法

このように書くと**リストが二つ**できてしまいます。

“`js:jQuery
$(‘.modal’).find(‘ul’).append(‘

‘);
“`
下記のように、二つ目の「li」を「/li」に修正（スラッシュを加える）と解決します。

“`js:jQuery
$(‘.modal’).find(‘ul’).append(‘

‘);
“`

このように、一つだけ書いたつもりが二つ表示される時には、スラッシュが書かれてるか確認すると良いです。

jQueryで要素の属性を指定する方法 attr()

“`index.html
リンク
“`
aタグに対してリンク先をjQueryで動的に選択したい場合は　attr()を使います。

“`main.js
$(‘a’).attr(‘href’,’./sample.html’);
“`

このように書くと動的にhref属性を指定することができます。
また、このattr()ではhref以外の属性も指定が可能で
例えばid属性も指定することができます。

“`main.js
$(‘a’).attr(‘id’,’link’);
“`

複数の属性を指定することも可能です。
その場合はオブジェクト型で指定してあげれば大丈夫です。

“`main.js
$(‘a’).attr({
id: ‘link’,
href: ‘./sample.html’,
name: ‘sample’
});
“`

このように書いてあげると自由に属性値を指定してあげることができます。
ぜひ使ってみてください！

【jquery,js】jsの処理をリファクタリングする１ [each,prop] [js02_20210214]

#### 処理の概要
重量別の鉄アレイを選択した時、一定の条件（5kg以上、且つ2個以上）をクリアすると送料を無料にする

##### 処理のフロー：
　(1)鉄アレイを選択する（複数可能）
　(2)実行ボタンを押下
　(3)チェックボックスにチェックが入っているかを判断
　(4)チェックされている場合は、重量とカウントを増分させる
　(5)送料を判断する

#### 画面イメージ

#####画像１

#####画像２
react-native-testing-libraryをexpoで使ってみる

# インストール
– https://github.com/callstack/react-native-testing-library

### 必要なパッケージをインストール

“`
yarn add –dev @testing-library/react-native
yarn add –dev @testing-library/jest-native
yarn add –dev jest-expo
yarn add –dev @testing-library/user-event
“`

### package.jsonを編集
“`
{
“scripts”: {
….
“test”: “jest”
},
“jest”: {
“preset”: “jest-expo”,
“transformIgnorePatterns”: []
},
“`
# react-native-testing-libraryの概要
– 参考：[React Testing Libraryの使い方](https://qiita.com/o

[JavaScript]for文、forEach関数ついて

#for文とは
for文とは、繰り返し処理を実行するためのJavaScriptの構文です。

for文の構文は以下のようになります。

“`javascript:コンソール
for ([①初期化式]; [②条件式]; [③加算式]) {
// 繰り返す処理の内容
}
“`

#①初期化式
for文の中で使用する変数を定義します。ここで定義した変数は「今何回目の処理か」を判定するために参照されます。

#②条件式
for文の処理を何回繰り返すかを指定します。この条件式の戻り値がtrueで有る限り処理は行われ続けます。

#③加算式
初期化式として定義した変数の増減を記述できます。

i++と記述することで、カウンタを1ずつ加算するという意味になります。

#for文の例

“`javascript:例１
for (let i = 0; i < 10; i++){ console.log(`腹筋${i+1}回目`) } #実行結果 腹筋1回目 腹筋2回目 腹筋3回目 腹筋4回目 腹筋5回目 腹筋6回目 腹筋7回目 腹筋8回目 腹筋9回目 腹筋10回目 ``` カウンタは0か

react/javascript 삼항연산자

#조건문과 삼항연산자

“`react

const todos = [
{
id:1,
할일:’소희 한글 프린트하기’,
done:true
},
{
id:2,
할일:’메모하기’,
done:false
}
];

const filtered = todos.filter(todo => todo.id !==2);

const toggled = todos.map(todo => todo.id == 2?{
…todo,
done:!todo.done
}:todo);

“`

정말 무슨뜻인지 몰라서 고민했다.

const filterd 는 알겠는데
const toggled 의 뜻을 몰라 한참동안을 생각했다.
위 toggled 는
첫째 todos 가지고 맵을 이용해서 조건을 돌린다.
둘째 todo.id ==2 와 같다면 출력 그리고 done 을 반대로 설정하고 출력하라는 뜻

chartjs オプション変更後グラフ更新する

##動機
chartjsグラフのオプションを変更してから、グラフ更新するコードをメモします。
ネットで探しましたが、なかなか見つけられなくて、メモします。
複雑ではなく、簡単なコードで記録します。

##グラフの縦スケールの最大値を変更してから、グラフを変更する例

“`html:index.html