Vue

こんにちは！フロントエンドエンジニアの土屋 (@tutti2612) です。 いよいよ Nuxt 2 の EOL が迫ってきましたね。 nuxt.com 先日、弊社でもとあるプロダクトの Nuxt 3 への移行を完了させました。 メドピアでは既に複数のプロダクトで Nuxt 3 への移行を行ってきましたが、今回の移行では今までとは違ったアプローチを取りましたので、その詳細をお伝えしたいと思います。 これから Nuxt 3 への移行を考えている方にとって、少しでもお役に立てれば幸いです。 今回の移行の特徴 Nuxt Bridge の使用 積極的な新機能開発を行いながらのビッグバンリリース 成功の…

本記事のPoint Vueでは、 @イベント名="メソッド名" 等様々なイベントがあります。 ただし、イベントによっては実際の現場で使われないものもあります。 たとえば、 <template> <div id="app"> <input type="text" v-bind:value="Name" v-on:input="changeName"> {{Name}} </div> </template> のように、 v-model = v-bind + v-on など、v-modelで書けるのであればそちらが使われます。 それを踏まえると、 この記事やること 現場でよく使われるイベントに厳選し…

さてNodeRedのDashboard2.0の情報です。 NodeRedのdashboardは2.0が存在します。 UIを作り直しています。 盛んにUpdateが入りますので、安定まで 様子見の人もいるかと思います。 1.0との共存もできますので、私は様子を見て併用しています。 確かにちょっとUI操作に怪しい挙動があり、 再起動すると直るとかあります。 やはりかなり便利になっています。 1.0でできないことができるので、うれしいことが多いです。 画面のルーティングができるので /hoge /hoge2など画面をurlに割付ることができますし直接呼べます。 Vue3.0を採用しているのでVuet…

EclipseでVue.jsを使うためのセットアップ EclipseでVue.jsを便利に使うためのプラグイン EclipseでVue.jsを使うためのセットアップ EclipseでVue.jsを使うためのセットアップは、基本的にはVue.jsプロジェクトを作成し、Eclipseでそのプロジェクトを開くという手順になります。 以下は一般的な手順です。1. Vue.jsプロジェクトを作成します。 これには、Vue CLI（Command Line Interface）を使用するのが一般的です。 ターミナルまたはコマンドプロンプトを開き、次のコマンドを実行します。 npm install -g @…

コントローラーで return redirect()->back()->with('success','保存しました'); と書き、リダイレクトするページのコントローラーで $success_message = session()->get('success'); // 受け取る return Inertia::render('Company/BasicInfo/BasicInfoForm', [ 'success_message' => $success_message, // vueに渡す ]); そのvueの<setup script>内で以下のどっちかで受取り、 const props…

【Checkbox】resources/js/ComponentsにCheckbox.vueのコンポーネント作成し、 import Checkbox from '@/Components/Checkbox.vue'; した上で使える。Q：form編集時、DBの値を元にチェックボックスに最初からチェックが入っている状態にしたい時A： :checked を使うQ：チェックボックスに✓を入れて送信すると「true」が送られるがそれを「１」に変えたい時A：true-value="1" false-value="0"を使う。(1,0は数値型で渡される)※ちなみに文字列型の1,0を渡したい場合は :tru…

概要 TikTok といえば、短編動画を扱っているソーシャルネットーワーキングサービス（SNS）ということを皆さんはすでにご存じかと思います。 TikTok は今や全世界で流行しておりおもしろ動画からためになる動画まで様々な動画が世界中から投稿され、インターネットを通じていつでもどこでも見ることができます。 動画視聴があたりまえになった昨今に非常にマッチしたアプリケーションですね。 そんな TikTok は基本モバイルアプリ（Android・iPhone）でしか利用できないのですが、今回はそれを Web アプリとして再現している OSS を見つけましたのでご紹介したいと思います。 TikTok…

はじめに こんにちは、エンジニアの加藤です。 担当するサービスの変更で、使うクラウド環境がAWSからAzureへ切り替わりました。 アプリケーションの開発・運用保守が主なので、インフラの知識が直ぐに必要というわけではないですが、知らないと困る部分もありますので、少しずつ勉強していく予定です。 この記事では、AWSで開発していたエンジニアがAzureを学習してみた内容をお伝えします。 ※ 学習した内容の紹介という主旨のため、こうやってみたが主であり、この記事の内容で作業するのがベストな手順や設定というわけではないこと、あらかじめご留意ください。 やること 実際に使ってみるのが理解への近道というこ…

次世代デジタル基盤開発事業部の植木です。 普段、PHPでWebアプリケーションのシステムの開発を行なっているエンジニアです。 私が所属する次世代デジタル基盤開発事業部では、ブロックチェーンを利用したシステムの開発が得意です。 そのため、私も日頃からブロックチェーンの技術の習得に努めています。 私の日々の取り組みをブログにします。 8/3に開催されたBerachainというブロックチェーンのトランザクションに関するハンズオンに参加してきました。 centrum.substack.com 簡単に説明すると、Viem (注1)というTypeScript製のライブラリを用いて、スマートコントラクトを操…

前回 は、x86-64 ELF（Linux）のアセンブラを簡単なプログラムで理解しました。 本当は、先に今回の記事を書くつもりだったのですが、x86-64 ELF（Linux）のアセンブラが分からないと全然進まなかったので、前回の記事をはさみました。 今回は「入門セキュリティコンテストーーCTFを解きながら学ぶ実戦技術」で扱っている Pwnable の問題について、書籍を見ながら、実際に動かして、理解してみたいと思います。 それでは、やっていきます。

1. イントロダクション 2. SIer業界で重要視されるプログラミング言語とは？ 2-1. プログラミング言語の選び方のポイント 2-2. システム開発に求められるスキルセット 3. SIerが選ぶプログラミング言語ランキング 3-1. 第1位：Java 3-2. 第2位：Python 3-3. 第3位：JavaScript 3-4. 第4位：C# 3-5. 第5位：PHP 4. ITエンジニア就活生がプログラミング言語を選ぶ際のポイント 4-1. 自分の目指すキャリアに合わせた言語選び 4-2. 初心者におすすめのプログラミング言語 5. 考察 6. Q&A 7. まとめ 1. イントロダ…

エムスリーキャリア（M3C）でインターンをしていた高橋と申します。 2024年6月からエンジニアインターンをさせていただき、早いもので3か月経ちます。 Web開発未経験だった私が、インターンを通して学んだこと、M3Cの環境などをお伝えできればと思います。 エムスリーキャリアの働く環境 M3Cの環境の中でも、特に好きな2つの特徴を紹介します。 1. メンター制度と自分に合った研修 メンター制度が導入されているため、入社した日から常にその方がサポートしてくれます。また、研修は自分に合った課題が用意されるため、最速で成長することができました。 2. 自分専用の Times(分報) が存在し、いつでも…

「仕事は楽しいかね？」 フリーランスになり早くも5年以上が経つ。 30代半ばにもなり、システムエンジニアとして幅広く仕事ができるようになってきた。 ただ、もう辞めたい。 フリーランスのシステムエンジニアと聞くと、 「年収が高い」 「人気のIT業界で働ける」 「リモートワークが多い」 と思われ、羨ましがられる仕事の部類だと思う。 しかし、そんな僕が「なぜ、システムエンジニア（SE）をやめとけ」と思うようになったのか。。 この記事では、その理由を書いていこうと思います。 スキルアップや経験を積めることはメリットだけれど、一方では精神的、肉体的に厳しい現実が待っています。 やめとけばよかったシステム…

目次 目次 はじめに OCI試験の事前学習 OCI試験の申込 まとめ おわりに はじめに Oracle Cloud Infrastructure（OCI）試験申し込みから受験までの流れを紹介していきます。 OCI試験を初めて受験する方におすすめの記事です。 OCI試験の事前学習 まずOracle公式の認定資格サイトはこちら。 www.oracle.com OCIの試験は、このOracleMyLearnサイトに試験科目ごとのラーニングパスが用意されていて、ここで学習を進めていくと最後に受験して合格できる、という流れになっています。 Oralce MyLearn mylearn.oracle.co…

さて、もう９月でだいぶん遅くなりましたが、 今年のここまでの一旦の振り返りをしたいと思います。目次： １．ITシステム開発 ２．品質に関するアレコレについて ３．温浴 ４．ファッション ５．引っ越し？ ６．運動 ７．グルメ ８．交通 ９．スーパー １０．音楽 １１．東京について １２．年金など老後について １．ITシステム開発（１）現在の案件現在の案件は５月ぐらいからやっていますが、 うん、「最低ラインはクリアしている」ので、特にクライアント側が問題無ければ、 来年以降まで契約継続になる可能性も高くなってきましたね。これまでフリーランスで１０年以上やってきて、 約１年以上続きそうな案件がこれで…

前回 は、「入門セキュリティコンテストーーCTFを解きながら学ぶ実戦技術」を読んで、CTF の各ジャンルごとに使われている技術やツールについて、調べたり、実際に使ってみたりしました。 今回は、x86-64 ELF（Linux）のアセンブラを理解していきます。また、よく使う GDBコマンドや、バイナリに対してよく使うコマンド、x86-64 のよく使う命令を書きとめておこうと思います。 それでは、やっていきます。

findy.connpass.com こちらのイベントに参加してきたので、会の様子と感想を書いていこうと思います。 会の概要 会の様子 Storybook駆動開発でフロントエンドリアーキテクトに立ち向かう Storybook開発で普段使っている機能 フロントエンドリアーキテクチャで抱えていた課題 開発体制 Storybook駆動開発の効果 Storybook駆動開発を起動に乗せるアプローチ Pages Router × EmotionからApp Router × Vanilla-extractへの移行 App Routerとvanillaの導入に踏み切った背景 vanilla-extractの…

Vue.jsを使って以下のようなボタンクリック方式のシンプルなページャーを作成したのでメモ📝 以下のような感じでボタンクリックの度にサーバー側に/feeds?page=1のようなリクエストを送信して結果を元に処理を行うことができます。 <template> <div class="collection"> <p v-for="feed in feeds">{{ feed.title }}</p> <div class="button-pager"> <span v-if="status === 'complete'" class="button-pager__loader-info">全て読み…

私がRecursionでプログラミング学習を開始したのは2020年の9月。気づけば4年も経ちました。この4年の間に息子が誕生し、引っ越しも就職もして、以前よりは学習量が少し減ってしまいました。でも未だに細々と続けているのは、いつか誰かの役に立つプロダクトを作れたらいいなと思っているから。 全く初心者状態から始めたにも関わらず、いろいろと自分の手で作れるようになってきてました。本当にRecursionは感謝でいっぱい。もっともっといろんな人に広まってほしい思いから、Recursionを大々的に宣伝しよう。 ・Recursionってどんなことが出来るようになるの？と気になってる。・AIの発達でこれ…