dekiruko-sanのブログ

文系人間は果たしてエンジニアになれるのか。

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編-

◇2024年2月

タスク:CSSJavaScript処理カスタマイズ

 

自動生成された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>

 

こんなイメージですね。

 

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

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

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

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

要素の後。要素が 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氏の

 

 

 

 

案 件 離 脱

 

 

 

 

 

 

 

きゃぁぁぁ~~~( ゚Д゚)!!



頼りにしていた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氏

 

JavaJavaScriptもインフラ周りもVBAも、

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

 

 

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

 

 

 

そんな師匠を持つ私に、

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

 

 

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

 

 

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

---------------------------------------------***---

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

-----***-------------------------------------------

PMOって何するの?開発案件への入り口はまだ先だった!?

 

◇2023年10月

 

開発案件を目指して受けた面談

 

OKをいただいたものの、

なぜかPMOとして働くことになりました・・・

 

▼前回の記事はこちら👇

yarebadekiru-ko.hatenablog.com

 

 

どうやら、開発案件よりもPMOが人手不足でやばい、

開発案件は設計段階が長引いて中途半端な時期だし

とりあえず3か月だけPMOに入ってほしい。

 

ということらしい。

 

3か月後には開発へスライドの予定と言ってくれてはいるし、

ここでお断りして参画案件が決まらない可能性もあるので

お受けすることにしました。

 

PMOとは、
Project Management Officeの略で

開発現場にいる各チームを横断する形で管理するチームのことです。

 

WBSというタスク管理兼、予定表のようなものを見つつ、

進捗の確認などをするのがメインでした。

 

チームメンバーは私を含めて3人。

 

私の担当は、主として

上位会社に毎週報告する週次進捗資料の作成とWBSの管理です。

 

WBSの管理と一言で言ってますが、

これがかなりの曲者で、

2000行弱ほどのデータ量がある激重ファイルが3チーム分。

 

管理フローが固まってなさ過ぎて、

不整合が起こりまくるハードモードでした。

 

そんな状態からか、

私に任命された大きなタスクがもう一つ。

 

 

各業務のマクロ化。

 

 

エクセルのマクロは前にいた案件でちょこーーーっと作っただけのレベルなのに、

依頼されたのは複数ファイルをまたぎ、

さらに複雑な条件分岐をいくつも必要とするレベルの難しさ・・・

 

こんなの一人じゃ無理だよーーー(ノД`)!!

 

としばらく悩んでいたのですが、

 

 

なんと

 

 

 

救世主が

 

 

 

いた!!!!!!

 

 

彼の名はM氏としておきますが、

この方がほんとーーーに

救世主かつのような方でして・・・✨

 

立場としては、

B社の社員としてC社で働いているA社正社員の私

がC社での案件で出会った

B社のプロパーさん、となります。

 

ややこしいですね。

 

私はPMO、M氏は開発チームと

働くチームは違いましたが、同会社なので話す機会も度々ありまして

「マクロが全然進まないんです~~。。」と嘆いていたら

助けてくれたんですね。

 

M氏ものすごくスキル高いので、

私がごちゃごちゃやっても一向に出来上がらなかったマクロを

サクッと作ってしまいました。。。✨

 

しごできすぎる・・・かっけぇ・・・✨

 

 

自社のメンバーは、未経験から始めた人も多いので、

教えてもらう、というよりかは一緒に悩みながらやっていく

のほうが近いのですが、

M氏に聞けばなんでも答えが返ってくる状態。

 

最後の砦、絶対的安心感です。

 

開発チームの人も、エラー出たりしたらよくM氏に聞きに来てましたね。

 

しかも、スキル高いだけでなく、

フォローばっちりでめちゃくちゃサポートしてくれるんですよ。

 

なんなんですかほんと。人生何周目の方ですか?

って感じ。

 

もう、師匠と呼ばせていただくし、

勝手ながら、ついていくと心に誓いました。笑

 

そんなこんなで、マクロ作成係となった私のPMO生活が続きます。笑

 

 

 

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

---------------------------------------------***---

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

-----***-------------------------------------------