yuusuke-roughの日記

Java,SpringBoot,趣味等

htmlにある値を静的アセットから読みこむ in SpringBoot + React + Typescript

目的

SpringBootで用意したhtmlにある要素の値を取り出す。

 

前提

tsxを使用しています。

 

内容

 

下記にある「隠しているよ」の値を取り出す。

<input id="test" type="hidden" value="隠しているよ">
  <div id="root"></div>
  <script type="module" th:src="@{/dist/assets/main-Dd_RwVU1.js}"></script>

 

React側では下記のように型を指定して値を取りだしている。

function App() {
  const [count, setCount] = useState(0)
  const text: string = (document.getElementById("test")as HTMLInputElement)?.value ?? "";
  return (
    <>
<div style={{ position: "relative", height: "500px" }}>
        <MainContainer>
          <ChatContainer>
            <MessageList>
              <Message
                model={{
                  message: text,
                  sentTime: "just now",
                  sender: "Joe",
                  position: "normal",
                  direction: "incoming"
                }}
              />
            </MessageList>
            <MessageInput placeholder="Type message here" />
          </ChatContainer>
        </MainContainer>
      </div>;
    </>
 略…

 

 

input要素はHTMLInputElementであるから、valueインスタンスプロパティとして定義されており、入力要素の型のみに適用される。

一方で、Div要素はHTMLDivElementであるから、Nodeのインスタンスプロパティで定義されているtextContentを使用して値の取得もできる。

 

要素が存在しない場合にnullが返ってくるようにdocument.getElementByIdの後に「?」をつけている。

また、値がnullやundefinedの場合にデフォルトの値が返ってくるように「??」としている。

4月に向けて 2024/03/24

7つの習慣という興味深いテーマに触れたので「自分事」にして考えてみたい。

個人開発をしているアプリケーションがあったのですが、一緒に進めていた知人に不幸があって、停滞している状況が長く続いています。

そんな中で、私も私で仕事や人の価値観の波の中であれこれ考えて、「私にできるかな...」と思い始めた。

 

仕事もうまくいっているとは言えません。

業務自体はこなせるのですが、所々でミスが目立つ。

連日、帰宅して自身の過ちを数えては「先輩方に迷惑をかけたな」「どうやったらなじめるかなぁ」と二時間ほど経っては、夜も眠れずに朝を迎える日々です。

 

つまり、他人の気持ちばかり考えたパラダイムで仕事に行っているので疲弊するという仕組みになってます。

その日々が休日にも波及して、仕事以外の人たちを見る目も同様になってしまう。

 

なので、まずはパラダイムを変えることだよなと。

まず、他人がどう思っているのかなんてわからないわけだから、これは私には変えられない感情的な反応の話。プライベートも知人ありきのサービスとはいえ、停まってしまっただけで何も身を投げる勢いで悩む必要はない。

 

一方で、業務の遂行能力は私で変えられる話だし、サービスはおじゃんになれば辛いがいつかは明らかになる話なのだから備えればいいだけで。

となると、今は仕事は仕事で割り切り、サービスはより良いビジネスロジックやアプリケーション作りに励む期間とすれば良いだけだ。

 

共に共通する指針は「プロになる」。

 

では、必要なものは何か?

仕事は特に残業を求められていないし、社内業務もあるので、業務時間内でのベストなパフォーマンスを求められる。

なので、平日は仕事をするために良く休む必要がありそう。

第二領域の話で、具体的には本を読む・数学を解く・瞑想・ランニングかな。

悩むことは第四領域だから「しない事」に分類する。

 

次に、仕事でのパフォーマンスをあげるにはという具体的な点の話だが、円滑な関係が必要も、ミスばかり重ねてはままならない。

信用がないからだ。

なので、戦略的な撤退ともいえるだろうが、無理にすぐできるようにしない事だ。

その中でも、今、互いにWin-Winとなる状況を考え実行するのが、新米の私の役目かなと思う。

SpringBoot + React

はじめに

OJTで参画していた現場の正式参画が決まりました。

体調が芳しくなく、プライベートでは現場技術のRailsとReact等については勉強できずにおりました。 さて、今回は社内活動でも、業務でも、個人開発でも使用するReactに触れる回としたいと思います。

内容

既存プロジェクトの一部でReactを使用する場合、ReactベースのフレームワークでReact部分のビルドが必要となる。

バッグエンドとの統合には、Viteが必要な模様。

事前知識

「Viteが具体的に何をするのか」を理解するのに、今まで曖昧にしていたJavaScriptの環境周りの整理したい。

1.CommonJSとは?UMDとは?ES Modulesとは?
とても良い記事 を見つけたので参照。

また、UMD含めた背景についてはこちらが勉強になった。

2.bare importとは
モジュール名だけの使用でimportするインポート構文。

Viteプロジェクトの作成

Viteのガイド参照。
TypeScript+SWCを使用。
1.該当のプロジェクトのディレクトリに移動
2.npm installおよびnpm run devにて、起動
無事に起動ができました。

SpringBootプロジェクトに統合する(編集予定)

Viteプロジェクトにて、npm run buildをすると下記のようなディレクトリが生成される

root
┗ dist
┣━ .vite
┣━ assets
┗━ vite.svg

あとは静的アセットをSpringBootプロジェクトのstatic配下に置くなりすれば動作はする。

参考:

既存プロジェクトに React を追加する – React

所感 2024/01/28

1月も終わりですね。今月からは現場配属になったので毎日が楽しいです。

さて、とりあえず今月の振り返り。

テーマとしては「コミュニケーション」と「独学」について、書きたいと思います。

 

コミュニケーション

まずはお仕事の話。OJTで入った訳ですが、調査をこなす際にしっかりと情報共有ができず、数日間を無駄にしてしまうという失態を犯しました。

これは、私の調査内容に対して、どのように落とし込むかの解像度が低かった事が原因でした。結果的に先輩・上司・お客様の進捗管理をされている方を巻き込んでしまったと思います。

...このような手戻りあっては信頼されないですし、コミュニケーションの時間を上司たちは多くとらなくてはいけなくなるので,曖昧な調査に対しては、まず重ねて相談するのが大事だと思いました。

 

次に日常会話。気にするのが、断片的な情報で誤解を招かないかなと不安に思う点です。

例えば、災害の話で私の祖父が崖崩れを一人で直していたという話ですが、「祖父は大工で」と言った時の事です。

まず、祖父は郵便局局長で本職の大工ではなく、退職後、建設業の知人社長のところで手伝いをしていた・自力で倉庫等の建設をしており、重機の免許も持っていたという背景があります。(他にも叔父たちの自営業やその知人社長のところで経理を手伝っていたり、法関係も詳しかったり、身近だったけど謎が多い人でした)

それをしょっ引いて、「大工」というと語弊があるなと気にしてました。

というか、気にしすぎですよね。疲れていると、気にしなくても良い事を気にして、気疲れします。

 

どちらにも関わる事としては、正確な情報を伝える"努力"をする事です。

それ以上は気にしないための配慮です。

終わり!

 

独学

「ネットワーク技術入門」入りました。個人開発のネットワーク見直しとCTFを始めたいからです。

上司からはアプリ屋ならDB周りも学習して欲しいと言われましたが、現状、勉強してもフィードバックを得にくい状況なので、私の場合は後々になるかなと思いました。

リレーションや基本的なSQL文はわかるので、インデックスや実行速度を考えた部分がネックになるかなと思います。

 

しかし、実践の伴わない学習の忘れること..マスタリングTCP/IPで読んだ事もあまり覚えてないです。良くないですね。

全般的に知ろうとすると、目的が学習になってしまい、本末転倒という結論になる手痛い例でした。

 

まとめ

直すべきところは気にする。

すべきことはする。

以上!二月も頑張ります。

SSM Session Managerを使用した記録

はじめに

年が明けましたね。

私は(叶える方の)夢を継続して持ったまま、今年を迎える事ができたので良かったです。

さて、今年の目標ですが、

・仕事は一人称で作業ができる人材になる事

・Webアプリケーションをよりセキュアに、より快適に提供する実装にする事

・CTFを始める準備

・個人開発をビジネスにできるような仕組み作りと準備をする事

4点とも常に実践を伴うので、なかなか厳しいものになりそうです。

 

内容

特にないです。(タイトル詐欺)

 

ステップ 2: Session Manager のインスタンスのアクセス権限の確認または追加 - AWS Systems Manager

メリットとしては、ポート22でSSH接続する必要がない点。

 

 

関係のない話

ところで、Xにて、「家庭を持つ前提で考えると生涯勉強しなくてはいけない仕事というのはおかしいのではないか」といった話題をちらと見かけました。

私は独り身なので関係ないですが、従弟や妹が家庭を持っていて話は聞くので、子供と触れ合う余裕は持ってほしいなとは思う派です。(まぁ、それでいうと時間の話なので、勉強とは関係ないですが。)

ただ、良い給料をもらうためには研鑽は必要ですし夫婦のどちらかが背負わなくてはいけない荷であり、少なくとも昭和から続いている文化と考えると、家庭で起きる問題は何でも一世帯で完結できると思う事に疑問を持った方が自然なのかなと思います。

でも、これは話題逸らしか。

うん、難しい。

一年の振り返り 2023/12/31

冬にしては暖かく感じます。

もう一年も終わりです。

 

来年の抱負の前に、今年一年で思っていた事をつらつらと書きたいなと思います。

誰かが読む程度の記事でもないゆえに心配は不要かと思いますが、暗い話もある点はご容赦を。

 

1月

転職が決まり、二年半ほど勤めていたコールセンターを退職しました。生産性表彰や応対コンクールでの地区大会優秀賞獲得といった思い出は、楽しくも、年老いて青春を夢見る様のような、どこか寂しさを感じさせるものでした。

 

2月

中旬に東京へ越しました。SESで生きていくために技術をつけなければと、プログラミングに加えてMOSといった関連資格の取得や就業前の面談も受けて入社後にすぐ仕事ができるよう準備をしました。

 

3月~5月

プログラミングと関係のない進捗管理の業務をする事になります。業務が無い日でも、お客様の手前は業務の資料を読む事しかできず、ほぼほぼ軟禁状態でした。

あまり負担のかからない日々でしたので、ポジティブに捉えなおして、業後は思い切り勉強に割く生活をしていました。

競技プログラミングムエタイのジム通いが始まりました。

 

6月

諸事情で詳細が書けないため、伏せます。

とある理由で、6月一杯で退職しました。

 

7月~9月

先行きが見えない不安を抱えて、東京の猛暑の中、職探しと勉強とムエタイの日々が始まりました。「この期間はずっと続けていた個人開発に本腰を入れられる」なんて空元気な言葉の裏では、「所詮、私は...」と諦めの気持ちも芽生えつつありました。

8月頃に転職先が決まり、もう一度信じてみようと思い立ちました。

 

10月~12月

現在の会社で、設計・製造・テストの豪華な研修を受けさせていただいたうえに、一月から現場に入る事が決まり、「この会社で頑張っていこう」と自身の方向性も定まった期間でした。

 

思いを吐き出すと...

私は、働きつつプライベートでサービスを作りたくて技術を求め上京しました。

そこで「私の価値」と「他人の考え」を知りました。

 

私の価値については、何事も年齢を加味して評価される経験が多数あったことで身に染みました。私は順風満帆な人生を送れなかったコンプレックスを抱えていたので、「若さ」を盾に、「あなたは貢献できなさそうだ」と遠まわしに言われるのはとても苦しかった。反面、「若さは大事」と思う事もありました。ムエタイのような世界では、身体年齢的にプロになれない歳に私はいるので痛いほど理解しました。

 

他人の考えについては、多くの人々や同僚たちとの話の中で気づきました。「楽してお金を稼げる・休みは沢山もらえる・現場に入ればこっちのもの」という甘い話を信じている人たちの多い事には衝撃を受けました。しかし、個人開発のサービスで社会に貢献できるなんて甘い考えを持っている私も技術に対して幻想を抱いているという点では同じなのかもしれません。

けど、例えであれ、「骨を埋める覚悟で」と同じ言葉に応えたうえで、拾ってくださった会社の事を踏み台にしようとしている同い歳の人だけに対しては今も悲しみのような怒りのようななんとも言えない気持ちを感じさせます。まぁ、感じるだけで他言はしないですし、彼と同じ職場である以上は一緒に頑張ろうと思うのが筋だと良心で思ってますが...。

 

何が正しいのかわかりません。

私の持っている想いとやらも、結果を出していない時点で嘘なのかなとすら思います。

本当は、社会に私の居場所なんてもうないとすら思う時もあります。

ただ、答えがわかればいいという思いで生きてます。

来年もそのつもりで頑張ります。

RemembermeのDB登録での事前準備

参考

Spring Security 使い方メモ Remember-Me #Java - Qiita

DataSourceはapplication propertiesで設定済みのため、そのまま使用しました。

テーブルの作成をしないとテーブルが無い旨叱られました。

 

直接テーブル作成で対処。

mysql> CREATE TABLE persistent_logins (
    ->     username VARCHAR(64) NOT NULL,
    ->     series VARCHAR(64) PRIMARY KEY,
    ->     token VARCHAR(64) NOT NULL,
    ->     last_used TIMESTAMP NOT NULL
    -> );