タスク消化とバッファの関係について。

◇2024年5月

所属：フロントチーム

タスク：実装とテスト

フロントチームに移動して2か月が経とうとしています。

相変わらず、画面レイアウトの通りになるようCSSを当てたり

詳細設計書の処理になるようTypeScriptを書いたりしております。

前のチーム編成の時はCSS-TypeScript-Javaまでを一人でやる方針につき

Javaで相当苦しんでいた私ですが、

フロントチームに来てからは割と心に余裕がございます。

TypeScriptに関しても、全く持ってスキルがある！と胸を張れるレベルでは無いものの

Javaよりかは幾分マシであり、タスクが進まず意気消沈、なんて事態も避けられております。

自分で言うのもなんですが

ここ数ヶ月でとても成長できている気がします。

開発案件自体には、入って４か月が経ちました、

最初は、開発の流れも、具体的な方法も、コードの書き方や実装のロジック等

なーーんにもわからなかったのですが、

だいぶ流れがつかめてきたし、なんなら他の人に教えて差し上げられるようにすらなってきました。

いや、ちょっと難しいことになるともうわからないのですが。笑

一つの機能を設計して、それをゼロから作り上げるのって大変なんですね。

でも、今までは霧がかかったようにもやもや～っとしかわからなかったものが

やっとクリアになりつつあります。

おかげ様でタスクの消化も早くなり、

生産性もなかなか高くなってきました。

私事ですが、ゴールデンウィークにウズベキスタンに行ってきたんですね。

見てくださいこの美しいブルー！！

今年は長期休みが多く当たり年だそうで、

ずっと行ってみたかった国に思い切って行ってきてしまいました！！

有給を4日費やし、11連休生成して挑んだ旅はかなり充実して楽しかったです！

ただ、

4日休むということはその4日分のタスクをどこかで挽回しないといけないということなんですよねー

GWの前に先行して完了させておくのもよし、

GW明けに頑張って取り戻すもよし、

とりあえず進捗に遅れを出さなければOKとのことでした。

な　の　で

先行してタスクやりまくりました！！

毎日残業して、

何とか4日分のバッファを積んだ状態まで持っていけました！！

いや～　頑張った！！

これでGWも心置きなく休めるぞ！と思っていたら、

なんと

降りかかる

新タスク。

他のメンバーで遅れている作業の巻き取りを、

「なんか進捗に余裕あるから」って理由に振られてしまいました・・・

いや、

ゴールデーンウィークいないので！！！

って私言いましたよね！！！？

なんで他のタスク振るの！！

おかげでせっかく積んだバッファ無くなっちゃったよ！！！！！

（なんならちょっと遅延）

そうか～　頑張って仕事しても、

新しいタスク振られちゃうだけなんだな・・・（絶望）

これは、正直に進捗報告するの馬鹿らしくなってきてしまう・・・

とはいえみんな頑張っているので私もちゃんとやるのはやりますが、

あまり頑張りすぎても良くないのかもしれないな、と思ってしまった出来事でした。

皆さん、お仕事はほどほどにして

自分の時間も大切にしましょうね。

今日も読んでくれてありがと～(^^)/

---------------------------------------------＊＊＊---

▼ランキングに参加してます。
良ければポチっと('ω')

-----＊＊＊-------------------------------------------

JSでのフィルター機能実装方法について

ちょっと、今回の記事のアイキャッチ（記事の上に出てるトップ画像のこと）

良い感じじゃないですか？？

はてなブログ、Canvaと連携して画像作成できるらしいです。

こんな機能知りませんでした。

なんだかとてもおしゃれ。

-　-　-　-

◇2024年3月

タスク：JavaScriptの処理実装

開発現場というのは、いろいろなスタイルはあるものの

私が今いるプロジェクトに関しては

要件定義-基本設計-詳細設計-実装-単体テスト-結合テスト...

といったような流れで進んでいきます。

基本設計で大枠の設計を行い、

その基本設計書を元に、さらに細かく設計をするのが詳細設計です。

が、この設計書がなんせイケてないことがとても多く・・・

（ちゃんとしてるプロジェクトはそうでもないんでしょうか？）

設計書通りの実装じゃ期待通りに動かないとか、

設計当初から大幅に仕様変更があって、設計書自体が役に立たない何てことが頻発しております。

実装者（コード書く人）と設計者（設計書書いた人）が違うことも多いので

設計書の修正は設計担当に依頼し、その修正が終わるまで実装に着手できず遅延、なんてこともしばしばです。

そんな中で毎日頑張ってJavaScriptの実装をしておりますが、

とても勉強になったことがあるので共有です。

■JavaScriptで複数項目のフィルターをかける方法

イメージとしては、エクセルのフィルターみたいなもので

表示されているリストを条件に沿う内容でフィルターをかけるというもの。

例として、下記のようなリストがあるとします。

出身と性別でフィルターを掛けられるようにしようと思い、

フィルターの条件とするためのプルダウンを上部に作りました。

選択肢には、

出身：国の名前

性別：　男・女

が設定されていると考えてください。

・コードサンプル

filterLogic(){

    const arr = originalList;

    return arr.filter((item) => (

        this.filterPlace(item) &&

        this.filterGender(item)

        )

    );

}

filterPlace(target){

    if ((place ?? '') == '') {

        return true;

    } else if (place == target) {

        return true;

    } else {

        return false;

    }

}

filterGender(target){

    if ((gender ?? '') == '') {

        return true;

    } else if (gender == target) {

        return true;

    } else {

        return false;

    }

}

filterLogic()

まず、メインとなるのがfilterLogic()メソッドです。

選択肢が変更される度にonChange()で走らせるメソッドで、

各フィルター項目で絞り込まれたリストを返却します。

filterXXXメソッドを&&でつないでいるので、

両方の条件に合致する場合にのみ返却するリストに含まれる仕様です。

onChangeを使うと、状態が変更されたときに指定したメソッドを走らせることができます。

他にもonBlur（フォーカスが外れた時）やonClick（クリックした時）などがあります。

filterPlace()/filterGender()

filterLogic()の中に、各項目単体での絞り込み処理を持つfilterXXX()メソッドがあります。

filterXXX()の中の処理については、

絞り込みの選択肢が””（空文字）の場合や

リストの項目と一致する場合にはtrueを返却し、

それ以外はfalseを返します。

それぞれのメソッドの"place", "gender"にはプルダウンで選択した値を入れて動かします。

値の取得方法についてはここでは書きませんが、

よくわからないって方は調べてみてください！

とは言え、なかなかわかりづらい部分だと思うのでもう少し詳しく・・・

わかるわ！って人は読み飛ばしてください。

まず、

if ((place ?? '') == '') 
この部分のコードについて解説します。

if文の条件となっているもので、"place"にはプルダウンで選択した値が入ってきます。

そして、その"place"がnullまたはundefinedである場合に右側の値を返すというものです。

この条件式の中の"??"はnullish coalescing operator というらしく、

??の左側の値が null または undefined である場合に、??の右側の値を返す演算子です。

つまり、if ((place ?? '')　　の部分で、

place が null または undefined である場合、''（空文字）を返し、

if ((place  ?? '') === '') {　　の部分で

place が null または undefined ならば、place ?? '' は '' になり、

( "" === "" )

の状態となるのでtrueを返すというわけです。

filterGenderの処理も全く同じです。

フィルターの数が多くなったら、同様のfilterXXXメソッドを連結させていけばOKです！

絞り込みをする対象は
const arr = oroginalList;　の行で

絞り込み前のデータを取得して、そのデータに対してくださいね。

originalListに対してfilterを掛けると、既に絞り込んだリストに対して再度フィルターを掛けることとなり

絞り込みの解除が出来なくなったり、他の選択肢で選択しなおしたときに表示が出来なかったりします。

絞り込みを全て解除する場合は、

表示させたいリストの変数にoriginalListを代入してあげるか、

"place","gender"の中身を""(空文字)に設定した上でfilterLogic()を動かせばOKです。

では長くなりましたが、

今日も読んでくれてありがと～(^^)/

---------------------------------------------＊＊＊---

▼ランキングに参加してます。
良ければポチっと('ω')

-----＊＊＊-------------------------------------------

HTML無しで要素の生成ってどうやるの？ -画面・JavaScript編-

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
【週報】5/6（月）〜　5/10（金）

★ 配属先現場名：tdi開発案件
★ 案件内容：金融系システムの開発
★ 開発環境
　 言語：HTML/CSS/JavaScript/TypeScript/Java
　 DB：DB2
　 OS：Windows
　 FW・MW・ツール等：GitLab/Excel/eclipse/VSCode/a5m2/AWAG
　 担当工程：設計/開発/単体テスト

★ その他スキル：VBA

★ 業務報告（1週間の業務内容を箇条書きで記載）

1,JavaScript処理実装
2.デバッグ
3.CSSレイアウトカスタマイズ
4,テスト仕様書作成/レビュー取り込み
5,単体テスト実施（JS処理・レイアウト確認）

★ 今週の振り返り：
５月が終わるころには、ある程度画面チームのタスクが落ち着きそうなので
おそらくAPIチームに戻ることになりそうです。
Javaがわからず、フロントで悠々やってましたがまた大変な日々になりそうです・・・

★ 来週の目標：
★ なんでも欄：

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

◇2024年2月

タスク：CSS・JavaScript処理カスタマイズ

自動生成されたHTMLで描画されCSSでカスタマイズする作業が

大方終わろうとしていた頃ですが、

どうしてもCSSだけでは解決できそうにない問題に直面しました。

それが、要素の生成です。

例えば、こんな画面レイアウトを作りたいとするじゃないですか。

なのに、自動で生成されたコードは、なぜかこう。みたいな。

この状態から、上の状態に持ってくの、

CSSだけじゃ無理じゃない？？

と思いました。

CSSで、画面サイズや比率変えた場合にも対応できるように

要素の位置を入れ替える方法ってあるんでしょうか？

ボタンや文言の部分にいろんなスタイルを当てまくれば

もしかしたら出来るのかも知れませんが、

私にその知見はありません。

そして、出来たとしてもなんかものすごく大変そう。

そしてそして、画面の表示サイズとか変わった時のことを考慮するとなると

すごくすごく大変そう。。

ということでCSSで何とかすることは早々に諦めました。

諦めることも大事なんです。

じゃあどうするかとなった時に、

良い方法を見つけました！

JSで、新たに要素を生成してしまうんです！

実際に私が書いたのは

const button = document.getElementById("execute);

button!.insertAdjacentHTML('beforebegin','<div>実行する</div>')

って感じです。

まず、document.getElementByIdで、要素を追加したい箇所のボタン（今回の場合は実行ボタン）の要素を取得します。

で、取得した実行ボタンの前に、

<div>実行する</div>

というdivタグを追加します。

<div>

　 <div>実行する</div>  //ここが追加した要素

     <button>実行</button>

</div>

こんなイメージですね。

追加する位置はいろいろ変えられるようです。

"beforebegin"

要素の前。要素が DOM ツリー内にあり、親要素がある場合にのみ有効です。

"afterbegin"

要素のすぐ内側、最初の子の前。

"beforeend"

要素のすぐ内側、最後の子の後。

"afterend"

要素の後。要素が DOM ツリー内にあり、親要素がある場合にのみ有効です。

Element: insertAdjacentHTML() メソッド - Web API | MDN

今回の例は、divタグの中にbuttonタグがある

つまり、親要素となるdivタグがあったので

beforebeginで問題なく要素の追加が出来たんですね～

対象のdivタグの中のInnnerHTMLをいじるといった方法もあるようですが、

処理速度が速いとか、他の要素に影響を及ぼさないとかなんとかでinsertAdjacentHTMLのほうが良いみたいです。

Document.createElement()を使っても同じようなことが出来そうでしたが

記述量は増えそうだし、直感的にわかりやすいのはやはりinsertAdjacentHTMLと感じました。

developer.mozilla.org

実際、要素の追加となると

insertAdjacentHTMLが主流みたいですね。

記述量もこちらの方が少ないですし、

今後要素の追加をする必要がある場合はこちらを使用しようと思います。

**Tips*****************************************************

insertAdjacentHTML

要素の追加

"beforebegin"

要素の前。要素が DOM ツリー内にあり、親要素がある場合にのみ有効。

"afterbegin"

要素のすぐ内側、最初の子の前。

"beforeend"

要素のすぐ内側、最後の子の後。

"afterend"

要素の後。要素が DOM ツリー内にあり、親要素がある場合にのみ有効。

************************************************************

今日も読んでくれてありがと～(^^)/

---------------------------------------------＊＊＊---

▼ランキングに参加してます。
良ければポチっと('ω')

-----＊＊＊-------------------------------------------

カスタマイズ開始！-画面・CSS編-

◇2024年1月中旬

さて、本格的に開発チームの一員としてスタートを切りました。

大まかな流れをお伝えすると、

プロジェクトは詳細設計まで完了していて、開発フェーズから参画することとなります。

開発フェーズの内容は、

CSS・JSの画面側のカスタマイズ・実装

Javaで書かれたAPI側のカスタマイズ・実装です。

実装が終わるとテストが待っています。

実装段階では、案件で使用されている独自ツールを使用してある程度自動生成された不完全なソースコードを、

意図した画面レイアウトに修正、

処理関連は、仕様書通りの動きになっているか確認、

なっていなければ仕様書に沿ってカスタマイズするというものです。

第一段階としてはCSSのカスタマイズからです。

仕様書をツールに読み込ませて自動生成されるのはHTMLのみ。

CSSは全画面で使用される共通ファイル以外は空っぽの状態で出来上がります。

共通部品（ボタンの見た目やリスト表示の形式）の修正は不要なのですが、

横に2つ並べたいボタンが縦並びになっていたり、不要なタイトルが表示されていたりするのでそれを修正します。

ただ、HTMLファイルを修正することはできません。

CSSにカスタマイズ専用のファイルがあるのですが、

修正出来るのはそのファイルのみ。

つまり、自動生成されたHTMLファイルに既に記述があるクラス名やidを使用してカスタマイズするということです。

クラス名等は、仕様書に書いてあるものが記述されているのですが、

同じクラス名がそこかしこに振られているし、ピンポイントでスタイル当てたいのにid無い、なんてパターンがたくさんありました。

最初は

どうやってここにスタイルあてるの・・・( ﾟДﾟ)

な状態でした。

HTMLいじれたら簡単に修正出来るのに

CSSだけでやろうとすると結構難しいパターンがあるんですね。

開発ツール開いて、ひたすら要素を探してスタイル当てての繰り返しです。

（ボタン）文言（ボタン）　としたいのに

文言（ボタン）（ボタン）　となっていたのには困りました。

HTMLをいじらずに要素の順番を変えるなんて出来るんか・・・(´・ω・)？

結論から言うと、出来ました。

これが最適解かはわからないけど、

JS側で文言部分の要素生成してボタンの前に追加して、元々の文言は非表示にしました。

JS側でHTML要素の生成出来るなんて知らなかった・・・( ﾟДﾟ)

おかげ様で、CSSにはちょっと強くなれました。

CSSの経験値　+20って感じです。

その他にも、nth-childを使って、同じクラス名内のn番目の要素にのみスタイルを反映させたりと、

お勉強になりました。

机上で勉強しているときにはこんなの出てこないと思うから、

やっぱり実務で経験を積むって大事ですね。

次回はJavaScriptカスタマイズに進みます！

**Tips*****************************************************

:nth-child()

()の中にスタイル当てたい部分の数字を入れて使う。

（例：3番目のdiv要素の背景を赤くする。）

div:nth-child(3) {
  background-color: red;
}

div:nth-child(even/odd)だと偶数列、奇数列 

div:nth-child(2n+1)などの使い方も可能 

************************************************************

今日も読んでくれてありがと～(^^)/

---------------------------------------------＊＊＊---

▼ランキングに参加してます。
良ければポチっと('ω')

-----＊＊＊-------------------------------------------

開発案件スライド完了！初日はうまくいったのか！？

◇2024年1月中旬

ついに！開発案件へスライドしてきました！！

まずは、

おめでとう自分！！です！！

同時に、

頑張れよ自分！！でもあります！！！

初日は、出社してまず開発環境等のセットアップから始めました。

PCも開発案件に移るときに交換しました。

いままでPMOで使用していたPCはメモリが8GBしかなかったので、

開発案件には不向きなんですね。

とはいえ、開発案件の人たちに割り振られるPCも16GBのもので

スペック的にはギリギリなのではありますが・・・。

環境構築や諸々必要なもののセットアップは

同じタイミングでチームに参画してきた、私を含め4名で行いました。

ある程度の部分は自力で進められるものの、

細かな設定や手順書から変更になっている部分はみんなで、と進めます。

ただ、エラーというものはどうしてもつきもので。

今までいろんな人の環境構築・セットアップをサポートしてきたであろう方がこの日も見てくださっていたのですが、

「今までに出たことないエラーが出てる」

と言っていたので何かが変わったタイミングだったのかもしれません。

そんなこんなで、エラーに当たりつつ進めていたのですが、

エラー対処や原因調査の会話の中で一抹の不安が・・・

というのも、

他の人がものすごくレベルが高く見えたんです。

eclipse(コードを書くために使用するツール)の扱いのも慣れているし、

ここがこうだから、こうすればきっとエラー解消されるんじゃない？

みたいな会話がぽんぽん出てくるわけです。

こちらは、なんでそのエラーが出ているかわからないし、

解消法もちんぷんかんぷんなのに、です。

これ、もしかして私だけものすごく落ちこぼれなんじゃないか・・・

こう思っちゃうのも当然ですよね

実際、何もできずにいたわけですから。

環境構築が終わった後も、

業務の手順を説明してくださったのですが、

途中からよくわからなくなりました。

みんなそれぞれ作業をしてたみたいですけど、

私はもう何をすべきなのか把握しているかも怪しいレベルでした。

後でわかったことですが、

実はみんなやることが無くてただガイド読んだりしてただけだったらしい・・・

なんだそれ。

黙ってPC触ってると、何もしてなくても仕事してるように見える典型のパターンですね。

ただ、そんなことは知らないので

「みんな何やってんだ！？そんなにやる作業あったっけ！？私だけ指示聞き漏らしてた！？」と一人焦っておりました。笑

そんなこんなで1日目が終了・・・

不安過ぎて、リーダーをはじめいろんな人に

「開発案件初めてなんであまりわかってないです・・・💦申し訳ないです」

と、アピールしてから帰宅しました。

こう言っておくと、あの人初心者だからな、とインプットされて

気にかけてもらいやすくなるのでおすすめです。笑

いつまでも同じこと言ってると、成長してないんだなと思われかねませんけど( ﾟДﾟ)

次回から、本格的に開発作業スタートです！

今日も読んでくれてありがと～(^^)/

---------------------------------------------＊＊＊---

▼ランキングに参加してます。
良ければポチっと('ω')

-----＊＊＊-------------------------------------------

ついに決定！スタート地点はもう目の前！

◇2023年12月

相変わらずPMOとしてWBSの管理やら業務のマクロ化などに

尽力していた頃・・・

なんと、私にとってとてもショッキングな出来事が起こります。

それは

救世主M氏の

案　件　離　脱

きゃぁぁぁ～～～( ﾟДﾟ)！！



頼りにしていたＭ氏が、

諸事情により1月末で案件を離れることとなりました・・・

これは一大事ですよ！！

なんたって、わからないことはM氏に聞けば最終的には何とかなる！の

マインドで業務をしてきた私ですから。

しかも、1月から開発チームにスライド出来る予定でしたから

開発チーム異動後、わからないことが盛沢山のままM氏がいなくなるのは非常につらい！！

いったいどうしたらいいんだ～～～！！

と思いつつ、

引き留めることはできませんし他にもメンバーはいるし、

何とかなるか～に落ち着きました。

私にはたまたまM氏というスーパー救世主がいたものの、

他の人にはいないのがデフォルトでしたしね。

他の人はこの環境でやってんだから

お前も頑張れよ、と自分で思ったわけです。

その後、予定より少し遅れはしたものの

1月中旬には開発チームに移ることが決定しました！！✨

ついに！！

ついに私が開発案件に就くことが出来る！！！

入社して3年目

開発とは程遠いヘルプデスクから始まり、

ついに開発案件に就ける・・・！！！

もちろん、今までにアサインされた案件も

学ばせてもらうことはたくさんあったし

確実に自分にとって経験出来て良かった案件なのは間違いありません。

むしろ、IT未経験だった私には、

経験すべき案件だったし、レベル的には順当に進めていたと思う。

ただ、「開発案件に就く」ことを目標としていた私にとって、

この1歩は自分の中でとっても大きな一歩でした！

自分で勉強していた部分もあるけれど、

実務となればわからないことは山ほどあるのは承知の上。

それでも、

新たなステージに進めたことが、すごく嬉しかったです(´▽｀)

不安はもちろんありましたが、

スライド先の統括リーダーも、私のレベルを把握した上で受け入れてくれたし、

初めはM氏いるしでちょっと安心。

（配属先はM氏がリーダーを務めるチームだった。）

xxx経験●年以上、とかの条件を求められる案件が多い中、

こんな低スキル人間を受け入れてくださったの心の底からありがたい(ノД`)

とにもかくにも、

1月からエンジニア。

頑張るぞーー('ω')！！

今日も読んでくれてありがと～(^^)/

---------------------------------------------＊＊＊---

▼ランキングに参加してます。
良ければポチっと('ω')

-----＊＊＊-------------------------------------------

マクロ作成強化期間！VBAを身につける回！

◇2023年11月

PMOとして案件に配属となったものの、

やってることとしてはWBS周りの仕事と

マクロ作成がメインの日々。

割合としては、5日のうち3日がWBS周りのタスクで

2日がマクロって感じです。

結果として、PMOにいた3か月の間でいくつもの機能をマクロ化できました！✨

念のため記載しておくと、

マクロとは、様々な作業を自動化できる機能 のことで

VBAは、そのマクロを作成するためのプログラミング言語のことです。

私が作成したマクロの内容は、

データを転記するような簡単なものから

複雑な条件判定を要するものまで幅広く。

結果としてPMOで働いたこの3か月の間に、

VBAの知識がかなり増えたので、

この期間は私にとってすごくプラスになりました。

やるからには何かしら得るものが欲しいと思ってしまう人間なので、

これは嬉しい誤算でした(^^)

VBAは、プログラミング言語ではあるものの、

Excelと処理の流れが似ているので

その他の言語よりも扱いやすかったです。

それに、わかってはいたものの、机上で勉強するよりも

実務でやってみると吸収するスピードって段違いですね。

もちろん、自学は必要ですよ？

でも、練習問題にあるような内容では

求められているレベルに届かないことが多いと思うので、

実際に現場で業務をすることはとても大事だと思う。

それに、いくつかのタスクをツール化して、

他のチームからもマクロ化の依頼が来たりなんかして、

VBAの自信がついたことも良かったのですが

それよりも、自分が作成したツールで

皆様の業務が効率化出来ている、

喜んでもらえたということが嬉しかったです(´▽｀)

私的に、周りからの評価というのは

自分の存在意義が感じられるので非常に大事にしております。笑

それに、環境も良かったですね。

どうしてもわからない、どうやったら良いかわからない、となった時に

聞ける人がいましたし。

　  スキルレベル ハイパー M氏

JavaもJavaScriptもインフラ周りもVBAも、

なんでもできちゃうスーパーM氏。

頼むから脳みそ交換してください。

そんな師匠を持つ私に、

ショッキングな出来事が起こります・・

それについてはまた次回。

今日も読んでくれてありがと～(^^)/

---------------------------------------------＊＊＊---

▼ランキングに参加してます。
良ければポチっと('ω')

-----＊＊＊-------------------------------------------