primal - デジナーレ

こんにちは、デジナーレ福岡オフィスの徳安です。

この記事では、分割代入について説明します。

分割代入とは
配列の分割代入
オブジェクトの分割代入
関数の引数に対する分割代入

分割代入とは

分割代入とは、配列やオブジェクトの要素を直接、

変数として取り出して使用する記法。

配列、またはオブジェクトから

プロパティを取り出して、別個の変数に代入すること

配列の分割代入

配列の分割代入では、右オペランドの配列の要素(value)が

左オペランド(key)の[変数A、変数B]に代入される。

【構文】

【変数ｘ、ｙ、ｚを宣言し、配列の要素を代入】

↑ 1 2 3 が出力される。

通常の変数宣言では、個別に宣言し、

一つづつ変数に代入する必要があったが、

配列で変数宣言することで、記述が省略できる。

【配列の要素に不要なものがある時】

↑ 1 3 が出力される。

不要な要素がある場合は

空白にすることで、スキップが可能。

【宣言済みの変数】

↑ 1 が出力される。

変数が宣言済みであっても代入が可能。

【デフォルト値の設定】

↑ 4が出力される。

配列の中にデフォルト値を設定することも可能。

【スプレッド演算子との併用】

↑ 1[ 2, 3 ]が出力される。

オブジェクトの分割代入

配列の分割代入では、

配列の順番通りに変数の値に対して代入されるが、

オブジェクトの分割代入では、

プロパティ名と変数名を一致させる必要がある。

【構文】

【例1】

オブジェクトの分割代入は、

プロパティ名の変数を宣言するので、

プロパティの順番は関係しない。

【例2】

プロパティと変数を同時に変更も可能。

【例3】

スプレッド演算子との併用も可能。

【例4】

多階層のオブジェクトにも展開できる。

【例5】

代入する変数を先に宣言しておくことで、

動的にプロパティ名を指定できる。

関数の引数に対する分割代入

【構文】

上記では、3つ目の要素のみ関数内で使用。

その後関数の実引数として配列を渡したので

コンソールにgrapeが出力される。

空白と , (カンマ)を使用し、不要な要素は引数として設定せず

3つ目の"grape"のみ変数fruit3に格納している。

【例】

上記では、orangeのみ引数として抽出し、

関数の実引数として、オブジェクトを渡したので、

コンソールにオレンジが出力される。

今回は、分割代入についての内容でした。

ここまで、読み進めていただきありがとうございます。

こんにちは、デジナーレ福岡オフィスの徳安です。

この記事では、「transform（変形）」について説明いたします。

transform
translate (移動)
scale (拡大・縮小)
rotate (回転)
skew (傾斜)
transform-origin (変形の原点)
まとめ

transform

transformプロパティは二次元座標での変形を行うプロパティ。

値に、translate() scale() rotate() skew()

のトランスフォーム関数を取る。

transformでは、

「回転」「拡大・縮小」「移動」「傾斜」させることが可能。

【例】

translate (移動)

translate()関数は、

要素をX軸方向、Y軸方向に移動させることができる。

X軸方向の値をプラスにすると右、

マイナスで左へ移動。

Y軸方向の値をプラスにすると下、

マイナスで上へ移動する。

青色の四角形に「50px, -40px」と指定し、

X軸方向に50px、Y軸方向に-40pxの移動を指定。

　黄色の四角形に「Y 40px」と指定し、

Y軸方向に移動40pxの指定。

scale (拡大・縮小)

scale()関数は、

要素をX軸方向、Y軸方向に拡大縮小させることができる。

変形の原点は、オブジェクトの中心となる。

青色の四角形に「1.4,0.5」と指定し、

X軸方向は1.4倍に拡大し、Y軸方向は0.5(50%)に縮小。

黄色の四角形に「X=1.4」と指定し、X軸方向は1.4倍に拡大。

rotate (回転)

rotate()関数は、角度を指定して

要素を回転することができる。

プラスの角度指定で時計回り、

マイナスの角度指定で反時計回りに回転する。

回転の原点は、オブジェクトの中心となる。

軸を明記するとその軸を中心とした

反転効果となる。

青色の四角形に「20deg」は

時計周りに20度回転になる。

黄色の四角形に「-20deg」は

反時計回りに20度回転になる。

skew (傾斜)

skew関数は、X軸方向・Y軸方向に要素を傾斜させることができる。

青色の四角形に対して「15deg」と指定し、

X軸方向に傾斜率15度の指定。

黄色の四角形に対して「15deg」と指定し、

Y軸方向に傾斜率15度の指定。

transform-origin (変形の原点)

Webページにはブラウザの左上を原点とする座標系があり、

各要素はそれに基づいて配置される。

各要素にはそれとは別に自分自身の左上を原点とする、

ローカル座標を持っており、

transform-originプロパティが原点の位置を決めている。

ローカル座標の原点は、通常オブジェクトの左上だが、

transformプロパティを使って、変形処理を施した場合、

自動的に値が「50% 50% (オブジェクトの中央)」に

セットされる仕様となっている。

ローカル座標の原点は、transform-originの値の変更で変更可能。

\X軸方向の位置は、

比率 / 数値 / left / center / rightが設定可能。

Y軸方向の位置は、

比率/数値 / top / center / bottomが設定可能。

まとめ

今回は、transformプロパティについての内容でした。

ここまで、読み進めていただきありがとうございます。

こんにちは、デジナーレ福岡オフィスの徳安です。

この記事では、JavaScriptの関数についてについて説明いたします。

関数とは
メソッドとは
関数の定義方法
関数宣言による関数の定義
関数式による関数の定義
関数宣言と関数式の違い
引数にオブジェクトを渡したときの挙動
コールバック関数
無名関数を使ったコールバック関数関数
アロー関数
アロー関数と無名関数の違い

関数とは

関数とは、あるデータ（インプット）を受け取り、

何らかの処理を行ってその結果を返す（アウトプット）、

一連の処理のまとまりのこと。

メソッドとは

オブジェクトのプロパティとして関数を持つことが可能となっており、

このような関数のことをメソッドと呼ぶ。

オブジェクトやメソッドには、

ユーザーが独自で定義するもの以外に、

JavaScriptエンジンによってあらかじめ用意されている

「標準組み込みオブジェクト」が存在する。

＊オブジェクト　キーと値を対で格納する入れ物

関数の主な定義方法

JavaScripでは、

＊関数宣言による関数の定義する方法と

＊関数式によって定義する方法

の2種類があり基本的にはどちらの方法でも同じように

関数を定義することができる。

「関数宣言」による関数の定義

関数宣言で関数を宣言する場合、

functionのキーワードに続けて関数を記述する。

関数に渡すインプットのことを引数、

関数の処理の結果（アウトプット）は戻り値とよび、

returnに続けて値を設定する。

※ 引数、return 戻り値は省略可

【例】

実行結果

このように関数を用いて処理をまとめることで、

同じ処理を何度も書く必要がなくなり、

コードの再利用性や保守性を高めることができる。

■戻り値

return文は複数記述できるが、

初めのreturn文が呼び出された時点で

関数の処理は終了する。

また、return文が関数内に存在しない場合は、

関数の最後まで処理が実行され、

実行元にundefinedが返される。

「関数式」による関数の定義

関数の定義は、代入演算子( = )を使用して、

変数に関数式を代入することができる。

※ 引数、return 戻り値は省略可

【例】

実行結果

「関数宣言」と「関数式」の違い

＊関数宣言＊

関数宣言では宣言された関数は

重複してもエラーにならず、

後から宣言された関数によって上書きされる。

実行結果

また、関数宣言で関数定義を行った場合は、

関数の宣言文より前に実行文を記述できる。

実行結果

※ES6で追加されたES Modulesという機能を有効化することで、

重複した関数名が使用された際に、エラーを発生させることができる。

( scriptタグ内に「type="module"」を記述することで有効化することが可能。 )

＊関数式＊

関数式で関数名が重複している場合は、エラーが発生する。

上記でエラーが発生するのは、

関数宣言の重複によるエラーではなく

「const」や「let」で変数を再宣言した際に

発生するエラーと同様。

関数式で定義された関数はfunctionの後に

関数名の記述の必要がない。

関数名の定義がされていない関数のことを無名関数と呼ぶ。

実行結果

関数宣言では関数の宣言前に実行文を記述できたが、

関数式で定義前に実行分を記述するとエラーが発生する。

実行結果

引数にオブジェクトを渡したときの挙動

関数の引数としてオブジェクトを使用する場合は、注意が必要。

この場合のobjとobj2は同じオブジェクトを参照を保持している。

変数が参照している、

オブジェクト自体が別のものに変わるため、

コンソールで出力した結果が変わっている。

上記例は、新しいオブジェクトとして定義しているため、

コンソールで出力した際の結果は関数外で定義した「1」となる。

★引数でオブジェクトを渡した場合、

オブジェクトの中身を変更すると、

『関数外のオブジェクトにも影響』する。

しかし、新しいオブジェクトを設定した場合は、

関数外のオブジェクトには影響しない。

コールバック関数

コールバック関数とは、ほかの関数に引数として渡す関数のこと。

※ 引数、return 戻り値は省略可

【例】

実行結果

上記の例では、fnに渡されたhello関数、morning関数がコールバック関数。

fn関数内では、渡されたコールバック関数をcallbackという引数で扱う。

無名関数を使ったコールバック関数

名前付き関数とは複数回呼び出されることを想定しているが、

無名関数は基本的に一度しか呼び出されないケースで使用される。

※ 引数、return 戻り値は省略可

上記の例だと3秒後 Hello!! というメッセージが、

コンソールに出力される。

アロー関数

アロー関数とは、無名関数の省略記法のこと。

先ほど記述した通り、

関数式は名前がなくても記述が可能で、

名前がない関数のことを無名関数と呼ぶ。

その無名関数をアロー関数で省略して記述することが可能。

アロー関数は英語で「Arrow Function」

「Arrow」は「矢、矢印」と言う意味。

コールバック関数に使う無名関数を

アロー関数に置き換えることもできる。

【引数がない場合】

引数がない場合は、アロー関数の先頭の()は省略できない。

【引数が一つの場合】

引数が一つの場合、アロー関数の先頭の()は省略可能。

【引数が複数の場合】

引数が複数の場合、アロー関数の先頭の()は省略できない。

【関数の本文が一行の場合】

関数の本文が一行の場合、{}を省略できる。

関数の本文はそのまま戻り値となる。

【関数の本文が複数行の場合】

関数の本文が複数行の場合、{}は省略できない。

戻り値を返す場合には、return文を明記する必要がある。

【関数の本文が一行かつ戻り値がオブジェクトの場合】

関数の本文が一行で戻り値がオブジェクトの場合は、

アロー関数の{}と区別するため、

オブジェクトリテラルを()で囲む。

アロー関数と無名関数の違い

今回は、JavaScriptの関数についての内容でした。

ここまで、読み進めていただきありがとうございます。

こんにちは、デジナーレ福岡オフィスの徳安です。

この記事では、イベントハンドラーとイベントリスナーの違い

について説明いたします。

イベント
イベントハンドラー
インラインイベントハンドラー
イベントリスナー
HTMLの基本動作のキャンセル方法
イベントハンドラーとイベントリスナーの違い
まとめ

イベント

ウィンドウ上のプログラムでマウスクリックや

入力によって所定の処理が始まるが、

この時のマウスクリックなどの動作を「イベント」という。

イベントハンドラー

イベント発生時に行う処理内容を記述したプログラム（関数）を

「イベントハンドラー」という。

イベントを設定したい要素に対して、

onイベント名プロパティを使用して関数を代入し

実行したい内容を記述する。

// 名前付き関数を使用した場合
取得した要素.onイベント名 = 関数名;  

// 無名関数を使用した場合
取得した要素.onイベント名 = function() {   処理内容を記述する }

1

2

3

4

5

// 名前付き関数を使用した場合

取得した要素.onイベント名 = 関数名;

// 無名関数を使用した場合

取得した要素.onイベント名 = function() { 処理内容を記述する }

イベントハンドラーは、ひとつのイベントしか登録できない！

＊豆知識＊

「handle(ハンドル)」にはさばく、処理するという意味がある。

イベントに対する処理を行うもの＝イベントハンドラーと呼ばれる。

「アクションに対して、所定の処理を起動する」

プログラミングスタイルのことを

「イベント駆動型プログラミング」と呼ばれます。

インラインイベントハンドラー

最初期のイベントハンドラーにインラインイベントハンドラー

（イベントハンドラーHTML属性）があり、

属性値がイベント発生時に実行したい

JavaScriptのコードそのものになっている。

<!-- clsクラスがついたり消えたりするボタン -->
<button onclick="document.querySelector('.title').classList.toggle('cls');">ボタン</button>

1 2	<!-- clsクラスがついたり消えたりするボタン --> <button onclick="document.querySelector('.title').classList.toggle('cls');">ボタン</button>

ちょっとした動作をつける際に簡単に使えるものになるが、

コードが肥大化してくるとあっという間に手が付けれない、

効率の悪いものになってしまう。

コードを書く際にHTMLとJavaScriptを混在させると、

読みにくくなり可読性が落ちてしまうため、

JavaScriptのコードはHTMLのコードと分けて記述する方がよい。

イベントリスナー

イベントの発生を監視し、イベントが発生した際に

呼び出す処理（関数）のこと。

addEventListenerメソッドの第一引数にイベントを指定し、

第二引数に実行したい処理内容を記述する。

イベントリスナーは複数のイベント処理を登録することが可能

// 名前付き関数を使用した場合
取得した要素.addElementListener( "イベント", "コールバック関数");


// 無名関数を使用した場合
取得した要素.addElementListener( "イベント", function() {
 処理内容を記述する
})

1

2

3

4

5

6

7

8

// 名前付き関数を使用した場合

取得した要素.addElementListener( "イベント", "コールバック関数");

// 無名関数を使用した場合

取得した要素.addElementListener( "イベント", function() {

処理内容を記述する

})

イベントの削除

取得した要素.removeEventListener( "イベント", "削除したいイベントリスナー関数名")

1	取得した要素.removeEventListener( "イベント", "削除したいイベントリスナー関数名")

HTMLの基本動作のキャンセル方法

event.preventDefault()はイベントが起こったときの

基本動作をキャンセルするもので、

インターフェイスのメソッドである。

event.preventDefault();

1	event.preventDefault();

HTMLタグには基本動作があらかじめ定義されているものがあり、

必要ない場合キャンセルすることができる。

イベントハンドラーとイベントリスナーの違い

イベントハンドラーは、イベントが発生した際に「応答として動作する処理」で、

イベントリスナーはイベントの発生を監視し、

イベントが発生した際に「呼び出す処理」のこと

イベントハンドラーは、ひとつのイベントしか登録できないが、

記述が比較的簡素である。

同じイベントに再度イベント処理を登録することで、

後から登録したハンドラーを上書きすることができる。

ハンドラーの削除がしたい場合は、

取得した要素.onイベント名 = null;

1	取得した要素.onイベント名 = null;

で削除が可能。

イベントリスナーは、複数のイベント処理を登録できるが、

記述が複雑になりやすい。

しかし、必要な時にリスナーを複数追加できることは、

利点となっている。

まとめ

今回は、イベントハンドラーとイベントリスナーについての内容でした。

ここまで、読み進めていただきありがとうございます。

こんにちは、デジナーレ福岡オフィスの徳安です。

この記事では、JavaScriptの変数宣言と動的型付け言語について説明いたします。

変数の種類
let
const
var
まとめ
動的型付け言語について

変数の種類

変数とは、プログラムで使用される値を、
一時的に保存しておくために領域に固有の名前を付けたものです。

変数は値そのものではなく、値の保管場所（アドレス）を保存しています。

JavaScriptには、以下の3つの変数を宣言するキーワードが存在しています。

・let（ES6～）
・const（ES6～）
・var

let

ES6（ECMAScript 2015）から使用できるようになった変数で、
宣言することによって使用できるようになる変数です。

let 変数名 = 値;

1	let 変数名 = 値;

【例】

let hello = "こんにちは";

console.log( hello ); // コンソールで出力

1

2

3

let hello = "こんにちは";

console.log( hello ); // コンソールで出力

【出力結果】

＊値を変数に代入して、変数を関数に渡しています。

※プログラムでは、変数に値を代入するときに「 = 」を使用しますが、
　右辺の値を、左辺に代入するという意味で等しいことではありません。

let で宣言した変数は、

値を上書き（再代入）をすることができます。

let hello = "こんにちは";
console.log( hello );// コンソールで出力

hello = "Hello!!"
console.log( hello );// コンソールで出力

1

2

3

4

5

let hello = "こんにちは";

console.log( hello );// コンソールで出力

hello = "Hello!!"

console.log( hello );// コンソールで出力

【出力結果】

このように値を代入することができます。

＊注意＊
再代入と似た用語で、「変数の再宣言」というものがあります。
再宣言は、同じ変数名で再度宣言を行うことで、
「 let 」と「 const 」ではエラーになるので注意が必要です。

let hello = "こんにちは";

let hello = "Hello!!"; // エラーが発生

1

2

3

let hello = "こんにちは";

let hello = "Hello!!"; // エラーが発生

【出力結果】

変数が参照する値を変化させたい場合など、
変数への再代入が必要な場合はletを利用します。

また、letは初期値がなくても変数の宣言ができます。
（undefinedという値で初期化される）

undefinedは未定義という意味でnullや空白とは異なります。
undefinedという値が変数にセットされています。

const

let と同様に、ES6（ECMAScript 2015）で使用できるようになりました。

const 変数名 = 値;

1	const 変数名 = 値;

【例】

const hello = "こんにちは";
console.log( hello );

1 2	const hello = "こんにちは"; console.log( hello );

【出力結果】

constは宣言した後に、値の再代入ができません。

そのため、constには後で変更しない値など、
変動がない値を扱うときに使用されます。

const hello = "こんにちは";
hello = "Hello!!" // エラーが発生

1 2	const hello = "こんにちは"; hello = "Hello!!" // エラーが発生

【出力結果】

しかし、変数の値がオブジェクトまたは配列（参照型）であった場合は、

値を変更したり、削除したりすることができます。

const arr = ['A', 'B', 'C'];

// これは値の代入になるので、エラー ↓
//arr = ['あ', 'い', 'う'];

// OK ↓
arr[1] = 'い';
console.log( arr );

1

2

3

4

5

6

7

8

const arr = ['A', 'B', 'C'];

// これは値の代入になるので、エラー ↓

//arr = ['あ', 'い', 'う'];

// OK ↓

arr[1] = 'い';

console.log( arr );

【出力結果】

var

ES6以前に使用されていましたが、

varでの変数宣言は、現在は非推奨となっています。

その理由がいくつかあるので、非推奨である理由をまとめてみました。

・宣言をしなくても変数として、使用できる。
・同じ名前の変数で再宣言ができてしまう。
・巻き上げという独自の挙動がある。

宣言をしなくても変数として、使用できる。

hello = "こんにちは";
console.log(hello);

1 2	hello = "こんにちは"; console.log(hello);

このように、変数宣言をしなくても
変数を宣言したように、使用できてしまいます。

一見、とても便利な機能に思えますが、

エラーが発生した際にエラーの原因がわからなくなってしまうことや、
バクが発生しやすくなってしまうため、

変数は必ず宣言してから使用するようにしましょう。

またJavaScriptには、strictモード(厳格モード)を有効にした開発が推奨されています。

strictモードで、宣言されていない変数に値を代入しようとするとエラーとなります。

特別な理由がない限り、strictモードを有効化して開発を行うようにしましょう。

同じ名前の変数で再宣言ができてしまう

var hello = "こんにちは";

var hello = "hello";

console.log( "hello" );

1

2

3

4

5

var hello = "こんにちは";

var hello = "hello";

console.log( "hello" );

【出力結果】

letやconstで再宣言をすると、以下のエラーが発生しますが、

varでは再宣言が可能です。

【出力結果】

同じ変数名を使用してもエラーが発生しないため、

コードが肥大化した際など、同じ変数名で再宣言してしまい、
意図した値が取得できなくなってしまいます。

巻き上げという独自の挙動がある。

varには、巻き上げと呼ばれる独自の挙動があります。

varでは、現れる場所に関係なく、コードを実行する前に処理されます。

var hello = "こんにちは";

function <span>greeting</span> (){
console.log( hello );

var hello = "hello";
console.log( hello );
}

<span>greeting</span>();

1

2

3

4

5

6

7

8

9

10

var hello = "こんにちは";

function <span>greeting</span> (){

console.log( hello );

var hello = "hello";

console.log( hello );

}

<span>greeting</span>();

【出力結果】

実際には以下のように、関数の先頭で変数が

改めて宣言されている挙動になっています。

捉え方としては、先頭でundefined型の変数を宣言して、

後ろの行で再代入している、というイメージです。

var hello = "こんにちは";

function <span>greeting</span>(){
var hello;
console.log( hello ); //undefined

hello = hello;
console.log( hello );
}

<span>greeting</span>();

1

2

3

4

5

6

7

8

9

10

11

var hello = "こんにちは";

function <span>greeting</span>(){

var hello;

console.log( hello ); //undefined

hello = hello;

console.log( hello );

}

<span>greeting</span>();

まとめ

これまでのことを表にまとめると、以下の違いがあります。

	let	const	var
再代入	可能	不可能	可能
再宣言	不可能	不可能	可能
スコープ	ブロックスコープ	ブロックスコープ	関数スコープ、グローバルスコープ

let

const

var

再代入

可能

不可能

可能

再宣言

不可能

可能

スコープ

ブロックスコープ

関数スコープ、

グローバルスコープ

型付け言語について

また、プログラミング言語には、

動的型付け言語と静的型付け言語があります。

JavaScriptのデータ型は、

プログラム実行時に値が設定された時点で自動的にデータ型が決まります。

このようなプログラミング言語のことを動的型付け言語と呼びます。

一方、開発者が明示的にデータ型を宣言する必要がある

プログラミング言語のことを，動的型付け言語と呼びます。

自動的に型が決まる動的型付け言語は、

表記が簡素になり便利に感じますが、
プログラムが実行された際に判断されるため、

バグが混入しやすくパフォーマンスが悪くなる傾向にあります。

そのため近年では、JavaScriptでデータ型の定義ができる

「TypeScript」というプログラミング言語が注目を集めています。

今回は、JavaScriptでの変数宣言の方法、静的型付け言語についての内容でした。

ここまで読み進めていただきありがとうございました。

こんにちは、デジナーレ福岡オフィスの徳安です。

この記事では、CSSのgridレイアウトについて説明いたします。

gridレイアウトの特徴
webサイト全体をグリッドでレイアウトする例
均等幅の複数行均等レイアウトの例

gridレイアウトの特徴

floatやflexboxレイアウトは、

アイテムを一方的に並べることでレイアウトを作る

「１次元」のレイアウト手法です。

それに対し、gridレイアウトは縦横それぞれにグリッド線を引き、

格子状のセルを作成し、そこにコンテンツをはめ込む、

「２次元」のレイアウト手法です。

webサイト全体をグリッドでレイアウトする例

1. 親要素にdisplay : gridを指定する。

　(今回はcontainerを親要素にします。)

2. 作りたいグリッドの行、列のサイズを決める。

　( grid-template-rows: 100px 1fr 100px;

grid-template-columns: 200px 1fr 200px;

row= 縦幅のサイズ、columns=横幅のサイズ

　※frとはfraction(比率)のこと)

3. エリアに名前を付ける。

今回の場合、３×３のレイアウトにするので、

すべてに名前を付ける。

grid-template-areas:

"header header header"

"side1 main side2"

"footer footer footer";

のように半角スペースで区切って、指定する。

4. 各エリアに配置する。

【例】

<div class="container">
  <header class="header">ヘッダー</header>
  <main class="main">メイン</main>
  <aside class="side1">サイドバー1</aside>
  <aside class="side2">サイドバー2</aside>
  <footer class="footer">フッター</footer>
</div>

1

2

3

4

5

6

7

<aside class="side1">サイドバー1</aside>

<aside class="side2">サイドバー2</aside>

</div>

.container {
  display: grid;
  grid-template-rows: 100px 1fr 100px;
  grid-template-columns: 200px 1fr 200px;
  grid-template-areas:
    "header header header"
    "side1 main side2"
    "footer footer footer"
  }
  .header{
    background-color: rgb(255, 215, 221);
    grid-area: header;
  }
  .side1 {
    background-color: rgb(75, 204, 75);
    grid-area: side1;
  }
  .side2 {
    background-color: rgb(122, 96, 238);
    grid-area: side2;
  }
  .main {
    background-color: rgb(247, 90, 90);
    grid-area: main;
  }
  .footer{
    background-color: rgb(252, 232, 120);
    grid-area: footer;
  }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

.container {

display: grid;

grid-template-rows: 100px 1fr 100px;

grid-template-columns: 200px 1fr 200px;

grid-template-areas:

"header header header"

"side1 main side2"

"footer footer footer"

}

.header{

background-color: rgb(255, 215, 221);

grid-area: header;

}

.side1 {

background-color: rgb(75, 204, 75);

grid-area: side1;

}

.side2 {

background-color: rgb(122, 96, 238);

grid-area: side2;

}

.main {

background-color: rgb(247, 90, 90);

grid-area: main;

}

.footer{

background-color: rgb(252, 232, 120);

grid-area: footer;

}

均等幅の複数行均等レイアウトの例

1. 親要素にdisplay : gridを指定する。

2. グリッドの列サイズをrepeatを使って、指定する。

grid-template-columns: repeat(5, 1fr);

※1fr 1fr 1fr 1fr 1frをまとめて記述

<main>
  <ul class="box">
      <li>グリッドコンテナ</li>
      <li>グリッドコンテナ</li>
      <li>グリッドコンテナ</li>
      <li>グリッドコンテナ</li>
      <li>グリッドコンテナ</li>
      <li>グリッドコンテナ</li>
      <li>グリッドコンテナ</li>
      <li>グリッドコンテナ</li>
      <li>グリッドコンテナ</li>
      <li>グリッドコンテナ</li>
      <li>グリッドコンテナ</li>
      <li>グリッドコンテナ</li>
      <li>グリッドコンテナ</li>
      <li>グリッドコンテナ</li>
  </ul>
</main>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<main>

<li>グリッドコンテナ</li>

</ul>

</main>

.box {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(5, 1fr)
}
.box li {
  list-style: none;
  height: 150px;
  background-color: rgb(214, 214, 214);
}

1

2

3

4

5

6

7

8

9

10

.box {

display: grid;

gap: 20px;

grid-template-columns: repeat(5, 1fr)

}

.box li {

list-style: none;

height: 150px;

background-color: rgb(214, 214, 214);

}

このように簡単にグリッドレイアウトを作成できます。

また、特定の要素のサイズを変更したいときには、

変更したい要素にclassを追加して、

grid-column と grid-row を使って設定ができます。

【例】

  grid-column: 1/3;
  grid-row: 1/3;

1 2	grid-column: 1/3; grid-row: 1/3;

「始まりのライン/終わりのライン」で記述することで、調節できます。

上記の例のサイズだと、グリッドラインを引いた、

1番目のラインから3番目のラインまでのサイズになります。

(グリッド2つ分)

Grid Layoutを学べば、今までの概念を覆すような方法で

ウェブサイトのレイアウトを効率的に構築できます。

ここまで読み進めていただき、ありがとうございました。

現在のプロジェクトで初めてpytestを使用したテストの自動化を行ったので、備忘録としてまとめます。

pytestを使う理由

一口にPythonのテストツールといっても現在いろいろなツールがある。
今回pytestを使用する理由を、例としてPython標準ツールのunittestと比較してみる

その1.直観的に書ける
pytestはassertの後に条件式を書けば結果の検証ができるが
unittestは複数種類のassert関数を覚える必要がある

その2.Classを書かなくていい
unittestはテスト用のClassを作成する必要があるが
pytestはtest_*.pyまたは*_test.pyという名前のファイルに、test_*という関数名を付けるとpytestがテスト関数だと判断してくれる

その3.テストの失敗理由が分かりやすい
unittestどのテストで失敗したかはわかるがテスト中のどの部分で失敗したか、なぜそのテストが失敗したかが示されない
pytestは失敗した箇所のどの値がなぜダメだったかをわかりやすく表示してくれる

assert

assertの後に検証したい内容を書く
引数a,bを足した値を返す関数add_funcをテストしたいとすると

def add_func(a, b):
  return a + b

def test_add_func():
  assert add_func(1, 2) == 3

1

2

3

4

5

def add_func(a, b):

return a + b

def test_add_func():

assert add_func(1, 2) == 3

add_func(1, 2)の返り値は3が返ってきて、期待通りの値が返ってきてテストをパスする。
一方で

def add_func(a, b):
  return a - b

def test_add_func():
  assert add_func(1, 2) == 3

1

2

3

4

5

def add_func(a, b):

return a - b

def test_add_func():

assert add_func(1, 2) == 3

のようなコードだとadd_func(1, 2)の返り値は-1となり、返り値が期待通りでないのでテストをパスできず、add_funcの実装が間違っていることが分かる。

parametrize

次に引数aから引数bを引いた値を返す関数sub_funcのテストを考える
この場合テストパターンとして(a>b, a=b, a<b)の3通りのテストをしたいとする

def sub_func(a, b):
  return a-b

def test_sub_func()
  assert sub_func(2, 1) == 1
  assert sub_func(2, 2) == 0
  assert sub_func(1, 2) == -1

1

2

3

4

5

6

7

def sub_func(a, b):

return a-b

def test_sub_func()

assert sub_func(2, 1) == 1

assert sub_func(2, 2) == 0

assert sub_func(1, 2) == -1

としてもよいのだがテスト関数の部分は

@pytest.mark.parametrize('a, b, result', [
  (2, 1, 1),
  (2, 2, 0),
  (1, 2, -1)
])
def test_sub_func(a, b, result):
  assert sub_func(a, b) == result

1

2

3

4

5

6

7

@pytest.mark.parametrize('a, b, result', [

(2, 1, 1),

(2, 2, 0),

(1, 2, -1)

])

def test_sub_func(a, b, result):

assert sub_func(a, b) == result

と書くことができる。
3通りぐらいなら上の書き方でもよいのだがテストパターンが増えてくると、parametrizeの第二引数を別のファイルで定義して渡すとよい

freeze_time

現在の日付の1週間前の日付を返す関数をテストすることを考える

from datetime import datetime, timedelta

def get_one_week_ago():
  return datetime.now() - timedelta(weeks=1)

1

2

3

4

from datetime import datetime, timedelta

def get_one_week_ago():

return datetime.now() - timedelta(weeks=1)

テストしたい関数の中でdatetime.datetime.now()を扱う場合、テストを行う日時によってnow()の中身が変動してしまう。
そうすると出力される値が特定できないためテストができなくなってしまう。
そこでfreeze_timeを使うとテストを実行する日時を固定することができる

@pytest.mark.freeze_time(datetime(2023, 6, 30))
def test_get_one_week_ago():
  assert get_one_week_ago == datetime(2023, 6, 23)

1

2

3

@pytest.mark.freeze_time(datetime(2023, 6, 30))

def test_get_one_week_ago():

assert get_one_week_ago == datetime(2023, 6, 23)

こんにちは。デジナーレ福岡オフィスの徳安です。

この記事では、HTML5で新たに追加された要素と属性について解説いたします。

セクション要素とは
文書のアウトラインの作成方法
4つのセクション要素と使い方
セクション要素と関連の深い要素

セクション要素とは？？

セクション要素とは、「見出しとそれに伴う文書のひとかたまりのこと」を表します。

HTML5で導入された新しい要素で、

HTMLの文書構造をより明確にグループ化ができるようになりました。

文章は、章や節、項といった見出しをつけることで、

階層構造になっていますが、

この文章の階層構造のことをアウトラインといいます。

	4つのセクション要素
section要素	章・節・項などの見出しと文書を伴う一般的なセクションを表す要素
article要素	それだけで自己完結していて、独立したセクションを表す要素
aside要素	メインコンテンツとは関連性が低い補足や広告などで、取り外しても問題のないセクションを表す要素
nav要素	ナビゲーションを表す要素

文書のアウトラインを作成する方法

1. 1. 見出し要素で階層化（h1～h6）
  2. セクション要素の入れ子

HTMLでアウトライン化する方法は、この２つの方法があります。

＊＊＊＊＊＊＊＊＊＊＊＊＊

1. 見出し要素で階層化（h1～h6）

階層構造に合わせて、見出しのレベルを変更して、アウトラインを作成していく方法です。

この方法は「暗黙のアウトライン」と呼ばれます。

＊＊＊＊＊＊＊＊＊＊＊＊＊

2. セクション要素の入れ子

HTML5で新しく追加された、

セクション要素で入れ子構造を作ることで作成していく方法です。

先ほど紹介した「暗黙のアウトライン」との大きな違いは、

セクション要素で入れ子構造を作ることによって、

セクションの終わりを明確にできる点です。

そのため、セクション要素で作られたアウトラインのことを

「明示的アウトライン」と呼ばれます。

4つのセクション要素と使い方

section要素

section要素は、「一般的なセクション」を表す基本的な要素で、

セクションを明示するほかの要素が適している場合は、

そちらを使うことが推奨されています。

※section要素を使用するときの注意点

section要素を使う場合は、ほとんどの場合で見出しが必要になります。
section要素をdiv要素の代わりに使うことはできません。

デザイン的に見出しをつけたくない場合は、

CSSを使って非表示にするようにしましょう。

また、レイアウトやスタイリングが目的で使用することはできず、

あくまでセクションを明示するためのものです。

＊＊＊＊＊＊＊＊＊＊＊＊＊

article要素

article要素は、単体で「独立しており、自己完結している要素」を表します。

自己完結しているか悩んだときは、

ページからそのセクション部分を取り出しても、

記事として成立しているかを基準にするとよいでしょう。

ブログの一覧画面を表示したときに、

記事のタイトルが日付ごとにたくさん並んでいる

記事の一つ一つがarticle要素といえます。

article要素もsection要素と同様に、原則として見出しが必要です。

＊＊＊＊＊＊＊＊＊＊＊＊＊

aside要素

aside要素は、

「メインコンテンツとは関連性が低い補足や広告などのコンテンツ」

を表しています。

nav要素

nav要素は、Webサイトの「ナビゲーション」を表す要素です。

nav要素は主に「主要なナビゲーション」に対して、使用します。

最もわかりやすいのは、グローバルナビゲーションですが、

それ以外にも「パンくずリスト」や「下層ページ用のローカルナビゲーション」など

nav要素としてマークアップできます。

しかし、特に重要ではないナビゲーションに対してはnavでマークアップするのは好ましくありません。

＊＊＊＊＊＊＊＊＊＊＊＊＊

セクション要素と関連の深い要素

	その他の新要素
header要素	セクションのheaderを表す要素
footer要素	セクションのfooterを表す要素
main要素	メインコンテンツを表す要素

header要素 / footer要素

header要素は「セクションのヘッダー」、

footer要素は「セクションのフッター」を表す要素です。

header要素、footer要素の中にもセクション要素を入れることはできます。

＊＊＊＊＊＊＊＊＊＊＊＊＊

main要素

main要素は、「メインコンテンツ」を明示するための要素です。

※注意

main要素は、原則としてページ内で1つしか使用できません。

section / article / aside / nav / header / footer 要素の中でmain要素を使うことはできません。

＊＊＊＊＊＊＊＊＊＊＊＊＊

セクション関連の新要素を使う場合は、各要素の意味を

十分に理解して適切に使用する必要があります。

どの要素を使うか悩んだときは、section要素でマークアップして適切な要素に変更していく、といった方法もあります。

しっかり使い分けて、より本格的なHTML5のマークアップを行いましょう。

ここまで読み進めていただきありがとうございました。

こんにちは。デジナーレ福岡オフィスの徳安です。

この記事では、CSSのpositionについて解説いたします。

CSSのポジションとは？？
positionの書き方
staticとは？
position: relative
position: absolute
position: fixed

CSSのポジションとは？？

Positionは指定した要素の配置方法を決められるプロパティです。

positionの書き方

positionプロパティはCSSで以下のように書きます。

〇〇{
   position: 値
};

1

2

3

〇〇{

position: 値

};

※〇〇にはセレクタが入ります。

値には次の4つのどれかを指定します。

positionの値
static	初期値。指定することはほとんどない。
relative	現在の位置を基準に相対的な位置を決める。
absolute	親要素を基準に絶対的な位置を決める。
fixed	画面の決まった位置に固定する ※使う際は注意が必要

staticとは？

CSSで何も指定していない時の初期値。

要素の位置をtopやleftなどで指定しても調節できない。

position: relative

position: relativeは現在の位置

（コンテンツが本来配置される予定だった位置）から

相対的に要素の位置を変更します。

使用例

<p class="decoration">文章</p>
<p class="relative decoration">相対的な位置になります。</p>

1 2	<p class="decoration">文章</p> <p class="relative decoration">相対的な位置になります。</p>

.relative {
  position: relative;
  top: 10px;
  left: 10px;
}
.decoration {
  background-color: #0090aa;
  padding: 20px;
}

1

2

3

4

5

6

7

8

9

.relative {

position: relative;

top: 10px;

left: 10px;

}

.decoration {

background-color: #0090aa;

padding: 20px;

}

このように、position:relative; とtop,leftの指定によって、

要素のもともといた位置から、

下に20px、右に50pxの位置に配置されます。

主な用途は、絶対配置をしたい要素の『基準に設定する場合』や、

通常コンテンツと同様に配置して、

ほかのコンテンツの上に『重ねて表示したい場合』など、

やや限定的な仕様となります。

position: absolute

position: absoluteは絶対位置を指定する値です。

今いる場所にかかわらず、設定された要素は

通常のコンテンツの配置の流れから完全に切り離されます。

position: absolute;を設定したら、

同時に表示させたい場所の座標を

【top, bottom, left, right】

を使って設定します。

場所の指定
top	要素が起点の上からどれだけ離れているか
bottom	要素が起点の下からどれだけ離れているか
left	要素が起点の左からどれだけ離れているか
right	要素の起点が右からどれだけ離れているか

親要素にrelativeをつける

先ほど登場したrelativeを親要素（又は先祖要素）に配置すると、

その要素を基点として自由に配置することができるようになります。

今回は右上に配置したいので、right:0,top:0を設定します。

※absolute_parentのclassがついた要素は、今回基点にしたい要素です。

使用例

<div class="absolute_parent">
  <div class="absolute">絶対配置になります。</div>
</div>

1

2

3

<div class="absolute">絶対配置になります。</div>

</div>

.absolute {
  position: absolute;
  background-color: #0090aa;
  padding: 20px;
  right: 0px;
  top: 0px;
}
.absolute_parent {
  position:  relative;
  left:  30px;
  top: 30px;
  border: solid 2px red;
  height:  190px;
  width: 300px;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

.absolute {

position: absolute;

background-color: #0090aa;

padding: 20px;

right: 0px;

top: 0px;

}

.absolute_parent {

position: relative;

left: 30px;

top: 30px;

border: solid 2px red;

height: 190px;

width: 300px;

}

基点としたい要素は、絶対配置する要素の親または先祖要素で、

positionプロパティの値がstatic以外のブロックレベル要素である必要があります。

また、基準とする要素が複数存在した場合は、

絶対配置する要素に最も近い直近の先祖要素が基点となります。

position: fixed;

fixedを指定すると画面の決まった位置に要素を固定させることができます。

メニューバーなど、ページをスクロールしても

場所を変更したくないときに使うと便利ですが、

ほかのスタイルとの兼ね合いで思わぬバグが発生するケースがあり、

若干不安定な要素となっているため、

本当にfixedを使う必要があるのかよく検討する必要がありそうです。

このように、positionレイアウトを使用することで、

本来の位置とは連動しない『自由な位置に要素を配置すること』ができます。

しかし、通常のコンテンツとは違い要素内のコンテンツの量が増えた場合でも、

要素が自動的に伸びたり、

後に続くコンテンツが下に下がるわけではないので、

うまく設計する必要があります。

うまく使い分けて、自由に要素を配置してみてください。

ここまで読み進めていただきありがとうございました。

初めまして、デジナーレ福岡オフィスの徳安です。

この記事では、HTMLの基礎知識について説明いたします。

HTMLとは？
HTMLファイルの骨組み
HTMLでよく使うタグ
属性のClassとIdについて
ClassとIdの使い分けは？？

HTMLとは？？

・HTMLとは、Hyper Text Markup Language(ハイパーテキストマークアップランゲージ)の略で、マークアップ言語の１つです。

ウェブサイトの骨組みを指定するための言語です。

WebサイトはHTMLとCSSで構成されており、CSSはデザイン部分、文字の部分はHTMLで作成しています。

HTMLファイルの骨組み

・!DOCTYPE html

<!DOCTYPE html>

1	<!DOCTYPE html>

Doctype宣言といい、このページがどのバージョンのHTMLで、どの仕様に合わせられて作られているのか記述しています。

HTMLファイルを作る上で必ず必要なもので、１つのファイルに１つ必要です。

必ず１行目に書くようにしてください。

・html

<html lang = "ja">

1	<html lang = "ja">

Doctype宣言のすぐ後に記述します。この分は、HTMLの文章で書かれていて、lang(=言語)は日本語で書かれている、ということが記述されています。

・head

<head> ～ </head>

1	<head> ～ </head>

この部分は、ページのタイトルや説明文、外部ファイルのリンクなどを記述しています。

ブラウザには表示されない部分です。

・meta

<meta charset="utf-8">

1	<meta charset="utf-8">

これは文字コードを「utf-8」にするという設定です。

これを設定することで、文字化けが起こりにくくなります。

・title

<title>　～　</title>

1	<title>　～　</title>

文字の通りウェブサイトのタイトル部分を記載します。

ブラウザーでページを表示するときのタブ部分に表示されます。

・body

<body>　～　</body>

1	<body>　～　</body>

ここにコンテンツを入力することで実際にブラウザーで表示されます。

HTMLでよく使うタグ

h1~h6	見出しを表示、数字の順に使用する
p	文章の段落を表す
img	src属性で表示したい画像を指定して表示
a	リンクを貼る。リンク先はhref属性で指定（mailto：“メールアドレス”でメールソフトの起動ができる）
ul	番号のない箇条書きリスト
ol	番号付きの箇条書きリスト
li	リストの中身
br	改行させる
small	著作権や法的表記を含んだテキスト
span	spanタグで囲んだ部分のみ、デザインを変更することができる
script	スクリプトデータを埋め込んだり参照する JavaScriptのコードに使う
header	ページ上部にある要素検索フォームやナビゲーションも含む
footer	ページ下部にある要素
article	ページ内の記事になる部分独立したページとしてなりたつ
aside	本文ではない補足情報でサブメニューやサイドバーなどで使われる
link	参照する外部ファイルやＣＳＳファイルを読み込むときに使われる rel＝“stylesheet”（ファイルとの関係性、どのようなものなのか） href＝“https:/example.com”（どのファイルを読むかの記載）

表

table	表を表すタグ
tr	表のラインとなる部分、1行を囲む
th	表の見出しを表すセル
td	表のデータを表すセル

表の応用

・縦方向に結合させる

thタグまたはtdタグに、colspan属性を追加

使用例

<table>
    <tr>
        <th>セル１＋２</th>
        <th>セル２</th>
    </tr>
    <tr>
        <td colspan="2">セル３＋４</td>
    </tr>
    <tr>
        <td>セル５</td>
        <td>セル６</td>
    </tr>
</table>

1

2

3

4

5

6

7

8

9

10

11

12

13

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

セル１	セル２
セル３＋４
セル５	セル６

このようにセルを結合させることができます。

・縦方向に結合させる

thタグまたはtdタグに、rowspan属性を追加

使用例

<table>
    <tr>
        <th>セル１</th>
        <th>セル２</th>
    </tr>
    <tr>
        <td rowspan="2">セル３＋５</td>
        <td>セル４</td>
    </tr>
    <tr>
        <td>セル６</td>
    </tr>
</table>

1

2

3

4

5

6

7

8

9

10

11

12

13

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

セル１	セル２
セル３＋５	セル４
セル３＋５	セル６

このようにセルを結合させることができます。

属性のClassとIdについて

classとidは簡単に言うと、指定した部分のデザインのみを変えることが出来る属性のことです。

一番初めにお話ししたように、HTMLはあくまでウェブサイトを作る「骨組み」です。

そのため、デザインなどを付ける際にはスタイルシート（CSS）を使用しないといけません。

その時に、指定した箇所のデザインを変更する際に役立つのがclassとidです。

ClassとIdの使い分けは？？

Classは、使いまわしをして、何回使用しても大丈夫ですが、idは一度しか使用することができません。

id

ひとつのidはページ内で1度しか使用できない。

また、1要素に複数のidをつけれない。

class

ひとつのページ内で同じclassをいくつでも使える。

1つの要素に複数のclassをつけてよい。

classは複数の要素に使うことが可能ですので、同じスタイルを要素に適用させたい時にとても便利に使うことができます。

上記で記述した通り、idは1カ所にしか使うことができません。

規約上、複数個所に指定することはできませんが、複数個所に指定しても、HTML上ではエラーは出ません。

しかし、複数個所で指定することによって、ページ内リンクやJavaScriptでidを使用した際に、予期した挙動とは違う挙動が起こる可能性があります。

idを使うときは、ソースコード上の1カ所を特定しないといけないときだけ使うようにしましょう。

CSSには優先順位があり、idがセレクタの場合classよりも優先度が高く「id>class>タグ」の順番でCSSが適用されます。

そのほかにも、javaScriptを使用したときに、指定するセレクタにidを使用することで、コンピュータの処理速度がとても速くなるというメリットもあります。

そして、ページ内にリンクを作りたい際に簡単に作ることができます。

しかし安易にidを使うのは賢明ではありません。

idを使うかどうかは、その要素が「一意に特定する必要があるか」を基準に判断するとよいでしょう。

・idを使った応用編

aタグを使ってhrefにidを指定するとページ内に簡単にリンクを作成することができます。

実際にコードを見てみましょう。

使用例

<a href="#content">リンク１</a>



～その他コンテンツ～


<div id=”content”>ここまで</div>

1

2

3

4

5

6

7

8

～その他コンテンツ～

このようにaタグのhrefにidを指定することで、『ここまで』と書かれたdivタグまでジャンプすることができます。

これはページ内にidが1カ所しか存在しない、という規律を守っているからこそできることですね！

以上が、HTMLの基礎知識についての記事でした。

今回は、HTMLの骨組みや構造についての基礎知識となっています。

この内容を応用していくことで、Webページの作成することができるので、ぜひ参考にしてください。

ここまで読み進めていただき、ありがとうございました。

こんにちは。サービスプロデュサー＆広報の西田です。

今回は弊社のサービスプロデューサー、YNさんにインタビューしました！
転職活動時に感じていた不安や、実際に案件を担当されるようになった今の心境をざっくばらんにお話しいただきました。

ぜひ最後までお読みください。

前職ではテレビ番組制作のADをやられていたと伺っていますが、どのようなディレクション業務を担当されていましたか？

プロデューサーやディレクターから、ロケ撮影の大まかな希望が降ってきて、ロケに必要なありとあらゆるものの準備と関係者との調整を担当していました。分かりやすいものでいうと、ロケ撮影の際に必要な1日の段取り作成や、ロケ先（お店など）との調整や、ロケに使用する小道具などの準備を、基本的に1人で行っていました。

入社された経緯やデジナーレに惹かれたポイントがあれば教えてください。

前職では、その業界でしか経験できないことも沢山ありましたが、 ADとしてある程度仕事を任されるようになり、その先を考えたときに、同じ業界で成長していく（ディレクターを目指す）より、違うジャンルで自分の強みを試してみたかったのが、転職のきっかけです。
ちなみに大学では情報系を学んでいたので、IT業界への転職に興味を持ちました。

デジナーレに惹かれたポイントは、新規事業に取り組んでいることや、成長を楽しむことに重きを置いていると感じられたことです。
違う業界で自分の強みを試してみたかったという転職の動機と、成長を楽しむというデジナーレの社風がマッチし、入社を決めました。

転職に対しての不安はありましたか？

IT業界未経験の自分が、デジナーレでやっていけるのかという点はすごく不安に思っていました。そこで既存メンバーへの面談を希望し、不安に思っていることを直接聞いてみたところ、前職で培った、調査スキルや、内部や顧客との調整といったディレクション経験を活かしつつ、新しく学ぶことを応援してくれる環境だとわかり、不安が解消できました。

それでは現在担当されている業務について教えてください。
業務の内容について現在、どのような業務を担当されていますか？

あるサービスの営業チームの成果を上げるために、営業支援ツールの運用支援・改善を担当しています。私は顧客内の2つのチームに入っており、扱っているのは同じツールですがチームによって用途が違うので支援内容も異なります。

1つ目は運用し始めたばかりで、まだ形が決まっていないため理想形に向けてツールを動かしている状態で、2つ目は3年ほど運用しており形が決まっているので改善がメインの業務となります。

業務でのやりがいや面白いと感じる点を教えてください。

前職にはない、自分主動でプロジェクトを動かしていけるところに面白みを感じ、成長しているのを実感できます。

1つ目の方は、理想形に向けていろんな意見が出る、自分も積極的に意見を出すのでツールのいじりがいがあると感じています。また、2つ目を運用していて課題に感じた点を反映できたり、逆に1つ目の運用から2つ目の改善アイディアが見つかったりすることもあります。

営業チームの成果を上げてもらうために、まずは営業が使いやすいツールにしていくことを目指し日々業務に励んでいます。

サービスプロデューサーとして、今後やっていきたいことや、挑戦していきたいものがあれば教えてください。

マーケティングに興味が出てきており、理想としては、営業しなくても顧客を獲得できる体制を構築していきたいです。今担当している営業支援ツールのデータ分析や、効率的な営業提案に向けた施策を考えるなど、より良いサービスのサイクルを作っていきたいです。

デジナーレのサービスプロデューサーでは、どんな役割が期待されていますか？

顧客によって抱えている課題は様々ですが、＋αの提案や、いろんなパターンでのアイディア出しが重要だと考えています。言われた通りに動くだけではなく、柔軟な考え方ができてはじめて付加価値の提供になると考えています。

その目標・役割を果たすためにはどのような努力が必要ですか？

アイディアの幅を広げるために、新しいものに対する興味が大事だと考えています。
具体的には、自分がいままで知らなかった事も積極的に吸収していくことです。
デジナーレにはTipsをメンバー内で共有する時間があるので、メンバーが知らない情報をアウトプットし、メンバーからの情報をインプットすることができます。それらが付加価値の提供につながっていると考えています。

最後にこれから入るチームメンバーに求めることや期待することはありますか？

デジナーレは、職種問わず、新しいものへの興味や好奇心を持つことができる人が活躍できる会社だと考えています。また、私のように異業種からの転職でもディレクション経験は応用できるので、興味や好奇心を武器に顧客やサービス知識を補っていってもらえればと思います。

最後までお読みいただきありがとうございました！

デジナーレや、サービスプロデューサーの職種に興味を持っていただけたら、まずはご応募ください。
また、転職に対する不安などがございましたらお気軽にお問い合わせください。

新年、明けましておめでとうございます。

旧年中は格別のお引き立てを賜り、厚く御礼申し上げます。
今後も変わらぬご指導と、末永いお付き合いをお願い申し上げます。

皆様のご多幸と繁栄をお祈り申し上げます。

令和5年元旦
株式会社デジナーレ

分割代入について

分割代入とは

配列の分割代入

【構文】

【変数ｘ、ｙ、ｚを宣言し、配列の要素を代入】

【配列の要素に不要なものがある時】

【宣言済みの変数】

【デフォルト値の設定】

【スプレッド演算子との併用】

オブジェクトの分割代入

【構文】

【例1】

【例2】

【例3】

【例4】

【例5】

関数の引数に対する分割代入

【構文】

【例】

transform

translate (移動)

scale (拡大・縮小)

rotate (回転)

skew (傾斜)

transform-origin (変形の原点)

まとめ

関数とは

メソッドとは

関数の主な定義方法

「 関数宣言」による関数の定義

■戻り値

「関数式」による関数の定義

「関数宣言」と「関数式」の違い

＊ 関数宣言 ＊

＊ 関数式 ＊

引数にオブジェクトを渡したときの挙動

コールバック関数

無名関数を使ったコールバック関数

アロー関数

【引数がない場合】

【引数が一つの場合】

【引数が複数の場合】

【関数の本文が一行の場合】

【関数の本文が複数行の場合】

【関数の本文が一行かつ戻り値がオブジェクトの場合】

アロー関数と無名関数の違い

イベント

イベントハンドラー

＊ 豆知識 ＊

インラインイベントハンドラー

イベントリスナー

HTMLの基本動作のキャンセル方法

イベントハンドラーとイベントリスナーの違い

まとめ

変数の種類

let

const

var

宣言をしなくても変数として、使用できる。

同じ名前の変数で再宣言ができてしまう

巻き上げという独自の挙動がある。

まとめ

型付け言語について

gridレイアウトの特徴

webサイト全体をグリッドでレイアウトする例

均等幅の複数行均等レイアウトの例

pytestを使う理由

assert

parametrize

freeze_time

セクション要素とは？？

文書のアウトラインを作成する方法

1. 見出し要素で階層化（h1～h6）

2. セクション要素の入れ子

4つのセクション要素と使い方

section要素

article要素

aside要素

nav要素

セクション要素と関連の深い要素

「関数宣言」による関数の定義

＊関数宣言＊

＊関数式＊

＊豆知識＊