
2022年10月末で退職し、11月から新しい会社で働いている。

気持ちが新鮮なうちに、退職直前に思っていたことを書き残しておきたい。

できるだけフラットに書くよう努めているので、決して元いた会社を貶めるつもりはないので、

それだけご留意いただきたい。

## やめる職場の仕事の状況

結局有給らしい有給は最終日に取るくらいで、ギリギリまで引き継ぐ予定の案件を対応していた。

別にそれは自分がメインでやっていた案件（結構な行数のソースコードになった）を今後もやってもらうので、

出てきた課題は潰して潰して、できる限りドキュメントやコメントも書いた。

こうなる前はやめるし数日やめるかなと思ったけど、普通に何日か残業した。

嫌味のひとつくらいあるかな、と思ったけど、言ってきたのは上長くらいで、

メンバーの方や先輩たちは暖かく送ってくれた。

何人かの人たちとは連絡先も交換した。

社長とも最後話せて、握手して終われたので、それはほっとした。

自分としては間違いなく頑張ったし、どの案件も終わらせる努力はしたので、

エンジニアになった直後と比較しても、少しは使い物になったかな、と思う。

（事柄を美化してしまったかもしれない。実際はギリギリまでのたうちまわっていたし、

何もキラキラしてないおじさんがいるだけではある。）

## 思ったこと

「世界観が違ってしまった」に尽きた。

先輩らと話しているうちに自分の中で整理ができて（酷い話だ）、なんだか妙に腹落ちしてしまった。

人がいやだ、とか、仕事がつらい、とか、そんなものは多かれ少なかれどこでも聞く話だし、

そういう要素はもともと薄く、よりやりたい事が見えてきたからこそ転職しようと思った。

なので、転職の軸にもそこはあまり据えていなかった。

細かい話は避けるが、エンジニアのキャリアを積んでいくにあたって、この会社はリモートで働いていた時間の方が圧倒的に長かった。

それにつられて、縦と横のコミニュケーションが不足して、会社のビジョンや求められている役割がよくわからなかった。

ただ、評価はされていたと思う。ある面では相場以上のもを頂いたので、それはすごくありがたかった。

ただ、評価者との面談は、働いていた4年のうち過去1回だけだったので、具体的にどの仕事がどう相関しているのかは最後までよくわからなかった。

上長に相談するもなかなか要領は得られず、ひたすら目の前の仕事に取り組んでいく毎日だった。

そんなわけで特に明確な目標は提示されなかったので、1年目から早々に個人的に年始に学習目標を立て、それにそって勉強していった。（何回か計画変更はあったが、概ね目標に沿ってやれていたと思う。）

案件の振り返りも1人で行い、出てきた改善点や課題についての情報を探したり咀嚼するようにした。

そんな事を続けて行った結果、自分の求めている世界と、目の前の世界にギャップが生まれてしまった。

このままこの職場で続けて行っても良かったかもしれないが、

性格的に一度違うと思ったら、どうしてもバランスが崩れてしまうので、遅かれ早かれ環境を変えたと思う。

たまたま今回はこのタイミングだった。

「世界観が違ってしまった」

ただそれだけなんだなと思う。

退職直前に思ったこと


こんにちは、Shumpeiです。

異常に暑かった夏が一変、いきなり涼しくなってきましたね。（おかげで風邪ひいた）

わたしはというと転職熱が最高潮に高まった結果、転職先が決まったところでこのブログを書いている。

仕事が忙しく2022年の記憶がもうおぼろげなので、思い出せる範囲で記録を残しておこうと思う。

まさにライフログ。

## 春

### 個人開発面

個人開発では現在も運営している「上伊那ぼたん、酔へる姿は百合の花([https://yuriyoi.site/](https://yuriyoi.site/))」という作品のファンサイトを作った。

たくさん反応をいただけており、とても嬉しかった。

技術スタックとしては Next.js と Vercel で動いている。

少しReactが掴めてきた感じはあるものの、という状況。

### 業務面

本業の方は金融情報アプリのリプレイス案件のスタートするからってんで

どう頑張っても5人月くらいになる見積もりを出したら、上で調整が入り4人月にも満たない工数になって案件を受注されてた。つらい。

&nbsp;

前にやった案件のコード資産が使えそうなので、

1人で詳細設計とVueのコンポーネントの設計をして実装スタート。

レビュー？知りませんね。。。

&nbsp;

機能も多いしCSSもたくさん書かなきゃいけないことがわかっていたので、

業務時間外も仕込みをしていた。

&nbsp;

レイアウトが40パターンほどあるので、ひたすらリプレイス対象のアプリをスクショして、

Photoshopで開いて要素のサイズ計測して、コード化していた。

&nbsp;

実験としてネイティブのCSS変数を試してみた。

Sassにして1万行くらい書いたのをコンパイルしてCSS変数として書き出した。

（これくらい書かないと画面が成立しないので、実験するために有効な行数ではある。）

&nbsp;

読み込んでくれるものの、Chromeでもレイアウトの変更イベントからレイアウト変更完了まで10秒ぐらいかかるようになってしまったので使い物にならず。

従来の書き方に戻してみたら一瞬でレイアウト変更が完了したのでCSS変数案は却下した。

## 夏

↑のアプリをまだ作っていた。

&nbsp;

とても時間内に終わることはないことは重々承知してた。

が、その予想よりもかかることが見えてきた。

プライベートの時間を一切捨てて、朝4時くらいまで仕事して、2〜3時間弱寝て、また8時間働いていた。

ひどいと徹夜していたし、日曜日なのに奥さんと息子を残して仕事していた。つらい。

寝かしつけのまま気を失っていたことも何回かあった。つらい。

&nbsp;

これでもギリギリオンスケか…?みたいな感じ。

ワタクシ、ただの平社員だヨ？という気持ちだったけど、終わらなきゃやばい感あった。

&nbsp;

先輩や上司には状況を伝えていたが、特に人員は増えないので意味なし。

虚空。

&nbsp;

納期まで残り数週間で目はぐるんぐるん回っているところ、

社内で所謂お気持ち案件が発生、そのとばっちりで上から別案件を差し込まれる。正気か。

&nbsp;

たたき台にもならないたたき台を作ったところで流石に無理と思ったので、

「それ、やりましょうか？」と言ってくれた同僚にお願いした。神様はいたんだ。

おかげでその案件は無事ことなきを得た。

&nbsp;

あと途中でマシンが熱暴走するようになってしまった。

Photoshopを開くとブルースクリーンに必ずなるようになってしまった。

ごまかしごまかし、何度もブルースクリーンに見舞われつつ自宅のPCも駆使しながら作っていたが、

ついに限界を迎え、新しいPCに乗り換える。死ぬ。

&nbsp;

環境構築を1から行ったところ、vue-cliのバージョンが上がったりなんかして、

devServer周りの設定が効かなくなったりして辛かった。

&nbsp;

などと幾多の困難を乗り越え、

何とか間に合わせて納品した。

自分なりにはやりきった。

納品後に微調整はあったものの、解放された。

&nbsp;

その数ヶ月後に検収・リリースだったものの、

納品先からいきなりリリースを数ヶ月遅らせるとだけ伝えられる。つらい。

（理由を聞いたら教えてくれたけど）

&nbsp;

さすがにぶん回しにぶん回してたので何事にも意欲が湧かない日々が続いた。

&nbsp;

そんなタイミングでIT菩薩ことモローさんと話すタイミングがあり、

転職活動に軸足を移すことを決めた。

幸い、自分が抱えていた案件がだいぶ無くなったので時間的な余裕はあった。

&nbsp;

久しぶりに職務経歴書を書いた。

何度かレビューいただき、その度にブラッシュアップしていった。

かなり丁寧に対応していただいたので、有り難かった。

&nbsp;

気になる会社さんをピックアップしていただいたり、自分でも前から気になっていたところや、

人づてに紹介していただいたりした。

&nbsp;

カジュアル面談をいくつかセッティングし、色々な方と話す機会を設けた。

どこも一定の評価をいただけたので手応えを感じた。

&nbsp;

自分なりにちゃんと仕事してきたので技術的なことは勉強していたし、

モノ作る側の職種だけれど、ビジネス側の方達への理解を示すよう努めていたので

差別化はほんの少し出来ていたのかもしれない。

&nbsp;

初めて技術面談を受けてみた。

ググって想定質問などをまとめたりしたものの、もう少しカジュアルな形だった。

少したどたどしい答えや、不正確な表現をしてしまったところもあったように思う。

（この答え方だとツッコミ入るだろうな、と思いながら答えていた。。。）

&nbsp;

しかしながら本当にありがたいことに、第一候補のところに内定を頂けたので、

謹んでお受けし、現在入社に向けて動き出している。

あとは現職の終戦処理を始めなければ、というところ。

&nbsp;

次回(秋)へ続く。。。

2022年上半期ざっくり振り返り


[今までのGulpシリーズはこちら](https://www.mb-js.tokyo/tags/gulp/)

## 前提

`node -v` コマンドを使ってnodeのバージョンを確認してください。

バージョン14以上を使用するようにしてください。

## Gulpの使い方

- gulpfile.jsを作る
- 読み込みたいモジュールをnpm installする
- gullpfile.jsがある階層で `npx gulp` というコマンドを叩くとnodeサーバが立ち上がり、Gulpが起動する
- control + cでサーバを止めると、Gulpが止まる

## gulpfile.js 全体

```js
const sass         = require( 'gulp-sass' )(require( 'sass' ));
const notify       = require( 'gulp-notify' );
const plumber      = require( 'gulp-plumber' );
const autoprefixer = require( 'gulp-autoprefixer' );
const uglify       = require( 'gulp-uglify' );
const rename       = require( 'gulp-rename' );
const sourcemaps   = require( 'gulp-sourcemaps' );
const glob         = require( 'gulp-sass-glob' );

const webpack       = require( 'webpack' );
const webpackStream = require( 'webpack-stream' );
const webpackConfig = require( './webpack-config.js' );

const { watch, task, src, dest, parallel } = require( 'gulp' );

const paths = {
    'scss': './src/css/**/*.scss',
    'css' : '../pages/template/kyakuhon/css/',
    'jsSrc': './src/js/**/*.js',
    'js': '../pages/template/kyakuhon/js/',
    'baseHtmSrc': '../pages/template/sample/base_design.htm',
    'distHtml': '/dist/',
};

// Scss
task( 'sass', () => {
    return(
        src( paths.scss )
            .pipe( plumber({ errorHandler: notify.onError('Error: <%= error.message %>') }) )
            .pipe( glob() )
            .pipe( sass({
                outputStyle: 'expanded'
            }) )
            .pipe( autoprefixer({
                cascade: false,
                grid: true
            }) )
            .pipe( sourcemaps.write() )
            .pipe( rename( 'sp.css' ) )
            .pipe( dest( paths.css ) )
            .pipe( dest( paths.svrCSS ) )
    );
} );

// js renameはwebpackConfigで行う
task( 'js', () => {
    return(
        src( paths.jsSrc )
            .pipe( plumber({ errorHandler: notify.onError('Error: <%= error.message %>') }) )
            .pipe( uglify() )
            .pipe( webpackStream(webpackConfig, webpack) )
            .pipe( dest( paths.js ) )
            .pipe( dest( paths.svrJS ) )
    );
} );

task( 'baseHtm', () => {
    console.log( '=================================' );
    console.log( 'task実行時にコメントつけられます' );
    console.log( '=================================' );
    return(
        src( paths.baseHtmSrc )
        .pipe( dest( paths.distHtml ) )
    );
} );

// watch
task( 'watch', done => {
		// 引数doneは使ってないですが今回は置いておいてください
    watch( [paths.scss], task( 'sass' ) );
    watch( [paths.jsSrc], task( 'js' ) );
    watch( [paths.baseHtmSrc], task( 'baseHtm' ) );
} );

// base
task( 'default', parallel( 'watch' ) );
```

### モジュールの読み込み

```js
const sass         = require( 'gulp-sass' )(require( 'sass' ));
const notify       = require( 'gulp-notify' );
const plumber      = require( 'gulp-plumber' );
const autoprefixer = require( 'gulp-autoprefixer' );
const uglify       = require( 'gulp-uglify' );
const rename       = require( 'gulp-rename' );
const sourcemaps   = require( 'gulp-sourcemaps' );
const glob         = require( 'gulp-sass-glob' );

const webpack       = require( 'webpack' );
const webpackStream = require( 'webpack-stream' );
const webpackConfig = require( './webpack-config.js' );

const { watch, task, src, dest, parallel } = require( 'gulp' );
```

requireで読み込んでいるモジュールはすべて `npm i -D モジュール名` でインストールしてください。

※バージョン番号も知りたい場合は別途お教えしますね。

※webpackと名のつくものを除く。これはwebpackを使いたい時に必要なだけです。

※webpack-config.jsは自分で作るファイルなのでインストールはしません。

`gulp-sass` ,  `sass` はそれぞれ別のモジュールなので、それぞれインストールしてください。

また、sassは `node-sass` から、 `dart sass` を使うよう推奨されています。

`gulp-sass` はgulpがsassを扱うためのモジュールです。

### パス

```js
const paths = {
    'scss': './src/css/**/*.scss',
    'css' : '../pages/template/kyakuhon/css/',
    'jsSrc': './src/js/**/*.js',
    'js': '../pages/template/kyakuhon/js/',
    'baseHtmSrc': '../pages/template/sample/base_design.htm',
    'distHtml': '/dist/',
};
```

Gulpが監視するファイル名や、吐き出し先のディレクトリのパスをまとめておくと見やすいです。

ディレクトリ名に `**` 、ファイル名に `*` を使用すると、そのディレクトリ内の全てのファイルが対象になる、という指定になります。

ディレクトリ名だけかかれている、css、js、distHtmlはそれぞれ吐き出し先のディレクトリのパスを記載しています。

### タスク

```js
// Scss
task( 'sass', () => {
    return(
        src( paths.scss )
            .pipe( plumber({ errorHandler: notify.onError('Error: <%= error.message %>') }) )
            .pipe( glob() )
            .pipe( sass({
                outputStyle: 'expanded'
            }) )
            .pipe( autoprefixer({
                cascade: false,
                grid: true
            }) )
            .pipe( sourcemaps.write() )
            .pipe( rename( 'sp.css' ) )
            .pipe( dest( paths.css ) )
    );
} );
```

モジュールの読み込みの際、

```js
const { watch, task, src, dest, parallel } = require( 'gulp' );
```

をgulpから読み込んでいます。このうちのtaskメソッドを使用します。

```js
task（　'任意のタスク名', () => {
	return (
		src( '作業対象パス' )
	);
} 　）;
```

が基本的な構文です。

`pipe` メソッドでどんどん作業を繋げていくことができます。

順番は結構大事なので、参考にしてください。

最後に `dest()` でGulpは吐き出し先のディレクトリにファイルを保存しにいきます。

すでに同名のファイル名がある場合、上書きされます。

### watch

```js
// watch
task( 'watch', done => {
		// 引数doneは使ってないですが今回は置いておいてください
    watch( [paths.scss], task( 'sass' ) );
    watch( [paths.jsSrc], task( 'js' ) );
    watch( [paths.baseHtmSrc], task( 'baseHtm' ) );
} );
```

Gulpを起動させている間、この中に登録されている監視対象が更新されたらこのタスクを実行するよう登録できます。

```js
const { watch, task, src, dest, parallel } = require( 'gulp' );
```

このwatchメソッドを使っています。

構文

```js
watch( '更新監視対象のディレクトリ（配列で登録。複数監視させることができる）', task('実行したいタスク名') )
```

### default

```js
task( 'default', parallel( 'watch' ) );
```

Gulp起動時に行うtask。

watchタスクをparallelメソッドに渡すことで、起動時にwatchが動く（＝監視対象を常に監視できるようになる）

## まとめ

Gulpは設定さえしてしまえば自動で色々やってくれるズボラーにはかかせないツールです。

ただしGulp本体や読み込むモジュールのバージョンが上がって使えなくなってしまうことも

ちょくちょくあるので、定期的に見直したいものです。

またよりよい設定があったら加えたいと思います。

Gulpの設定 2022年1月版



今回は2021年の振り返りをしていきたいと思います。

## 立てていた目標

2021年は、「Reactをやるぞ」ということを目標にしていました。

結果、React製のWebアプリ2つ、Next.jsで作っているポートフォリオサイトが1つ

用意することができました。

下記にリンクを貼っておきます。

ポートフォリオサイトも出来上がったら順次切り替えていきたいと思っています。

## Reactで作ったもの

- [廃校探索](https://hoshikake-obake.site/)

- [PRESENT RESORT POINT](https://present-resort-point.tokyo/)


## どんな年だった？

まとめるとこんな感じ。

- 色んなエンジニアコミュニティに入ってみた。

- 個人でたくさん作った。20分のLTも２回した。

- 深夜に作ることが常態化して体に負担が出た。

とにかくTwitterの制作の企画を見つけては作っていました。

### とにかく作っていた 

春頃はReactのハンズオン記事を見つけては作るを繰り返しました。

夏頃は毎月1個（コンセプト作成・デザイン・実装・リリースまで）何かしら作っていたので、

仕事が終わったら、家のことやって、みんなが寝静まったら夜な夜な作る...ということを続けていました。

おかげでReactの簡単なアプリなら、どうやって作るのか少しわかりました。

また、gulpを改めて向き合って、今のバージョンに適したセッティングを用意しました。

おかげで仕事でもそれをベースに構築することができました。

タスクランナーはずぼらには大事なツールなので、繰り返す作業はなるべく自動化したいです。

これはやってよかったなと思いました。

## 今年やったチャレンジ

「**もりけん塾**」という、フロントエンドになりたい方を応援するコミュニティがあります。

今年はそこのもくもく塾生として迎え入れてもらい、日々勉強しています。

もりけん塾では、毎月勉強会があり、1人２０分間のLTをすることがあります。

丁度募集していたので、チャレンジとして**11月**、**12月**の２回やってみました。

### LTやってみた

人前で話すのは特に苦ではないのですが、LTの機会はそうなかったので、

人生初めてのKeynoteを使ってスライドを作成し、２０分間話させてもらいました。

初回は少し業務に寄ってしまった内容だったようで、

聞いてくださった方には届かなかったような感想をいただいたので、

２回目はもう少し趣向を変えたテーマで話してみました。

これもあまり響いてなかったような気がするので、色々と反省の残る回でした。

また機会があればチャレンジしたいです。

## ざっくり季節ごとに振り返ってみる

### 春

- 仕事で仕様を正しく把握できていないまま、当時の自分では難しい案件を担当していた。

- 終わらなくて終わらなくてサビ残していた。いつから始まったかわからないくらいやっていた。

- ずっとVueでアプリを作っていた気がする。

- 去年から引き続き設計を勉強したいと思っていた。

### 夏

- 仕事は案件がなくなり落ち着いた。

- 上司から仕事の進め方を指摘され詰めr...教育的指導をみっちりしてもらう。

- メンタルをぶっ壊す。

- やけくそで最新のiPadを買う。以後めっちゃ使うようになる。

- 色々なエンジニアコミュニティの中に飛び込んでみた。

- Reactで何かしら作りまくっていた。

- デザインもやってみたが、自分は実装する方が楽しいと気づく。

### 秋

- 個人制作は続く。

- まだメンタルは安定しない日があった。

- なんとなくReactってどういうものかわかりかけてきた。

- 仕事は案件がまだ落ち着いていたが、違うチームの案件にアサインされた。

- そこでのやり方でまたみっちりレベルが上がった。

- なんとなく転職活動をしたくなる。

- 制作会社のベイジさんのカジュアル面談を受けて、軽く盛り上がる。

### 冬

- メンタルがやっと安定した。

- 個人制作と並行して複数人開発をプライベートで始める。

- 転職活動するにあたり、[モローさん(@Morow99956707)](https://twitter.com/Morow99956707)と話したり、情報収集を始める。

- 仕事は一気に担当する案件が増える。

- コーディングのスピードが1年前に比べて上がっているのに気づく。

- LTをやって色々実感した。


## 2022年の目標

学習目標は「**WebGLを力を入れて学ぶ**」です。

TypeScriptも並行してやっていきたいものの、主軸はあくまでWebGL。

というかビジュアルプログラミングの世界に興味関心があります。

また、何かしら自分が入らせてもらっているコミュニティに何かしら貢献する所存です。

何人かの方には質問いただいたら返答するなどして、

ほんの少し役に立っている感があります。

引き続き聞いてもらえる存在になりたいです。

あと稼ぎたい欲も出てきたので、何かしら考えて行けたらなぁと思います。

**今年もよろしくお願いします。**

2021年の振り返り


## intro

こんにちは、Shumpei[(@seventhseven)](https://twitter.com/seventhseven)です。

[前回](https://www.mb-js.tokyo/2021/03/14/js-moriken-jyuku02/)に引き続き、**#もりけん塾**の課題を

野良でやっていこうと思います。

[マークアップエンジニアの方がフロントエンドエンジニアになる為の課題](https://github.com/kenmori/handsonFrontend/blob/master/work/markup/1.md)

---

もしポリシーに違反していたりする場合は当該記事・ツイートを削除いたしますので、

ご連絡いただけましたら幸いです。


# マークアップエンジニアの方がフロントエンドエンジニアになる為の課題 12〜14

## 課題12

### クリックしたらリクエストをして、それらが表示されるようにしてください

[前回](https://www.mb-js.tokyo/2021/03/16/js-moriken-jyuku03/#ke-ti-11)のコードをベースに作っていきます。

### 回答

- HTML

```html
<div class='kadai-12'>
    <p>課題12</p>
    <div class='kadai-12-wrapper'>
        <p id='req12Btn' style='margin: 0;padding:8px 16px;background-color: #b3b3b3;display: inline-block;border-radius: 3px;cursor: pointer;'>取得</p>
        <div>
            <img src='./img/loading.gif' alt='loading' id='isLoading-kadai12'>
        </div>
        <ul id='kadai12Ul'></ul>
    </div>
</div>
```

- JS

```js
const kadai12 = function() {
    const $ = document.getElementById( 'kadai12Ul' );
    const $loading = document.getElementById( 'isLoading-kadai12' );
    const $btn = document.getElementById( 'req12Btn' );

    $loading.style='display:none;'

    function getElmContents() {
        return fetch( 'https://jsondata.okiba.me/v1/json/ydbaQ210312030342' )
                .then( res => res.json() )
    }

    // JSON Okiba
    // https://json.okiba.me/
    // { "data": [
    //     {
    //       "a": "bookmark",
    //       "img": "img/1.png",
    //       "alt": "画像１",
    //       "text": "ブックマーク"
    //     },
    //     {
    //       "a": "message",
    //       "img": "img/2.png",
    //       "alt": "画像２",
    //       "text": "メッセージ"
    //     }
    //   ]
    // }

    const getContentAsync = () => new Promise( (resolve, _) => {
        try {
            // setTimeout( () => {
            //     $loading.style = 'display:none;'
            //     resolve( getElmContents() );
            // }, 3000 );
        } catch( e ) {
            console.log( e );
        }
         finally {
            setTimeout( () => {
                resolve( getElmContents() );
            }, 3000 );
        }
    } );

    async function execute() {
        const items = await getContentAsync();
        function createLines ( elmContents ) {
            console.log( elmContents );

            function makeInnerElms( obj ) {
                const newLi = document.createElement( 'li' );
                const newContent = document.createTextNode( obj.text );
    
                const aTag = document.createElement( 'a' );
                aTag.href = obj.to;
    
                const imgTag = document.createElement( 'img' );
                imgTag.src = obj.img;
    
                const elms = [ aTag, imgTag, newContent ];
    
                elms.map( item => {
                    newLi.appendChild( item );
                } );
    
                return newLi;
            }
    
            elmContents.forEach( item => {
                $.appendChild( makeInnerElms( item ) );
            } );
        }
    
        $loading.style = 'display:none;'
        createLines( items.data );
    }

    function getItemsBy12 () {
        console.log( 'click' );
        $loading.style='display:block;'
        execute();
    }

    $btn.addEventListener( 'click', getItemsBy12, false );
}
```

### コメント

HTMLにボタンを追加しました

```html
<p id='req12Btn' style='margin: 0;padding:8px 16px;background-color: #b3b3b3;display: inline-block;border-radius: 3px;cursor: pointer;'>取得</p>
```

JS側でイベントハンドラーを作って、最後に呼び出して登録しています。

```js
function getItemsBy12 () {
        console.log( 'click' );
        $loading.style='display:block;'
        execute();
    }

$btn.addEventListener( 'click', getItemsBy12, false );
```

FireFoxだとクリックした要素の値をもとに何かする場合、

コールバックの関数に引数が必要なケースがあった気がします。。

## 課題13

### クリックしたらモーダルが出てきて、12で作ったボタンを押したらリクエストされ表示するようにしてください

### 回答

- HTML

```html
<div class='kadai-13'>
    <p>課題13</p>
    <div class='kadai-13-wrapper'>
        <p id='modalOpen13Btn' style='margin: 0;padding:8px 16px;background-color: #b3b3b3;display: inline-block;border-radius: 3px;cursor: pointer;'>取得する</p>
        
        <div id='modalWrapper13' style='display:none'>
            <div id='modalBack13' style='background-color: #313131;opacity: 0.5;position: absolute;width: 100%;height: 100%;top:0;'></div>
            <div id='modalBody13' style='width: 300px;height: 200px;background-color: white;position: absolute;top:50%;left:30%;border-radius: 3px;'>
                <div class='req-btn-wrapper' style='position:relative;width:100%;height: 100%;'>
                    <p id='req13Btn' style='margin: 0;padding:8px 16px;background-color: #b3b3b3;display: block;border-radius: 3px;margin: 0 auto;width: 90px;text-align: center; position: absolute;top:40%;left:30%;cursor: pointer;'>取得ボタン</p>
                </div>
            </div>
        </div>
        <div>
            <img src='./img/loading.gif' alt='loading' id='isLoading-kadai13' style='display: none;'>
        </div>
        <ul id='kadai13Ul'></ul>
    </div>
</div>
```

- JS

```js
const kadai13 = function() {
    const $ = document.getElementById( 'kadai13Ul' );
    const $loading = document.getElementById( 'isLoading-kadai13' );
    const $modalWrapper = document.getElementById( 'modalWrapper13' );
    const $modalOpenBtn = document.getElementById( 'modalOpen13Btn' );
    const $modalBack = document.getElementById( 'modalBack13' );
    const $btn = document.getElementById( 'req13Btn' );

    function showModal() {
        $modalWrapper.style = 'display:block';
    }

    function closeModal() {
        $modalWrapper.style = 'display: none';
    }

    function getElmContents() {
        return fetch( 'https://jsondata.okiba.me/v1/json/ydbaQ210312030342' )
                .then( res => res.json() )
    }

    // JSON Okiba
    // https://json.okiba.me/
    // { "data": [
    //     {
    //       "a": "bookmark",
    //       "img": "img/1.png",
    //       "alt": "画像１",
    //       "text": "ブックマーク"
    //     },
    //     {
    //       "a": "message",
    //       "img": "img/2.png",
    //       "alt": "画像２",
    //       "text": "メッセージ"
    //     }
    //   ]
    // }

    const getContentAsync = () => new Promise( (resolve, _) => {
        try {
            // setTimeout( () => {
            //     $loading.style = 'display:none;'
            //     resolve( getElmContents() );
            // }, 3000 );
        } catch( e ) {
            console.log( e );
        }
         finally {
            setTimeout( () => {
                resolve( getElmContents() );
            }, 3000 );
        }
    } );

    async function execute() {
        const items = await getContentAsync();
        function createLines ( elmContents ) {
            console.log( elmContents );

            function makeInnerElms( obj ) {
                const newLi = document.createElement( 'li' );
                const newContent = document.createTextNode( obj.text );
    
                const aTag = document.createElement( 'a' );
                aTag.href = obj.to;
    
                const imgTag = document.createElement( 'img' );
                imgTag.src = obj.img;
    
                const elms = [ aTag, imgTag, newContent ];
    
                elms.map( item => {
                    newLi.appendChild( item );
                } );
    
                return newLi;
            }
    
            elmContents.forEach( item => {
                $.appendChild( makeInnerElms( item ) );
            } );
        }
    
        $loading.style = 'display:none;'
        createLines( items.data );
    }

    function getItemsBy13 () {
        console.log( 'click' );
        $loading.style='display:block;'
        execute();
    }

    function initializeHandler() {
        $modalOpenBtn.addEventListener( 'click', showModal, false);
        $modalBack.addEventListener( 'click', closeModal, false );
        $btn.addEventListener( 'click', getItemsBy13, false );
        $btn.addEventListener( 'click', closeModal, false );
    }
    
    initializeHandler();
}
```

### コメント

だんだん長くなってきました。

HTMLにはモーダル用のラッパーコンテナを用意しました。

```html
<p id='modalOpen13Btn' style='margin: 0;padding:8px 16px;background-color: #b3b3b3;display: inline-block;border-radius: 3px;cursor: pointer;'>取得する</p>
                
<div id='modalWrapper13' style='display:none'>
    <div id='modalBack13' style='background-color: #313131;opacity: 0.5;position: absolute;width: 100%;height: 100%;top:0;'></div>
    <div id='modalBody13' style='width: 300px;height: 200px;background-color: white;position: absolute;top:50%;left:30%;border-radius: 3px;'>
        <div class='req-btn-wrapper' style='position:relative;width:100%;height: 100%;'>
            <p id='req13Btn' style='margin: 0;padding:8px 16px;background-color: #b3b3b3;display: block;border-radius: 3px;margin: 0 auto;width: 90px;text-align: center; position: absolute;top:40%;left:30%;cursor: pointer;'>取得ボタン</p>
        </div>
    </div>
</div>
<div>
```

ここではモーダル用にモーダルそのものと、モーダルより後ろの要素を暗くするためのDOMを作っておきます。

`position: absolute`で位置を設定するので、bodyにも`position: relative`を付与しました。

JSはモーダル開閉のハンドラとして、2つ用意しました。

```js
function showModal() {
    $modalWrapper.style = 'display:block';
}

function closeModal() {
    $modalWrapper.style = 'display: none';
}
```

また、最後にそれを登録しておきます。

```js
function initializeHandler() {
    $modalOpenBtn.addEventListener( 'click', showModal, false);
    $modalBack.addEventListener( 'click', closeModal, false );
    $btn.addEventListener( 'click', getItemsBy13, false );
    $btn.addEventListener( 'click', closeModal, false );
}

initializeHandler();
```

モーダルを操作したときに閉じるのと、暗くした背景をクリックしてもモーダルが閉じるようにしてあります。


## 課題14

### 13で作ったモーダル内にinputをおいて、クリックした際にinputのvalueを取得して、リクエストできるようにしてください

問題文：

13で作ったモーダル内にinput (typeはnumber)をおいて、クリックした際にinput(type number)のvalueを取得して、リクエストできるようにしてください。(その値はPromiseを実行する手前でconsole.log出力されていればいいです)

### 回答

- HTML

```html
<div class='kadai-14'>
    <p>課題14</p>
    <div class='kadai-14-wrapper'>
        <p id='modalOpen14Btn' style='margin: 0;padding:8px 16px;background-color: #b3b3b3;display: inline-block;border-radius: 3px;cursor: pointer;'>取得する</p>
        
        <div id='modalWrapper14' style='display:none'>
            <div id='modalBack14' style='background-color: #313131;opacity: 0.5;position: absolute;width: 100%;height: 100%;top:0;'></div>
            <div id='modalBody14' style='width: 300px;height: 200px;background-color: white;position: absolute;top:50%;left:30%;border-radius: 3px;'>
                <div class='req-btn-wrapper' style='position:relative;width:100%;height: 100%;'>
                    <input type='number' name='num' id='num14'>
                    <label for='num14'>
                        <p id='req14Btn' style='margin: 0;padding:8px 16px;background-color: #b3b3b3;display: block;border-radius: 3px;margin: 0 auto;width: 90px;text-align: center; position: absolute;top:40%;left:30%;cursor: pointer;'>取得ボタン</p>
                    </label>
                </div>
            </div>
        </div>
        <div>
            <img src='./img/loading.gif' alt='loading' id='isLoading-kadai14' style='display: none;'>
        </div>
        <ul id='kadai14Ul'></ul>
    </div>
</div>
```

- JS

```js
const kadai14 = function() {
    const $ = document.getElementById( 'kadai14Ul' );
    const $loading = document.getElementById( 'isLoading-kadai14' );
    const $modalWrapper = document.getElementById( 'modalWrapper14' );
    const $modalOpenBtn = document.getElementById( 'modalOpen14Btn' );
    const $modalBack = document.getElementById( 'modalBack14' );
    const $btn = document.getElementById( 'req14Btn' );
    const $input = document.getElementById( 'num14' );

    function showModal() {
        $modalWrapper.style = 'display:block';
    }

    function closeModal() {
        $modalWrapper.style = 'display: none';
    }

    function getElmContents() {
        return fetch( 'https://jsondata.okiba.me/v1/json/ydbaQ210312030342' )
                .then( res => res.json() )
    }

    // JSON Okiba
    // https://json.okiba.me/
    // { "data": [
    //     {
    //       "a": "bookmark",
    //       "img": "img/1.png",
    //       "alt": "画像１",
    //       "text": "ブックマーク"
    //     },
    //     {
    //       "a": "message",
    //       "img": "img/2.png",
    //       "alt": "画像２",
    //       "text": "メッセージ"
    //     }
    //   ]
    // }

    const getContentAsync = () => new Promise( (resolve, _) => {
        try {
            // setTimeout( () => {
            //     $loading.style = 'display:none;'
            //     resolve( getElmContents() );
            // }, 3000 );
        } catch( e ) {
            console.log( e );
        }
         finally {
            setTimeout( () => {
                resolve( getElmContents() );
            }, 3000 );
        }
    } );

    async function execute() {
        console.log( $input.value );

        const items = await getContentAsync();
        function createLines ( elmContents ) {
            console.log( elmContents );

            function makeInnerElms( obj ) {
                const newLi = document.createElement( 'li' );
                const newContent = document.createTextNode( obj.text );
    
                const aTag = document.createElement( 'a' );
                aTag.href = obj.to;
    
                const imgTag = document.createElement( 'img' );
                imgTag.src = obj.img;
    
                const elms = [ aTag, imgTag, newContent ];
    
                elms.map( item => {
                    newLi.appendChild( item );
                } );
    
                return newLi;
            }
    
            elmContents.forEach( item => {
                $.appendChild( makeInnerElms( item ) );
            } );
        }
    
        $loading.style = 'display:none;'
        createLines( items.data );
    }

    function getItemsBy14 () {
        $loading.style='display:block;'
        execute();
    }

    function initializeHandler() {
        $modalOpenBtn.addEventListener( 'click', showModal, false);
        $modalBack.addEventListener( 'click', closeModal, false );
        $btn.addEventListener( 'click', getItemsBy14, false );
        $btn.addEventListener( 'click', closeModal, false );
    }
    
    initializeHandler();
}
```

### コメント

モーダルにインプットの要素が入ってきましたので、labelとinputの紐づけを行いました。

```html
<input type='number' name='num' id='num14'>
<label for='num14'>
    <p id='req14Btn' style='margin: 0;padding:8px 16px;background-color: #b3b3b3;display: block;border-radius: 3px;margin: 0 auto;width: 90px;text-align: center; position: absolute;top:40%;left:30%;cursor: pointer;'>取得ボタン</p>
</label>
```
取得するボタンとinputを紐づけは普段しないのですが、要素数が少ないため、このように考えました。

（取得するボタンをbutton submitでやるのであれば、hidden属性を用意してパラメータとして持ち運ぶような形でしょうか。）

## まとめ

課題12〜14まで行いました。

モーダルが出て、値入力して、取得ボタンをクリック、ローディングして、値を表示するというただそれだけなのですが、

アプリっぽい要素が増えました。

ちゃんと作り込むともっと長くなってくるので楽しくなってきますね。


---

try-catch、Promise内でやらずに、それを呼び出しているところで書いたほうがよかったですかね…

【JavaScript】もりけん塾のフロントエンドエンジニア向けドリルをやってみた １２〜１４


## intro

こんにちは、Shumpei[(@seventhseven)](https://twitter.com/seventhseven)です。

[前回](https://www.mb-js.tokyo/2021/03/14/js-moriken-jyuku02/)に引き続き、**#もりけん塾**の課題を

野良でやっていこうと思います。

[マークアップエンジニアの方がフロントエンドエンジニアになる為の課題](https://github.com/kenmori/handsonFrontend/blob/master/work/markup/1.md)

---

もしポリシーに違反していたりする場合は当該記事・ツイートを削除いたしますので、

ご連絡いただけましたら幸いです。



# マークアップエンジニアの方がフロントエンドエンジニアになる為の課題 ９〜１１

## 課題9

### async awaitを使って同じことをやってください。rejectは考慮しないでいいです。問題7をasync awaitを使って書いてください

[課題7](https://github.com/kenmori/handsonFrontend/blob/master/work/markup/1.md#7)は、ローディングアニメーションが表示された後、リストが画面に表示される仕様になっています。

これをasyncとawaitを使って書き換えていきます。

### 回答

- HTML

```html
<div class='kadai-9'>
    <p>課題9</p>
    <div class='kadai-9-wrapper'>
        <img src='./img/loading.gif' alt='loading' id='isLoading-kadai9' style='display:none'>
        <ul id='kadai9Ul'></ul>
    </div>
</div>
```

- JS

```js
const kadai9 = function() {
    const $ = document.getElementById( 'kadai9Ul' );
    const $loading = document.getElementById( 'isLoading-kadai9' );

    $loading.style = 'display:block';

    function getElmContents() {
        return [
            {
                to: 'bookmark.html',
                img: '1.png',
                alt: '画像1',
                text: 'ブックマーク'
            },
            {
                to: 'message.html',
                img: '2.png',
                alt: '画像2',
                text: 'メッセージ'
            },
        ];
    }

    const getContentAsync = () => new Promise( (resolve, _) => {
        setTimeout( () => {
            $loading.style = 'display:none;'
            resolve( getElmContents() );
        }, 3000 );
    } );

    async function execute() {
        const items = await getContentAsync();
        function createLines ( elmContents ) {

            function makeInnerElms( obj ) {
                const newLi = document.createElement( 'li' );
                const newContent = document.createTextNode( obj.text );
    
                const aTag = document.createElement( 'a' );
                aTag.href = obj.to;
    
                const imgTag = document.createElement( 'img' );
                imgTag.src = obj.img;
    
                const elms = [ aTag, imgTag, newContent ];
    
                elms.map( item => {
                    newLi.appendChild( item );
                } );
    
                return newLi;
            }
    
            elmContents.forEach( item => {
                $.appendChild( makeInnerElms( item ) );
            } );
        }
    
        createLines( items );
    }

    execute();
}
```

### コメント

async用の関数に、`execute`を用意しました。

また、async内で`await`で実行する関数名を`getContentAsync`としました。

getContentAsyncは中身はPromiseを使い、`getElmContents`を実行し、処理結果をPromiseオブジェクトとして返します。

その処理結果を変数`items`として`createLines`に渡します。

itemsは名前からして配列が返ってくる感じにできてるか、若干抽象的な名前になっているかもしれません。


## 課題10

### 問題9に追加で try-catch-finaliy を書いてください

１つ前の課題に、`try-catch-finaliy`を追加します。

### 回答

- HTML

```html
<div class='kadai-10'>
    <p>課題10</p>
    <div class='kadai-10-wrapper'>
        <img src='./img/loading.gif' alt='loading' id='isLoading-kadai10' style='display:none;'>
        <ul id='kadai10Ul'></ul>
    </div>
</div>
```

- JS

```js
const kadai10 = function() {
    const $ = document.getElementById( 'kadai10Ul' );
    const $loading = document.getElementById( 'isLoading-kadai10' );

    function getElmContents() {
        return [
            {
                to: 'bookmark.html',
                img: '1.png',
                alt: '画像1',
                text: 'ブックマーク'
            },
            {
                to: 'message.html',
                img: '2.png',
                alt: '画像2',
                text: 'メッセージ'
            },
        ];
    }

    const getContentAsync = () => new Promise( (resolve, _) => {
        try {
            // setTimeout( () => {
            //     $loading.style = 'display:none;'
            //     resolve( getElmContents() );
            // }, 3000 );
        } catch( e ) {
            console.log( e );
        }
         finally {
            setTimeout( () => {
                $loading.style = 'display:none;'
                resolve( getElmContents() );
            }, 3000 );
        }
    } );

    async function execute() {
        const items = await getContentAsync();
        function createLines ( elmContents ) {

            function makeInnerElms( obj ) {
                const newLi = document.createElement( 'li' );
                const newContent = document.createTextNode( obj.text );
    
                const aTag = document.createElement( 'a' );
                aTag.href = obj.to;
    
                const imgTag = document.createElement( 'img' );
                imgTag.src = obj.img;
    
                const elms = [ aTag, imgTag, newContent ];
    
                elms.map( item => {
                    newLi.appendChild( item );
                } );
    
                return newLi;
            }
    
            elmContents.forEach( item => {
                $.appendChild( makeInnerElms( item ) );
            } );
        }
    
        createLines( items );
    }

    execute();
}
```

### コメント

Promiseを使うタイミングで`try/catch`を使いました。

Promiseで書いているんだし、then/catchでもいいかもしれませんが、

解決中に判定して絶対コケない処理をしたいという時に有効なのかな？と思いました。

```js
const getContentAsync = () => new Promise( (resolve, _) => {
    try {
        // setTimeout( () => {
        //     $loading.style = 'display:none;'
        //     resolve( getElmContents() );
        // }, 3000 );
    } catch( e ) {
        console.log( e );
    }
        finally {
        setTimeout( () => {
            $loading.style = 'display:none;'
            resolve( getElmContents() );
        }, 3000 );
    }
} );
```

ただtry節に何書いていいかわからなかったので、何もしないでいます。

ここ、どうしたらよかったかな…実際はリクエスト処理とかをやる感じでしょうか

次回Promise内でtry/catchしたときの動きを確かめてみたいと思います。

## 課題11

### 簡易的なAPIを使ってエンドポイントを取得 前回までのコードを生かしてfetchを使ってデータを取得してください

問題文：

簡易的なAPIを使って同じことを[こちら](https://jsondata.okiba.me)のサイトに

```json
{ "data": [
  {
    "a": "bookmark",
    "img": "img/1.png",
    "alt": "画像１",
    "text": "ブックマーク"
  },
  {
    "a": "message",
    "img": "img/2.png",
    "alt": "画像２",
    "text": "メッセージ"
  }
]}
```

上記を登録してエンドポイントを取得 前回までのコードを生かして fetchを使ってデータを取得してください

取得したデータは前回と同じように表示してください

### 回答

- HTML

```html
<div class='kadai-11'>
    <p>課題11</p>
    <div class='kadai-11-wrapper'>
        <img src='./img/loading.gif' alt='loading' id='isLoading-kadai11'>
        <ul id='kadai11Ul'></ul>
    </div>
</div>

```

- JS

```js
const kadai11 = function() {
    const $ = document.getElementById( 'kadai11Ul' );
    const $loading = document.getElementById( 'isLoading-kadai11' );

    function getElmContents() {
        return fetch( 'https://jsondata.okiba.me/v1/json/ydbaQ210312030342' )
                .then( res => res.json() )
    }

    const getContentAsync = () => new Promise( (resolve, _) => {
        try {
            // setTimeout( () => {
            //     $loading.style = 'display:none;'
            //     resolve( getElmContents() );
            // }, 3000 );
        } catch( e ) {
            console.log( e );
        }
         finally {
            setTimeout( () => {
                $loading.style = 'display:none;'
                resolve( getElmContents() );
            }, 3000 );
        }
    } );

    async function execute() {
        const items = await getContentAsync();
        function createLines ( elmContents ) {

            function makeInnerElms( obj ) {
                const newLi = document.createElement( 'li' );
                const newContent = document.createTextNode( obj.text );
    
                const aTag = document.createElement( 'a' );
                aTag.href = obj.to;
    
                const imgTag = document.createElement( 'img' );
                imgTag.src = obj.img;
    
                const elms = [ aTag, imgTag, newContent ];
    
                elms.map( item => {
                    newLi.appendChild( item );
                } );
    
                return newLi;
            }
    
            elmContents.forEach( item => {
                $.appendChild( makeInnerElms( item ) );
            } );
        }
    
        createLines( items.data );
    }

    execute();
}
```

### コメント

JSON Okibaというサービスを初めて知りました。

リクエストのテストするのにいい練習になりますね。

[JSON Okiba](https://json.okiba.me/)

---

今回は`fetch`を使ってのリクエストを行います。

fetchメソッドを使ったことがなかったですが、Promiseが返ってくるなら書き方が想像できます。

```js
function getElmContents() {
    return fetch( 'https://jsondata.okiba.me/v1/json/ydbaQ210312030342' )
            .then( res => res.json() )
}
```

最小だとこんな感じでしょうか。

thenしか書いてないですが、ちゃんと書くならcatchも書いてエラーハンドリングしたほうがいいですね。

あとはawaitで使う`getContentAsync`でこのメソッドを叩きます。

```js
const getContentAsync = () => new Promise( (resolve, _) => {
    try {
        // setTimeout( () => {
        //     $loading.style = 'display:none;'
        //     resolve( getElmContents() );
        // }, 3000 );
    } catch( e ) {
        console.log( e );
    }
        finally {
        setTimeout( () => {
            $loading.style = 'display:none;'
            resolve( getElmContents() );
        }, 3000 );
    }
} );
```

finally節内のsetTimeoutで実行します。

executeメソッド内でawaitでgetContentAsyncを実行

↓

try/catch/finallyで最終的に必ずgetElmContentsが実行

↓

getElmContents内でもthen/catchを用意して、必ずなにか行う

という網を張っておく感じでしょうか。


## まとめ

Promise、async/await、fetchなど、非同期関数がたくさん出てきました。

WebアプリならSPAが基本になってきますし、UIの構築に絡んでくるため

非同期処理を覚えないといけないので、何回も試してみて理解を深めていきたいですね。

また、非同期で取得したレスポンスはピュアオブジェクトで返ってくるのか、JSONで返ってくるのかで

使うメソッドも変わってくるかと思います。

JSのアップデートによる純粋なAPIやライブラリを使って便利にラップしてくれるメソッドを使えますが、

中でどんな事が起きているのか、軽くでも確認しつつ勉強していきたいと思います。

【JavaScript】もりけん塾のフロントエンドエンジニア向けドリルをやってみた ９〜１１


## intro

こんにちは、Shumpei[(@seventhseven)](https://twitter.com/seventhseven)です。

[前回](https://www.mb-js.tokyo/2021/03/14/js-moriken-jyuku01/)に引き続き、**#もりけん塾**の課題を

野良でやっていこうと思います。

[マークアップエンジニアの方がフロントエンドエンジニアになる為の課題](https://github.com/kenmori/handsonFrontend/blob/master/work/markup/1.md)

---

もしポリシーに違反していたりする場合は当該記事・ツイートを削除いたしますので、

ご連絡いただけましたら幸いです。



# マークアップエンジニアの方がフロントエンドエンジニアになる為の課題 ６〜８

## 課題6

### 5で作ったものを3秒後に解決されるようにしてください

5というのは、[Promiseオブジェクトを使って解決された値として受け取り、同じようにDOMへ出力する](https://www.mb-js.tokyo/2021/03/14/js-moriken-jyuku01/#ke-ti-5)の拡張になります

### 回答

- HTML

```html
<div class='kadai-6'>
    <p>課題6</p>
    <ul id='kadai6Ul'></ul>
</div>
```

- JS

```js
const kadai6 = function() {
    const $ = document.getElementById( 'kadai6Ul' );

    function getElmContents() {
        return [
            {
                to: 'bookmark.html',
                img: '1.png',
                alt: '画像1',
                text: 'ブックマーク'
            },
            {
                to: 'message.html',
                img: '2.png',
                alt: '画像2',
                text: 'メッセージ'
            },
        ];
    }


    return new Promise( (resolve, _) => {
        setTimeout( () => {
            resolve( getElmContents() );
        }, 3000 );
    } )
    .then( res => {
        if( !res ) { return; }

        const elmContents = res;

        function createLines ( elmContents ) {

            function makeInnerElms( obj ) {
                const newLi = document.createElement( 'li' );
                const newContent = document.createTextNode( obj.text );
    
                const aTag = document.createElement( 'a' );
                aTag.href = obj.to;
    
                const imgTag = document.createElement( 'img' );
                imgTag.src = obj.img;
    
                const elms = [ aTag, imgTag, newContent ];
    
                elms.map( item => {
                    newLi.appendChild( item );
                } );
    
                return newLi;
            }
    
            elmContents.forEach( item => {
                $.appendChild( makeInnerElms( item ) );
            } );
        }
    
        createLines( elmContents );
    } )
    .catch( err => {
        console.log( err );
    } );
}
```

### コメント

Promise内で`setTimeout`を使います。

今回はPromiseの引数を`resolve`と`_`を書いてみました。

`reject`と書いてもいいのですが、使う予定がないので`_`として、

明示的に使わない引数ですとしています。

```js
return new Promise( (resolve, _) => {
    setTimeout( () => {
        resolve( getElmContents() );
    }, 3000 );
} )
```

3000ミリ秒後に`getElmContents()`が実行され、その戻り値が解決された値としてthen/catch節に渡ってきます。

あとの処理は５番目の課題で提示したものと同じになります。

## 課題7

### loadingを実装してみてください

よくあるぐるぐるマークが表示されたあと、今まで作ってきたリストが画面に表示されるという動きです。

[課題の画面サンプル](https://github.com/kenmori/handsonFrontend/blob/master/work/markup/1.md#7)

### 回答

- HTML

```html
<div class='kadai-7'>
    <p>課題7</p>
    <div class='kadai-7-wrapper'>
        <img src='./img/loading.gif' alt='loading' id='isLoading-kadai7'>
        <ul id='kadai7Ul'></ul>
    </div>
</div>
```

- JS

```js
const kadai7 = function() {
    const $ = document.getElementById( 'kadai7Ul' );
    const $loading = document.getElementById( 'isLoading-kadai7' );

    function getElmContents() {
        return [
            {
                to: 'bookmark.html',
                img: '1.png',
                alt: '画像1',
                text: 'ブックマーク'
            },
            {
                to: 'message.html',
                img: '2.png',
                alt: '画像2',
                text: 'メッセージ'
            },
        ];
    }


    return new Promise( (resolve, _) => {
        setTimeout( () => {
            $loading.style = 'display:none;'
            resolve( getElmContents() );
        }, 3000 );
    } )
    .then( res => {
        if( !res ) { return; }

        const elmContents = res;

        function createLines ( elmContents ) {

            function makeInnerElms( obj ) {
                const newLi = document.createElement( 'li' );
                const newContent = document.createTextNode( obj.text );
    
                const aTag = document.createElement( 'a' );
                aTag.href = obj.to;
    
                const imgTag = document.createElement( 'img' );
                imgTag.src = obj.img;
    
                const elms = [ aTag, imgTag, newContent ];
    
                elms.map( item => {
                    newLi.appendChild( item );
                } );
    
                return newLi;
            }
    
            elmContents.forEach( item => {
                $.appendChild( makeInnerElms( item ) );
            } );
        }
    
        createLines( elmContents );
    } )
    .catch( err => {
        console.log( err );
    } );
}
```

### コメント

HTMLにローディングのDOMを追加しました。

```html
<img src='./img/loading.gif' alt='loading' id='isLoading-kadai7'>
```

ちょっとIDの付け方がミスったなぁと今は思います。

今後の課題もローディングがでてくるのですが、この命名規則に準拠しています。。

```js
const $loading = document.getElementById( 'isLoading-kadai7' );

===

return new Promise( (resolve, _) => {
    setTimeout( () => {
        $loading.style = 'display:none;'
        resolve( getElmContents() );
    }, 3000 );
} )
```

JS側では、先にローディングのidを捕捉しておいて、Promiseの中でstyleを`display:none`にしています。

そうすることでローディングのgifは消えるのですが、

あとから考えたらこの書き方はよくないなと。

- 最初は`display:none`で読み込まれるべき
- JS側でイベントなり処理が走り始めてから`display:block`にして、処理が終わったら`display:none`に戻す

ほうが自然だと思い直し、次回以降の処理は修正を加えています。

また、ローディングの結果、resolveで正常に処理が終了してもしなくても何かしら画面に表示される仕様になると思うので

今回はdisplay:noneにするタイミングはここでいいかなと考えています。


## 課題8

### 3秒後にrejectを実行してthenでその値をコンソール出力してください

課題文：

つぎはresolveで解決するのではなく(resolveを実行するのではなく) 3秒後にrejectを実行してthenでその値をコンソール出力してください。ローディングはぐるぐる状態で良いです。

いままでresolveとしていたところでrejectを実行して、エラーを起こしてcatch節でエラーをキャッチしてください

### 回答

- HTML

```html
<div class='kadai-8'>
    <p>課題8</p>
    <div class='kadai-8-wrapper'>
        <img src='./img/loading.gif' alt='loading' id='isLoading-kadai8' style='display:none'>
        <ul id='kadai8Ul'></ul>
    </div>
</div>
```

- JS

```js
const kadai8 = function() {
    const $ = document.getElementById( 'kadai8Ul' );
    const $loading = document.getElementById( 'isLoading-kadai8' );

    $loading.style = 'display:block';

    function getElmContents() {
        return [
            {
                to: 'bookmark.html',
                img: '1.png',
                alt: '画像1',
                text: 'ブックマーク'
            },
            {
                to: 'message.html',
                img: '2.png',
                alt: '画像2',
                text: 'メッセージ'
            },
        ];
    }


    return new Promise( (_, reject) => {
        setTimeout( () => {
            reject( getElmContents() );
        }, 3000 );
    } )
    .then( () => {} )
    .catch( err => {
        // console.log( err );
    } );
}
```

### コメント

最小限でrejectのテスト的な形で書きました。

そのため、Promiseの引数を`_`、`reject`としています。

そしてrejectメソットでgetElmContents()を叩き、

無事catch節にたどり着きました。


## まとめ

DOMの生成については先に作っておいた関数を実行するだけなので、大丈夫かなと思います。

実際やるとしたらutilみたいなモジュール作って実行するので、

毎回中身を書く必要はないようにします。

また、命名やloadingの表示非表示のタイミングなど、考慮不足な面がありましたので反省します。

次回は`async`、`await`を使って同じ処理を実現する課題をやっていきます。

【JavaScript】もりけん塾のフロントエンドエンジニア向けドリルをやってみた ６〜８


## intro-1

こんにちは、Shumpei[(@seventhseven)](https://twitter.com/seventhseven)です。

最近ツイッターで「**#もりけん塾**」というワードを見かけました。

追っていくと、フロントエンドエンジニアの森田さん([@terrace_tech](https://twitter.com/terrace_tech))という方が開いている

コーダーの方がフロントエンドエンジニアになるために学習されている向けの塾だそうです。

## intro-2

森田さんのGitHubに、その熟成の方向けに作られたJSの課題が置かれているのを発見しました。

[マークアップエンジニアの方がフロントエンドエンジニアになる為の課題](https://github.com/kenmori/handsonFrontend/blob/master/work/markup/1.md)

独学でもコードを書く練習ができる教材を見つけては勝手にやらせてもらっているので、

もりけん塾の塾生の方とは何ら無関係ですが、とりあえずドリルをやってみたのでアウトプットとしてブログに残しておきたいと思います。

---

もしポリシーに違反していたりする場合は当該記事・ツイートを削除いたしますので、

ご連絡いただけましたら幸いです。



# マークアップエンジニアの方がフロントエンドエンジニアになる為の課題 １〜５

## 課題1

### 1.このDOMをhtml内のulの中に差し込んでください

```html
<li>これです</li>
```

### 回答

- HTML

```html
<div class='kadai-1'>
    <p>課題1</p>
    <ul id='kadai1Ul'></ul>
</div>
```

- JS

```js
const kadai1 = function() {
    const $ = document.getElementById( 'kadai1Ul' );
    const newLi = document.createElement( 'li' );
    const newContent = document.createTextNode( 'これです' );
    newLi.appendChild( newContent );

    $.appendChild( newLi );
}
```

```js
function init() {
    kadai1();
}

init();
```

### コメント

今まで`document.getElementById()`で取得する変数名に対し、`$`を使うことをしていませんでした。

ただ、明示的にDOMだということがわかりやすくなると思ったので

今回の課題に対しては採用していきたいと思います。

また、実行する`init()`関数は、すべての課題に対してこの形で実行していきます。


## 課題2

### 2.このDOMをJavaScriptでつくり、html内のulの中に差し込んでください

```html
<li>
  <a href="1.html"><img src="bookmark.png" alt="ブックマーク" />これです</a>
</li>
```

### 回答

- HTML

```html
<div class='kadai-2'>
    <p>課題2</p>
    <ul id='kadai2Ul'></ul>
</div>
```

- JS

```js
const kadai2 = function() {
    const $ = document.getElementById( 'kadai2Ul' );
    
    function makeInnerElms() {
        const newLi = document.createElement( 'li' );
        const newContent = document.createTextNode( 'これです' );

        const aTag = document.createElement( 'a' );
        aTag.href = '1.html';

        const imgTag = document.createElement( 'img' );
        imgTag.src = 'bookmark.png';
        imgTag.alt = 'ブックマーク';

        const elms = [ aTag, imgTag, newContent ];

        elms.forEach( item => {
            newLi.appendChild( item );
        } )

        return newLi;
    }

    const elms = makeInnerElms();

    $.appendChild( elms );
}
```

### コメント

`li`用のエレメントを作って返してくれる便利な関数`makeInnerElms`を作りました。

`elms`という配列を作ってループで`appendChild`していくので、

配列の順序を変えてあげることで、DOMの構造を変えることができるのでいいかなと考えました。

今後はこの`makeInnerElms`を拡張していく形で進めていきます。


## 課題3

### 3.このDOMをJavaScriptでつくり、html内のulの中に差し込んでください

```html
<ul>
  <li><a href="a1.html"><img src="/img/bookmark.png">a1</li>
  <li><a href="a2.html"><img src="/img/bookmark.png">a2</li>
</ul>
```

### 回答

- HTML

```html
<div class='kadai-3'>
    <p>課題3</p>
    <ul id='kadai3Ul'></ul>
</div>
```

- JS

```js
const kadai3 = function() {
    const $ = document.getElementById( 'kadai3Ul' );

    const elmContents = [
        {
            href: 'a1.html',
            imgSrc: '/img/bookmark1.png',
            txt: 'a1'
        },
        {
            href: 'a2.html',
            imgSrc: '/img/bookmark2.png',
            txt: 'a2'
        },
    ];
    
    function createLines ( elmContents ) {

        function makeInnerElms( obj ) {
            const newLi = document.createElement( 'li' );
            const newContent = document.createTextNode( obj.txt );

            const aTag = document.createElement( 'a' );
            aTag.href = obj.href;

            const imgTag = document.createElement( 'img' );
            imgTag.src = obj.imgSrc;

            const elms = [ aTag, imgTag, newContent ];

            elms.map( item => {
                newLi.appendChild( item );
            } );

            return newLi;
        }

        elmContents.forEach( item => {
            $.appendChild( makeInnerElms( item ) );
        } );
    }

    createLines( elmContents );
}
```

### コメント

`elmContents`という配列に、ピュアなオブジェクトでDOMにあてる要素を作り格納しました。

前回の課題で作った`makeInnerElms`を拡張して、配列を引数にとってリストを作る`createLines`という関数を作りました。

`elmContents`を分解してDOMを作るループ処理を行っています。


## 課題4

### 配列を使ってhtmlの中でJavaScriptでDOMを作りブラウザ出力がこのようになるようにしてください

- 配列

```js
[{to: "bookmark.html", img: "1.png", alt:"画像1", text: "ブックマーク"}, {to: "message.html", img: "2.png", alt:"画像2", text: "メッセージ"}]
```

- DOM

```html
<ul>
 <li><a href="/bookmark.html"><img src="1.png" alt="画像1">ブックマーク</a></li>
 <li><a href="/message.html"><img src="2.png" alt="画像2">メッセージ</a></li>
</ul>
```

### 回答

- HTML

```html
<div class='kadai-4'>
    <p>課題4</p>
    <ul id='kadai4Ul'></ul>
</div>
```

- JS

```js
const kadai4 = function() {
    const $ = document.getElementById( 'kadai4Ul' );

    const elmContents = [
        {
            to: 'bookmark.html',
            img: '1.png',
            alt: '画像1',
            text: 'ブックマーク'
        },
        {
            to: 'message.html',
            img: '2.png',
            alt: '画像2',
            text: 'メッセージ'
        },
    ];

    function createLines ( elmContents ) {

        function makeInnerElms( obj ) {
            const newLi = document.createElement( 'li' );
            const newContent = document.createTextNode( obj.text );

            const aTag = document.createElement( 'a' );
            aTag.href = obj.to;

            const imgTag = document.createElement( 'img' );
            imgTag.src = obj.img;

            const elms = [ aTag, imgTag, newContent ];

            elms.map( item => {
                newLi.appendChild( item );
            } );

            return newLi;
        }

        elmContents.forEach( item => {
            $.appendChild( makeInnerElms( item ) );
        } );
    }

    createLines( elmContents );
}
```

### コメント

図らずとも課題3でほぼ同じことを行っていましたので、配列に入れるオブジェクトのキー名を変更した程度でした

## 課題5

### 4のこちらをつかって、こんどはPromiseオブジェクトを使って解決された値として受け取り、同じようにDOMへ出力する

- 配列

```js
[{to: "bookmark.html", img: "1.png", alt:"画像1", text: "ブックマーク"}, {to: "message.html", img: "2.png", alt:"画像2", text: "メッセージ"}]
```

- DOM

```html
<ul>
 <li><a href="/bookmark.html"><img src="1.png" alt="画像1">ブックマーク</a></li>
 <li><a href="/message.html"><img src="2.png" alt="画像2">メッセージ</a></li>
</ul>
```

### 回答

- HTML

```html
<div class='kadai-5'>
    <p>課題5</p>
    <ul id='kadai5Ul'></ul>
</div>
```

- JS

```js
const kadai5 = function() {
    const $ = document.getElementById( 'kadai5Ul' );

    function getElmContents() {
        return [
            {
                to: 'bookmark.html',
                img: '1.png',
                alt: '画像1',
                text: 'ブックマーク'
            },
            {
                to: 'message.html',
                img: '2.png',
                alt: '画像2',
                text: 'メッセージ'
            },
        ];
    }


    return new Promise( (resolve) => {
        resolve( getElmContents() );
    } )
    .then( res => {
        if( !res ) { return; }

        const elmContents = res;

        function createLines ( elmContents ) {

            function makeInnerElms( obj ) {
                const newLi = document.createElement( 'li' );
                const newContent = document.createTextNode( obj.text );
    
                const aTag = document.createElement( 'a' );
                aTag.href = obj.to;
    
                const imgTag = document.createElement( 'img' );
                imgTag.src = obj.img;
    
                const elms = [ aTag, imgTag, newContent ];
    
                elms.map( item => {
                    newLi.appendChild( item );
                } );
    
                return newLi;
            }
    
            elmContents.forEach( item => {
                $.appendChild( makeInnerElms( item ) );
            } );
        }
    
        createLines( elmContents );
    } )
    .catch( err => {
        console.log( err );
    } );

}
```

### コメント

Promiseが出てきました。今回はrejectは書かないため、引数はresolveだけ取っています。

ただ、then/catchで最低限のエラーハンドリングだけ用意しています。

また、thenの最初で早期リターンを行い、余計なコードが走らないようにしています。

今回は`this`を使っていないので、`this`がどこを指しているかなどのスコープは考えていません。


## forEachとmap

今回、forEachとmapを使い分けるということを考えてみました

- mapは新しい配列を値として返す
- forEachはundefinedを値として返す

という違いがあることから、

- 加工して持ち歩きたい配列を作るときは**map**
- ただ配列を渡して処理をさせるだけのときは**forEach**

ということを意識しました。

## まとめ

今回は課題１〜５までを書きました。

`createElement`などのメソッドは普段使わないので、

`createTextNode`を副次的に使ったりするなど、知らないことを知るいいきっかけになりました。

現在課題17まで終わっているので、問題なければ順次ブログに上げていこうと思います。

【JavaScript】もりけん塾のフロントエンドエンジニア向けドリルをやってみた １〜５


## intro

こんにちは、Shumpei[(@seventhseven)](https://twitter.com/seventhseven)です。

今日はJSのラッパーオブジェクトについて書きます。

文字列型だけど一瞬プロパティが作られて、実行直後に破棄される動きです。


# JSのラッパーオブジェクトの不思議

## プリミティブ型の仕様

### 不思議に思ったこと

  ```js
  const falsy = "false";

  if(falsy) {
    console.log(falsy.aa = "aa");
    console.log(falsy);
  }

  コンソール出力結果：
  "aa"
  "false"
  ```

オブジェクト的な扱いなのであれば、

"false"の中にkey aaのValue "aa"が存在するのでは？

どういうデータ構造になっているのかわからない

---

JSは基本全てオブジェクトであるが、プリミティブ型はほぼオブジェクトというような位置づけ

JSはエラー回避のため、上記のようなコードがあった場合、
実行用のオブジェクトが一瞬作られ、実行したら即破棄される

そのため、コンソールにはaa, falseとなった

仕様上の動きであり、String, Array, Number, Booleanなどの型でも同様の動き

これがラッパーオブジェクト

【JavaScript】プリミティブ型はほぼオブジェクトという話


## intro

こんにちは、Shumpei[(@seventhseven)](https://twitter.com/seventhseven)です。

今日も超小ネタです。

いわゆる円マークを画面に表示させる時どうするのか、という話です。


# JS / HTML で円マークを表示させる

ファイルの文字コードがShift-jisでJSファイルを書いている場合、

JSファイル内で円マークを表示させるときは`\xA5`で表示されます。

これは、JSがunicodeベースで作られているためです。

また、HTML上では`&yen;`で表示することができます。

今日は以上です。

MB.js

BLOG