みついけんた

エンジニアとして働き始めました。 日々学んだ事を少しでも定着させようと思い、noteで…

みついけんた

エンジニアとして働き始めました。 日々学んだ事を少しでも定着させようと思い、noteで執筆し始めました。

引越しに伴う法人の本店移転手続きについて

先日引越しを行い、それに伴って法人の所在地を変更する事となった。 変更の届出は管轄区域の法務局に必要書類を提出すれば良いのだが、どの書類が必要なのか一見だとわかりづらかった。 法務局のHPには、必要書類の一式がPDF形式で公開されている。 しかし、実際には管轄内か否かで必要書類が変わってくるので分かりづらい。 実際には、最小行政区画(市・町・村などの区切りのこと)内の本店移転なら、定款に記載している住所の変更が無い為必要書類が少なくて済むことが調べる内にわかった。 定款の

みついけんた

    • JSONを活用して保守性を向上

      もしプロジェクトで大量のテキストデータを扱うのであれば、JSONファイルに格納する事で保守性や安全性を向上する事が出来る。 業務では膨大な量のデータを扱うので、個別のファイルで管理していると何処にどのようなデータを保管しているか分かりにくくなる。 あっちこっちにデータが点在していると、管理が煩雑になり将来の技術負債に繋がるので、保管場所を決めてある程度集約しておく方が良いだろう。 もちろん、一箇所でしか使わないデータであれば、1ファイル上で配列やオブジェクトにして管理して

      みついけんた

      • toSorted()について

        ["a", "c", "b", "d"]という配列があると仮定する。 ``` const array = ["a", "c", "b", "d"] const sortedArray = array.toSorted((currentData, compareData) => {return new Date(compareData).getTime() - new Date(currentData).getTime())} ``` ・isSorted((currentDa

        みついけんた

        • 同時並行で複数のブランチで作業する場合は、git stashを有効活用しよう

          業務中に２つのブランチを発行し、それぞれで別のタスクを行う必要があった。 一方のタスクにおいて修正が完了し、プッシュを行おうとしたらもう一方で作業中のタスクにおける未完了の修正データもプッシュしそうになった。 別のブランチに関係無いデータをプッシュするのはまずいので、そこでgit stashの出番である。 git stashは、現在作業中のデータを一時的に退避する事が出来る。 現在のブランチでの作業が終われば、ブランチを切り替えた後にstash済のデータを呼び出す事が出来

          みついけんた

        引越しに伴う法人の本店移転手続きについて

        みついけんた

        マガジン

        • エンジニア就職について
          1本

        記事

          filter関数を使用した表示の切り替え

          先日業務において、データの有無によって掲載するカテゴリそのものと、関連付けされたアイテムを表示・非表示にする必要があった。 表示データはjsonファイルで管理しており、その他の型定義ファイルなども含めて以下のような構成である。 jsonファイル// 一部を抜粋・改変している"contents": { "documents": [ { "category": { "name": "test_1", "label": "テスト1"

          みついけんた

          filter関数を使用した表示の切り替え

          みついけんた

          useStateを用いて、要素の背景色をクリック後に変更する

          // tsxファイル(tailwindCSSを使用)// 不必要なコードを省略済const categoryAll = { name: "全部", label: "all",};const [selectedCategory, setSelectedCategory] = useState("");const handleCategoryClick = (category: SetStateAction<string>) => { setSelectedCategory

          みついけんた

          useStateを用いて、要素の背景色をクリック後に変更する

          みついけんた

          Web3について少し勉強したので、とりあえず書き綴ってみる

          今までWeb3という言葉自体は聞いた事があるものの、いまいち関心が向かず調べずじまいになっていた。 先日ふとしたきっかけで中島聡氏の著書を読み、Web3に興味を持つきっかけを頂けた。 Web3とは何か、自分なりにまとめると分散化だと考えている。 それと比較して現代はWeb2.0時代とも呼ばれている。 日々の生活の中で触れているアプリやサービスは、いずれも一企業もしくは少人数・個人が一元管理を行なっている。 例えば、YouTubeやFacebookが代表的な例だ。 限られた一

          みついけんた

          Web3について少し勉強したので、とりあえず書き綴ってみる

          みついけんた

          ReactのcreateContext、useContextについて

          createContextは、特定のデータや状態を効率的に渡す時に使用する。 useContextは、createContextで設定されたデータを扱いたい時に使用する。 まだアプリケーションの規模が小さければ、各コンポーネント毎にuseState()で状態管理を行えるが、規模拡大に伴いデータ管理が複雑化する。 そういう時は、Reactが用意している各種フックを適切に利用することが大事である。 よくある使用例が、カラーテーマの管理である。 以下の例では、クリックする毎に背

          みついけんた

          ReactのcreateContext、useContextについて

          みついけんた

          Reactの成り立ち

          ReactはJavaScriptのライブラリとして、現Meta社(旧Facebook: 以後Metaと呼称)のソフトウェアエンジニア"Jordan Walke"氏が開発し、2013年に"JS ConfUS"で発表された。 発表時の映像 Metaでは自社サービスが巨大になるにつれ、コードの管理が複雑になり保守業務も困難になっていた。 巨大なサービスでは様々な機能が複雑に絡み合っているので、ある箇所を更新すると思わぬ不具合が発生する可能性が上がる。 また、不具合の原因を特定する

          みついけんた

          Reactの成り立ち

          みついけんた

          ReactのuseEffectについて

          コンポーネントを描画と動作に分けて、描画後に表示内容の変更を行いたい時に使用する。 また、 主に、外部システムとのデータを送受信する時に使用する。 例えば、以下のコードでは入力フォームの内容に応じて、郵便番号 REST APIからデータを取得・反映させている。 import { useState, useEffect } from "react"// メインのコンポーネントconst Post_AutoFill = () => { // inputPostCodeとい

          みついけんた

          ReactのuseEffectについて

          みついけんた

          ReactのuseStateについて

          今後業務で使用する可能性がある為、最近Reactを勉強し始めた。 その中で、特有の機能である"useState()"を学んだので、復習がてらちょくちょく書いていく。 間違っている部分もあると考えられる為、あらかじめご了承願いたい。 Reactは、コンポーネント(部品)ベースを基本としており、UI全体を小さな部品単位で組み立てて行く。 恩恵として、複雑な構造のUIも作成しやすくなる。 また、各コンポーネントで状態管理を行う為にuseState()を使用する事で、予期せぬエラ

          みついけんた

          ReactのuseStateについて

          みついけんた

          サイト構造をきちんと設計する事の大切さ

          現在参画している案件で、サイトに掲載されている全ての記事について、レスポンシブ対応や画像サイズの比率等を確認する業務にあたった。 数百件に及ぶ確認の結果、以下のような傾向が見られた。 画像の上下の余白設定が記事によって違う。 表示領域を横に縮小した際、画像の比率が崩れる。 障害復旧に関する文章をワードプレスの管理画面から入力した際、一定以下の画面サイズでレイアウトが崩れる。 数年前と今では、レイアウトが変化していくのは仕方ない事である。 しかし、最低限の大枠でも決めて

          みついけんた

          サイト構造をきちんと設計する事の大切さ

          みついけんた

          BEMの簡単なまとめ

          BEM(Block Element Modifier)は、フロントエンド開発において複数人でのコード共有をする際、再利用性を考慮してCSSクラスを命名することである。 ・BEMの詳細 - Block: 要素を一まとめにした塊(ブロック)である。 - Element: ブロックの一部である。属するブロックの外側で使ってはならない。 - Modifier: 見た目や振る舞い(状態)を変化させる。 BEMにも様々なルールや記述の様式があり、現在業務で触れているのはscssであ

          みついけんた

          BEMの簡単なまとめ

          みついけんた

          デザインをコードに落とし込む時、またタグの適切な利用を意識すること

          Figma上のレイヤー構造を、そのままHTMLに当て嵌めるかどうか。 ・入れ子が多い場合、適宜エンジニア側で将来的な保守性等を考えて、簡潔な構造に変更する事も考える。 1ページ内で、各要素のデザインに微妙な違い(文字の大きさや要素間の間隔など)があった場合、デザイン担当者に正しい表示内容を早い段階でコメントを書き込み確認をお願いする。 セマンティックを意識して、どのようなタグが適切なのか、またCSS名も会社の規則に従った上で分かり易さを考えて命名する。 セマンティックに沿

          みついけんた

          デザインをコードに落とし込む時、またタグの適切な利用を意識すること

          みついけんた

          aタグの領域を指定範囲まで広げる

           親要素以上に"position: relative"を設定する。 小要素に"position: absolute, top: 0, left: 0, width: 100%, height: 100%"を設定する。 サンプルコードhtml<div class="parent"> <p>テスト</p> <p>テスト</p> <p>テスト</p> <a class="child"></a></div>css.parent { position: relative;

          みついけんた

          aタグの領域を指定範囲まで広げる

          みついけんた

          CSS: position: relative, absoluteについて

          relativeとabsoluteは、親要素にrelative、小要素にabsolute、という風に、コンビで使用する事が多い。 ・position: relative 現在属している要素の位置情報を基準に、相対的な位置を指定する。 ・position: absolute ページの起点を基準として、絶対的な位置を指定する。 親以上の要素に位置指定が有れば、それを基準として位置を指定する。 以下は例である。 html <body> <div class="par

          みついけんた

          CSS: position: relative, absoluteについて

          みついけんた