JAPANESE - WORLD IS WIDE

개발자의 일본어 사전(開発の辞書)

開発者がよく使う単語コレクション

일본어 서적을 번역하면서 정리하는 개발 용어.

영어 단어를 그대로 쓰는 카타카나가 많지만 장음이나 표기법 등의 참고를 위해 함께 정리.

上書き [うわがき] – 덮어쓰기(overwrite)
受け取る [うけとる] – 받다(receive)
アクセス [あくせす] – 액세스(access)
値 [あたい] – 값(value)

コンポーネント [こんぽーねんと] – 컴포넌트(component)
コールバック [こーるバック] – 콜백(callback)
切り替え [きりかえ] – 전환(convert)
環境 [かんきょう] – 환경(environment)
組み合わせ [くみあわせ] – 조합(combination)
関数 [かんすう] – 함수(function)

サ

実装 [じっそう] – 마운트(mount)
疎結合 [そけつごう] – 소결합(loose coupling)
設計 [せっけい] – 설계(design)
スキル [すきる] – 스킬(skill)
座標 [ざひょう] – 좌표(coordinate)

タ

トリガー [とりがー] – 트리거(trigger)
デプロイ [でぷろい] – 배포(deploy)
ツール [つーる] – 툴(tool)
データ [でーた] – 데이터(data)
テキスト [てきすと] – 텍스트(text)

ナ

認証 [にんしょう] – 인증(identification)

ハ

振る舞い [ふるまい] – 동작(behavior)
ヘッダー [へっだー] – 헤더(header)
ボディ [ぼでぃ] – 바디(body)
引数 [ひきすう] – 인수(argument), 함수 호출 시 전달 값
パラメータ [ぱらめーた] – 파라미터(parameter), 함수 정의 시 전달 값
フロントエンド [ふろんとえんど] – 프론트엔드(frontend)
フロー [ふろー] – 흐름, 플로우(flow)

マ

マイグレーション [まいぐれーしょん] – 마이그레이션(migration)

ヤ

やりとり – 주고 받음
呼び出す [よびだす] – 호출(call)

ラ

ルーティング [るーてぃんぐ] – 라우팅(routing)
レンダリング [れんだりんぐ] – 렌더링(rendering)

ジャバスクリプト、文字列操作(JAVASCRIPT & STRING)

Javascript文字列のメソッド : slice(), substring(), includes(), startsWith(), trim(), replace()…….

フロントエンド(React, Vue, Angular)もバックエンド(Nodejs)もジャバスクリプト(Javascript)が使われる時代になって、だんだんジャバスクリプトの文法が重要となりますね。

その中、文字列(String)関連のメソッドはよく使うのに、あまり覚えてはいないやつですね。😂

文字列関連のメソッドは一度覚えておくと自動に覚えられるぐらい使う頻度が高いので最初だけ頑張ればですね！

では、頻繁に使うメソッドの中slice(), substring(), includes(), startsWith(), trim(), replace(), indexOf(), test()をご紹介します。

slice(start index, (end index))

sliceメソッドはインデックスをパラメータで渡し、必要な文字列を抽出します。

スタートインデックス(start index)と終了インデックス(end index、省略可)を渡し、終了インデックスを省略する場合は文字列の最後までになります。

パラメータが０の場合は頭から一番目、-1は逆で後ろから一番目の意味になります。

const myWord = 'primavera';

myWord.slice(0,5);   // 'prima'
myWord.slice(-4);    // 'vera'
myWord.slice(3);     // 'mavera'

myWord.slice(3,1);    // '' -> slice()はスタートが終了より大きいと空を返す

substring(start index, (end index))

substringメソッドもsliceと同じくインデックスを渡し、文字列を抽出します。

基本的な操作は同様ですがsubstringはスタートが終了より大きいの場合自動に位置を交換してメソッドを実施します。

また、substringに負数を入れると０と認識します。

例えば(3, -1)を渡すと(3, 0)として認識します。それに(3, 0)はスタートが大きいので自動交換し、(0, 3)を実施します。

メソッド名が似たようなsubstrは’位置’と’文字数’をパラメータに渡すメソッドです。

const myWord = 'invierno';

myWord.substring(3);     // 'ierno'
myWord.substring(1,3);   // 'nv'

myWord.substring(3,1);   // 'nv' -> 自動にスタートと終了位置交換

myWord.substring(3,-1);  // 'inv' -> 負数は0, 自動位置交換

myWord.substring(-4);    // 'invierno' -> 負数は0, スタート(0)から最後まで

myWord.substr(1,3);      // 'nvi' -> スタート1から三つ

includes(文字列, (index))

includesは文字列の中、指定した文字列が含まれているかをチェックします。

パラメータは文字列(必須)とインデックス(省略可)を渡し、返すのはtrue或はfalseです。

このメソッドは指定文字はもちろん、配列の中で空の値を確認するためには使えます。

const myWord = 'alegria';

myWord.includes('le');       // true
myWord.includes('i');        // true
myWord.includes('rio');      // false

const myArray = ['dream','','king'];
myArray.includes('');       // true   -> myArray[1]が空なのでtrue
myArray.includes('dream');  // true   -> myArray[0]と一致
myArray.includes('drea');   // false  -> 要素は完全一致する場合のみtrue

startsWith(文字列, (index)), endsWith(文字列, (index))

startsWithメソッドも文字列が含まれているかをチェックします。

文字列のみ渡すと0インデックスから始まる指定文字の存在を確認し、BOOLEANを返します。

endsWithは指定文字で終わることをチェックします。

const mySentence = 'cafe con leche';

mySentence.startsWith('cafe');     // true
mySentence.startsWith('fe');       // false
mySentence.startsWith('fe',2);     // true

mySentence.endsWith('eche');      // true

trim()

trimは文字列両断の空白を除くメソッドです。

文字列変換の過程で入られた空白またはタイプミスで入った文字列は文字比較の時falseを返し、エラーになりがちです。

なのでtrimで空白を事前に除き、エラーを予防することができます。

文字列両断の空白、タップ、改行(/n)文字を除くことができますが、両断ではなく文字列中に入っているのは作動しません。

const mySentence = '  la casa de papel   ';

mySentence.trim();        // 'la casa de papel'

const mySentence = ' el amor \n';

mySentence.trim();       // 'el amor'

replace(指定文字, 変換文字)

replaceは文字列から指定した文字を探して変換文字に変換します。

文字列の中に指定文字が一つ以上存在するとき、最初に見当たるのだけが変更対象になります。

例えば ‘my_name_is_Ron’からアンダーバーを全部空白にするためreplace(‘_’,’ ‘)にしても結果は’my name_is_Ron’になります。

なので、文字列の中で存在する全ても指定文字を変換したい時は正規表現を使うと行けます。

const mySentence = 'my name is:Ron';

mySentence.replace(':',' ');        //'my name is Ron'

const mySentence = 'my_name_is_Ron';

mySentence.replace('_',' ');      // 'my name_is_Ron'

//正規表現ですべての文字を変換
mySentence.replace(/_/g, ' ');    // 'my name is Ron'

indexOf(指定文字, (start index))

indexOfは指定文字の位置を返します。

このメソッドは指定文字の前または後で文字列を切り取るとき有用なものです。

たとえ、’Z001-03’から後ろの’03’だけを抽出したいとき、indexOfで’-‘文字を探し、返しのindex +1位置から最後までカットすると’03’を切り取ることができます。

もし文字列の中指定文字が一つ以上の場合、頭から探し始め最初に見当たる文字位置を返します。

でもパラメータにindexを渡すと指定された位置から指定文字を探します。

注意点はstart indexを渡しても返す値は全体の文字列から何番目であるという数字を返します。

後ろから検索するのはlastIndexOfで、後ろから最初の指定文字の位置を返します。

この時も返す値は頭から何番目であるという数字です。

指定文字がなければ-1を返します。

const mySentence = 'Z001-03';

mySentence.indexOf('-');     // 4

mySentence.substring(mySentence.indexOf('-')+1);    // '03'

mySentence.indexOf('D');    // -1

const mySentence = 'Z001-03-02';

mySentence.indexOf('-');    // 4
mySentence.indexOf('-', 5);   // 7

mySentence.lastIndexOf('-')   // 7

test(文字列)

testは一般的に正規表現と一緒に使い、渡す文字列と比較し有効性を確認します。

パスワード、アルファベット、特殊文字、生年月日などの形式検査に使えます。

const mySentence = /a/;
const myWord = 'baby';

mySentence.test(myWord);   // true

/\d/.test('cookie');       // false \dは数字を意味(正規表現)
/\d/.test('cookie1');      // true

上の例以外にも山ほどメソッドが多いし、また新しく作られるメソッドもたくさんありますね。

また必要な機能のメソッドがあれば確認していきましょ！

あざーす！

ジャバスクリプトで配列を結合(マージ)する良い方法(javascript)

配列を結合する便利な三つのやり方(concat(), …spread, push())

ジャバスクリプトを使ってデータを扱うことが多くなり、配列を使用する仕組みも増えていきます。

その中、マージ（結合）についてちらっと調べてみますね。

配列(array)はインデックスを持つ要素を順に並べる構造です。

一つの配列ならインデックスまたはメソッド（unshift(), push(), shift(), pop(), splice(), find(), includes(), join(), indexOf()など）を使って配列中のデータを便利に操作することができます。

配列間のマージ方法も同じくconcat(), push(), …spreadなどが存在します。

一つづつ確認してみます。

1. 配列結合の三つ方法

concat

concatenate(連結する意味)の略字であるconcat()は意味通り配列両方を繋ぎます。

次のように扱うので、サンプルから確認してみます。

[array1].concat([array2]…..)

[].concat([array1], [array2]……)

const color1 = ['blue', 'pink', 'white'];
const color2 = ['black', 'orange', 'yellow'];
const num1 = [100, 200, 300];
const num2 = [400, 500, [600, 700]];

const allColor = color1.concat(color2); 
//['blue', 'pink', 'white', 'black', 'orange', 'yellow']
console.log(allColor); 

const colorPlus = color1.concat('gold', ['silver', 'bronze']); 
//['blue', 'pink', 'white', 'gold', 'silver', 'bronze']
console.log(colorPlus);

const colorAndNum = color1.concat(num1);   
//['blue', 'pink', 'white', 100, 200, 300]
console.log(colorAndNum); 

const allNum = num1.concat(num2);   
//[100, 200, 300, 400, 500, [600, 700]]
console.log(allNum);

concatは一つ以上の配列を結合し、一つの配列にします。

配列中のデータの形式（タイプ）にかかわらず結合できるし、ネストされている配列（配列中にまた配列がある構造）の結合もできます。

…spread スプレッド

ES6から追加された文法の一つであるスプレッド構文は配列或はオブジェクトを速くて安全にコピーすることができます。

深いコピー(deep copy)方法でコピーするので、既存のデータとは違うメモリーアドレスを使いますね。

なので配列の結合方法の中では一番いい方法だと言えます。

const musician = ['Chet Baker', 'Miles Davis'];
const actor = ['Clint Eastwood', 'George Clooney'];

const favorites = [...musician, ...actor];    
// ['Chet Baker', 'Miles Davis', 'Clint Eastwood', 'George Clooney'];
console.log(favorites); 

const favoritesReverse = [...actor, ...musician];
// ['Clint Eastwood', 'George Clooney', 'Chet Baker', 'Miles Davis'];
console.log(favoritesReverse)

また、スプレッド構文は次のように非構造化ではよくつかわれています。

const myColor = ['beige', 'burgundy', 'charcoal', 'ivory'];

const [color1, color2, ...others  ] = myColor;
console.log(color1);   // 'beige'
console.log(color2);   // 'burgundy'
console.log(others);   // ['charcoal', 'ivory']

push

push()は配列の最後に要素を追加するときよく使うメソッドです。

push()メソッドとスプレッド構文を一緒に使うと配列の結合ができます。

でもこの方法は既存データの上に新しいデータを上書きするので既存データの変更に注意する必要があります。

const pizza = ['dough', 'cheese', 'meat', 'source'];
const pizzaAdd = ['parmesan', 'tabasco'];

pizza.push(...pizzaAdd);   

// ['dough', 'cheese', 'meat', 'source', 'parmesan', 'tabasco'];
console.log(pizza);

2. 総合

配列を結合する方法の中concat(), …spread, push()について調べてみました。

状況により必要な方法が違うので、システムやロジックを考えた上で選んだら問題はないと思います。

あざーす！

やすくて速い正規表現(Easy Regular Expression)

正規表現の構成と意味、ジャバスクリプト(Javascript)でのお扱い

正規表現というのは検索パータンを指定し記号で表示したものです。

このアイデアはアメリカの数学者であるスティーブンコールクリーン(Stephen Cole Kleene)が1950年代に正義した正規言語(Regular Language)と関係がありまして、正規表現の文法は1980年代にパール(Perl)言語から使い始まりました。

主に、検索や置換の作業に使われ、皆が使うほとんどのプログラミング言語の中でサポートされている文法です。

例えば、次の文章の中で特定した条件を検索するとき正規表現の力を借りることができます。

The greatest danger for most of us is not that our aim is too high and we miss it, but that it is too low and we reach it.

‘too’ 文字列を検索する -> /too/
The greatest danger for most of us is not that our aim is too high and we miss it, but that it is too low and we reach it.
大、小文字を構わなく ‘t’ 文字を検索するとき -> /t/-gi
The greatest danger for most of us is not that our aim is too high and we miss it, but that it is too low and we reach it.
‘d’ から始まる単語及び文字のすべてを検索するとき -> /[d]\w+/-gi
The greatest danger for most of us is not that our aim is too high and we miss it, but that it is too low and we reach it.
‘ea’を含む単語を検索するとき -> /[a-z]*ea[a-z]*/-i
The greatest danger for most of us is not that our aim is too high and we miss it, but that it is too low and we reach it

正規表現の文法テストは次のページが助かります。

regexr.com

青いバーExpressionの下のインプットには表現を入れ書き、その下のボックスには検索対象になるテキストを入れればオッケーです。

まず、表現の意味について少し勉強してからJavascriptで楽に使う方法を確認してみます。

1. 正規表現の記号

/ . / → すべての文字

/ + / → 一つ以上の文字

/ ? / → ０または一つの文字

/ ^ / → 該当の文字を除く

/ – / → 範囲指定

/ * / → ０または一つ以上の文字

/ [ ] / → グループセット

/ { } / → 繰り返しの回数指定

/ \ / → エスケープ

/ \d / → すべての数字

/ \D / → 数字ではない文字

/ \w / → アルファベット、数字、アンダーバー

/ \W / → アルファベット、数字、アンダーバーではない文字

/ \s / → 空白文字

/ \S / → 空白ではない文字

/ \n / → 改行

基本的に正規表現を構成する記号は上記であり、この記号さえ覚えれば正規表現の基本的な仕組みは十分理解できると思います。

それではサンプルを参考しながら正規表現を分析していきましょう。

2. 記号の意味

\d \D \w \W \s \S \n

正規表現で一番基礎になる記号であるので覚えておくと役に立ち部分です。

dは数字、 wは英文字、 sは空白、 nは改行の意味であり、各文字の大文字は NOT(反対)を示します。

数字が一回以上繰り返す文字検索 👉 / [\d]+ /

数字ではない文字を検索（空白含む） 👉 / [\D] /

括弧(かっこ)が含まれている文字、数字検索 👉 / $[\w]+$ /

英文字、数字、アンダーバーではない文字検索 👉 / [\W]+ /

空白検索 👉 / \s /

上で紹介したregexr.comで検索対象になるテキストをいれてパータンを直接に作成してみるとすぐ正規表現になれると思います。

\ エスケープ Escape

大体エスケープというのは何ですかね。

キーボードの一番左一番上のキー(ESCと書かれているもの)がエスケープの略字です。エスケープの意味は逃れるのです。

こちらでは約束から逃れることだと認識すればいいと思いです。

例えば、正規表現で点(. dot)はすべての文字の意味にしようと約束した特別な文字ですね。

でもたまには’それ約束以外’に点をピリオド意味の点で使いたいときがありますね。

この時エスケープを使います。

エスケープを使わない限り、文字は約束した機能として動きます。

下の例で確認しましょう。

すべての文字を意味。 a, b, c, d, ?, !, @, , などすべての文字の中一つ 👉 / . /

エスケープを前につけるとただピリオド記号だけの意味 👉 / \. /

一つ以上の文字の意味 👉 / + /

エスケープを前につけるとただプラス記号だけの意味 👉 / \+ /

エスケープはよく使われる必須な機能であるので、そのままの文字にはならないのでエスケープが必要な特別な文字(. ? + *など）を覚えておく必要があります。

その文字の一部を下で紹介します。

. + ? ^ – *

上で紹介した特別な記号は特別な意味を持ちます。代表的な使い方は下の通りです。

小文字a~z或は大文字A~Z中一致する英文字検索 👉 / [a-zA-Z] /

color或はcolourを検索(‘u’があってもなくてもいい) 👉 / colou?r /

‘a’を含む単語検索 👉 / [\S]*a[a-zA-Z]* /

a-z或は空白(space)ではない文字検索 👉 / [^a-z ] /

英文字から始め必ず数字または特殊記号を含む文字列を検索 👉 / [a-zA-Z]+[\d!@#\$%\^*]+[\w]* /

{ } 中括弧(かっこ) curly brackets

中括弧は繰り返しの回数を指定し、これを使うと詳しい検索パータンの設定が可能です。

中括弧の中、一つの数字は全体の繰り返し回数の意味であり、二つの数字は頭と末の範囲を指定する意味です。

例え、{3}は３回繰り返しの意味であり、{1, 3}は範囲区間1から3の意味です。

{1, }のような表現も可能であり、これは+記号と同様な意味,　つまり一つ以上の意味であります。

Aが3回繰り返す文字を検索 👉 / [A]{3} /

3桁以上の数字を検索(3번以上繰り返し) 👉 / [\d]{3,} /

Aが二回から三回まで繰り返す文字を検索(繰り返す範囲指定) 👉 / [A]{2,3} /

繰り返し回数だけを指定すれば、意図しない結果が出ることがあるので、部分式(subexpression)と全後方一致検索を一緒に使うともっと効果的なパータンが可能です。

[ ] 角括弧(かっこ) Brackets

角かっこの中に記号を書き、検索パータンを指定します。直接に記号を書き込んだり、範囲指定記号の’-‘を使ってパータンを指定します。

指定する文字(a 或は A 或は b 或は B 或は c 文字)一つを検索 👉 [aAbBc]

aから eまで(a,b,c,d,e)の範囲内一つの文字を検索 👉 [a-e]

除外文字’^’があるので a-z 範囲に入らない文字(記号)を一つ検索 👉 [^a-z]

明記した記号の一つを検索 👉 [?!@#$%^&*()_]

c或はCから始め, a-zの中一つで終わる単語検索 👉 [cC][a-z]

[ ]を使うと一つだけの文字を検索するので一つ以上の文字を検索したいときには+記号（一つ以上の文字、０は不可）または＊（０または一つ以上の文字、０も可能）記号を付ける必要があります。

一つ以上のa-z文字を検索(必ず一つ以上の条件) 👉 [a-z]+

０個以上のA-Z文字を検索(なくてもいい) 👉 [A-Z]*

特定構成で成り立つ文字列の検索に効果的であり、例えばメールアドレスの文字列があります。

メールアドレス形式のabcd@xyz.comを検索するためには次のようなパータンを使うことができます。

/[a-zA-Z0-9]+@[a-zA-Z0-9]+\.[a-zA-Z]+/

では、パータンを分析してみます。

先、メールのIDになる部分は英文字と数字が入るので、[a-zA-Z0-9]で始め一つ以上を意味する+記号を付けます。

その次、@が続きますので@を入れ, ホストのアドレスも一つ以上の英文字と数字を指定します。

.com形のアドレスなのでピリオドをそのまま使うためエスケープを使いまた一つ以上の英文字を入れてパータンを生成します。

もしIDの中に点が入るかホストアドレスが.co.jpなどの形になるときにはそれに対する応用が必要です。

3. まとめ

正規表現の第一印象はまるで外界言語みたいな姿で広く使われる既存の言語とは違う様子をしてますね。

軽く近づけられなくいやな気持がするときもありますが、少しだけでも調べてみたら意外と簡単な規則でパワフル機能を持っていいやつだなと思われる時が来るかもですね。

上で紹介した部分は代表的な機能を紹介するため簡単なパータンたちなので、上のパータンは不完全なパータンであります。もの正しいパータンを作るためにはもっと深く勉強する必要がありますね。

ご質問がありましたら、自由にコメントください！

あざーす！