社内勉強会レポート:CursorでVue3開発環境構築体験

今回は社内勉強会「CursorでVue3開発環境構築体験」を開催しました。その様子をご紹介します。

本勉強会では、AIエディタ「Cursor」を活用しながら、Vue3の開発環境構築を実際に体験することを目的に実施しました。
エンジニアだけでなく、非エンジニアの方にも多くご参加いただき、非常に活気のある会となりました。

なお、環境構築は技術者ブログをベースに進めています。

勉強会の流れ

  • Vue3の概要
  • 開発環境の構築
  • Vue3プロジェクト作成
  • 起動デモ

① Vue3の概要

まずはVue3の立ち位置について解説しました。

VueはMVCモデルにおける「V(View)」に特化したフレームワークであり、
画面表示やユーザー操作に対する動きの制御を主な役割とします。

  • Vue:見せる・触る・切り替える
  • サーバー側:守る・判断する・覚える

という対比で、フロントエンドとサーバーサイドの役割の境界線を説明しました。
「Vueはあくまで画面担当」という点を強調することで、初学者にも理解しやすい内容となりました。

② 開発環境の構築

続いて、開発に必要なツールの全体像を説明しました。

  • Node.js:JavaScriptを実行するための基盤
  • Vue3 + Vue Router:画面を構築する仕組み
  • Cursor:AI機能を備えた開発エディタ

その後、実際に以下のインストール作業を実施しました。

  • Node.js のインストール
  • Cursor のインストール
  • Cursorの推奨プラグイン導入

参加者同士でサポートし合いながら進める場面も多く、実践的な学びの場となりました。

③ Vue3プロジェクト作成

環境が整った後は、以下のコマンドでVue3プロジェクトを作成します。

npm create vue@latest

この工程では、一部の参加者で npm コマンドが認識されない事象が発生しました。
エラーが発生した時には、メンバー同士でフォローしあい、無事にプロジェクト作成まで進めることができました。

④ 起動デモ

最後に、以下のコマンドで開発サーバを起動し、画面表示を確認しました。

npm run dev

ローカルサーバが立ち上がり、ブラウザにVueの初期画面が無事表示されることを確認できました。

さらに時間に余裕のある方には、UIライブラリであるElement Plusの導入にも挑戦してもらいました。
VueとUIコンポーネントを組み合わせることで、画面開発のイメージを体験できたと思います。

今回の勉強会では、

  • Vue3の役割理解
  • Cursorを使った開発環境構築
  • Vueプロジェクト作成と起動体験

までを一通り実施しました。

今後もCursorをテーマにした開発勉強会を継続して開催していく予定です。
次回の記事もぜひお楽しみに!

社員紹介

閲覧いただきありがとうございます。
今回の社員紹介記事を担当します「みち」です。4度目の登場です。

前回の投稿(コチラ)が2023年の11月ですので、約2年振りの投稿となります。

ダンデライオンズに入社したきっかけ・入社した感想についてお話します。

入社のきっかけ

前職では、システムエンジニアとして約12年間勤務していました。
社内研修を経た後、約11年間にわたり同じ客先に常駐し、業務に携わっていました。

当時の会社は、社員旅行やBBQなどの親睦イベントが多く、社員同士の距離が近い会社でした。そうした中で、イベントの幹事を任されることも多く、人をまとめたり、場をつくったりする経験を自然と積んできました。

ダンデライオンズ代表の髙橋とは、日々の業務というよりも、こうした親睦イベントの運営を通じて関わることが多く、日頃から気にかけていただき、さまざまな場面でサポートしてもらっていました。
イベント運営は決して楽ではありませんでしたが、責任を持ってやり切ること、人と協力して形にすることの大切さを学べたと感じています。

その後、髙橋が起業するという話を聞き、創業メンバーとして声をかけていただきました。
同じ環境で働き続ける選択肢もありましたが、「新しい環境でチャレンジし、自分自身をもう一段成長させたい」という思いが強くなり、ダンデライオンズへの入社を決意しました。

入社後の感想

ダンデライオンズに入社してから8年が経ち、その間に常駐先は5か所ほど変わっています。
案件や環境が変わることで、これまで触れたことのなかった技術や業務にも数多く携わることができました。

変化が多い分、大変な場面もありますが、同じことを繰り返すのではなく、常に新しい経験を積める点は、この会社の大きな特徴だと思います。結果として、自身のスキルや視野が広がり、「エンジニアとしての引き出し」が確実に増えていると実感しています。

また、ダンデライオンズは人とのつながりを大切にする会社です。
社員同士の親睦を深めるイベントも多く、年齢や役職に関係なくコミュニケーションが取りやすい環境があります。人と関わることが好きな方、チームで働くことを大切にしたい方には、向いている会社だと感じています。

現在は自社の新社屋も完成し、若手メンバーも着実に増えています。
会社として次のフェーズに進んでいる今、経験者も若手も、それぞれが役割を持って活躍できる環境が整いつつあります。

気づけば自分自身も管理者として、そして年配枠としての立場になりましたが、これまでの経験を活かしながら、これから入社される方の成長を支えられる存在でありたいと考えています。
ダンデライオンズで、新しい挑戦をしたい方と一緒に働けることを楽しみにしています。

沖縄・果報バンタにて。環境が変わることで、見える景色も変わると感じました。

今回は以上となります。
次回の社員紹介もお楽しみに!

【ダンデライオンズカフェ】自分が続けたいと思える会社の特徴について

ダンデライオンズカフェとは

ダンデライオンズでは、メンバー同士の相互理解を深め、より良い協力関係を築くことを目的に、コミュニケーションイベントを定期的に開催しています。
イベントやディスカッションは部署・役職の枠を越えて、まるで“カフェで語り合う”ようなカジュアルな雰囲気で行われるため、私たちはこの取り組みを 「ダンデライオンズカフェ」 と呼んでいます。

今回のテーマは 「自分が続けたいと思える会社の特徴」
チームに分かれて約2時間の調査・ディスカッションを行い、その後、各チームがプレゼンテーションを実施しました。

さまざまな視点から生まれた意見

プレゼンテーションでは、メンバー一人ひとりが普段どのように会社を見ているのか、その思いを知ることができました。
意見は大きく分けると、「会社の成長に向けて自分たちがどう関わるか」を考える 能動的な視点 と、「働き続ける上で会社にどのような環境を期待するか」という 受動的な視点 の二つが印象的でした。

能動的な視点の意見

  • 会社が成長していくために、どのような人材や行動が求められるかを意識した意見
  • 手順書の整備などにより、特定の社員に負荷が集中しない仕組みづくり

これらは、日頃から組織全体の動きを意識しているメンバーらしい視点でした。

受動的な視点の意見

  • 物価高に対応した十分な給与
  • 交通費、住宅手当などの福利厚生の充実
  • リモートワークの拡充

「働きやすさ」や「安心できる環境」を求める声が印象的でした。

その他、ユニークなアイデアも!

  • 毎月皆勤賞に豪華景品を贈呈
  • ペットと一緒に出勤できる制度

会社の雰囲気づくりをより楽しくする提案として、思わず笑顔になる意見もありました。

気づきと学びにつながったディスカッション

今回のテーマを通じて、同じ会社にいても、立場や経験によってこんなにも視点が変わるのかという発見がありました。
経営層にとっても若手メンバーにとっても、お互いの考え方を知る貴重な機会になったと感じています。

意見の違いは、ときにギャップとして現れますが、裏を返せば 「会社をもっと良くしたい」という思いが、形を変えて表れている ともいえます。
今回の話し合いは、ダンデライオンズがより成長していくための大きなヒントになりました。

ディスカッション後は恒例の懇親会

これからもダンデライオンズでは、立場に関係なく意見を交わせる場を大切にしながら、
「もっと働きやすく、もっと成長できる会社」づくりを進めていきます。

次回のブログもどうぞお楽しみに。

【社員旅行】九州(福岡・大分)へ行ってきました!

ご覧いただきありがとうございます。

2024/7/26~28に社員旅行へ行ってきました。
今回の行き先は、九州(福岡・大分)です。
旅の様子をお届けします!

中部国際空港 ⇒ 福岡空港へ

ダンデライオンズとしては初の飛行機による移動となりました。
参加者は30名程で、お寝坊さんが出ないか心配でしたが、皆無事に揃い出発できました!

福岡空港に着いたら、観光バスに乗車します。
ガイドさんがとてもユーモアのある方で、旅を大いに盛り上げてくれました。

太宰府天満宮

まずは太宰府天満宮を訪れました。
こちらは124年振りの”令和の大改修”に伴う、特別な「仮殿」で話題になっていますね。

お参り後は、周辺で散策タイムです。
各々、食べ歩きをする方もいれば、ガイドさんおすすめのお土産をコンプリートしている方もいました。

遊食工房 茶花

1日目の昼食は「遊食工房 茶花」さんでいただきました。
古民家の心安らぐ空間で旬の食材をいただきました。

べっぷ地獄めぐり①(血の池地獄・龍巻地獄)

1日目は、血の池地獄と龍巻地獄に行きました。
血の池地獄は日本で一番古い天然の地獄とのことで、その見た目、匂いに強いインパクトがありました。「血ノ池軟膏」なる医薬品も限定販売されていました。

竜巻地獄は一定の間隔で熱水が吹き荒れる、別府市指定天然記念物の間欠泉です。
豪快に熱水が吹き出す様子は迫力満点でした。

別府温泉のホテル白菊

お宿は別府温泉の「ホテル白菊」さんに宿泊しました。
ダンデライオンズ恒例の宴会を行い、楽しいひと時を過ごしました。
代表からは活躍目覚ましい社員を労う「地獄T」プレゼントも!

宴会後、別府の夜へ繰り出しました!

「竹瓦温泉」は、宮崎駿監督のアニメ映画「千と千尋の神隠し」のモデルになったことで知られています。

べっぷ地獄めぐり②(海地獄・白池地獄など)

二日目、ホテルでゆっくりしたいところですが、地獄めぐりへ再出発です。
天気は快晴…。炎天下の中、各地獄をめぐるその様相は、文字通り地獄めぐりでした。

昼食(地熱観光ラボ緑間)

2日目の昼食は「地熱観光ラボ緑間」さんでいただきました。
こちらは足湯に浸かりながら、地熱による蒸料理をいただくことができます。足湯の温度はかなり熱く、足が真っ赤になる方も!デザートの地熱プリンまでしっかり堪能しました。

いいちこ日田蒸留所

お次は「いいちこ日田蒸留所」さんへお邪魔しました。
醸造所を見学後、お土産コーナーへ行きました。
焼酎以外にも様々な商品があり、お土産用にと多くの方が購入していました。

日田豆町

2日目の最後は日田豆町へ。
江戸時代からの町並みが残るこの町は、観光スポットとしても人気とのことです。
中でも4M以上もある巨大な「日田下駄」には目を奪われました。

延泊組

過去のダンデライオンズの社員旅行は一泊二日の旅程でしたが、今年はさらにパワーアップしています。せっかく名古屋から遥々九州まで訪れたので、もう少し楽しみたい!というメンバーは延泊し、3日目もしっかり堪能しました。

楽しい時間はあっという間に過ぎ、名古屋への帰路につきます。

旅行中の写真をアプリ内のアルバムへ各自がアップロード・共有していたのですが、今回は今までの社員旅行の中で最大の枚数(800枚越え)でした!
それだけ参加者の方にとって思い出に残る、とても良い旅行になったのだと思います!!

次回の社員旅行ブログもお楽しみに。

【WordPress】Elementorの使い方(Gridレイアウトの作成)

WEBデザインをテーマにしている第0ユニットです。

技術者ブログとして日ごろ取り組んでいる学習内容をご紹介します。

今回はWordPressの人気プラグイン「Elementor」の使い方をご紹介します。

Elementorプラグインを利用することで、ドラッグ&ドロップ操作で、直感的にウェブページのレイアウトを作成できます。

プログラミングのスキルは不要です。

今回はElementorの基本的な使い方を説明します。

Elementorのインストール&有効化

Elemenetorは全てのWordPressテーマで使用できるというわけではありません。推奨されるテーマを使いましょう。

今回はElementor公式のHelloElementorのテーマを使用しています。

Elementorの起動

固定ページを新規作成し、Elementorを起動します。

Elementorのウィジェットについて

Elementorが提供する機能は「ウィジェット」と呼ばれています。左側にウィジェットのリストが並んでいることが分かります。

有料版であればより多くのウィジェットを利用可能です。2024年9月時点では有料版には4つのプランがあり、$59~$399/1年でアップグレードが可能です。

レイアウトの作成

先ずは、ウィジェットの「レイアウト」を利用しウェブページの構造を決めます。

ElementorではウェブページのレイアウトのタイプはFlexboxとGridの2種類があります。

少し前のバージョンでは、Elementorのレイアウトは「セクション」というもので構成されていましたが、バージョンアップを経て「コンテナ」という考え方が導入されたことにより「セクション」が廃止されています。

今回はGridでレイアウトを作成します。

デフォルトでは横3列、縦2行のGridレイアウトが作成されます。

詳細な設定は、画面左部の「Gridを編集」にて可能です。

Gridに要素を配置

基本のウィジェットから要素を配置することで、簡単にウェブページが作成できます。

マウス操作だけで、簡単にウェブページで多用するコンテンツが配置できます。

今後は細かい設定方法についても見ていきたいと思います。

前回ご紹介した「LOCAL」の環境で簡単に試作できるので是非試してください。

次回の技術者ブログもお楽しみに。

社員紹介(5-3)

閲覧いただきありがとうございます。
今回の社員紹介記事を担当します「みち」です。3度目の登場です。

前回の投稿(コチラ)が2020年の10月ですので、約3年振りの投稿となります。月日が経つのは早いものです。

現在の業務

2020年6月から現在のお客様の下で業務をしています。

システムの保守を中心として担当していましたが、現在は開発案件に参画しています。

とある一日のスケジュールはこんな感じです。

09:00 業務開始
09:15 所属会社内MT
09:30 客先チーム全体MT
12:00 お昼休み
13:00 業務再開
13:05 開発PJMT(オンサイト)
14:00 開発PJMT(オフショア)
18:00 業務終了

現在は週4在宅、週1出社という感じです。最近は開発も佳境を迎えており、打合せが多いですね。打合せの合間に、オフショアからの成果物を受入してテストをしたり、オンサイト側のバッチ機能の開発を行ったりしています。体を動かしたいときには、お昼休みの間にジムに行きます。

引っ越しをしました

今年の7月に引っ越しをしました。家賃、エリア、建物自体の条件・・・などなど、お部屋選びには様々なポイントがあると思いますが、皆さんは何を優先されますか?

私の決め手は上記のポイント以外ですと、”スーパーが近くにあること”でした。昔の自分だったら、そこまで意識しないポイントだったと思います。きっとコロナの影響で自炊の機会が増えたことが要因ですね。

近隣は閑静な住宅街といった感じですが、近くに学校があります。学生たちが部活や体育の授業に勤しんでいる際の活発な掛け声を聞くと、青春だなぁと暖かい気持ちになります。

バルコニーから見える学校

伊勢に行ってきました

久しぶりに伊勢神宮に参拝をしに行ってきました。

天候にも恵まれ、お参りをすることでとても清々しい気持ちになりました。

手水や参拝の作法はいつも忘れてしまうので、他の参拝者の見様見真似をしました。

内宮の神楽殿で厄除けの御守りを購入しました。来年は前厄です。

その後、おかげ横丁で食べ歩きをし、楽しいひと時を過ごしました。

おかげ横丁の対岸から撮影

次回の社員紹介もお楽しみに!

社内勉強会:要件定義について

前回の勉強会の様子 – フェイク画像の作り方

今回の勉強会記事を担当する第0ユニットの「みち」です。

我々システムエンジニアの仕事の一つである「要件定義」をテーマとして勉強会が開催されました。今回はその模様についてご紹介します。

勉強会の流れは、以下の通りです。

①「要件定義」とはどういうものか、という基礎知識を深めるための講義を行いました。

②ユーザ役を据え、ユーザ役から要求を聞き出し「要件定義」を実践しました。

③議事録を作成して内容の振り返りを行いました。

講義の様子

講義のあとはいよいよ実践です!

会社代表髙橋をユーザ役に据え、当社が開発予定のアプリについて要求を聞き出し、その内容を議事録に記載していきます!

ユーザから要求をヒアリング

勉強会に参加したメンバーが若手層とベテラン層にバランスよく分かれていたため、ヤングチーム、アダルトチームで分けて、それぞれで議事録を作成し発表することになりました!アダルトチーム側に属していた私は、恥ずかしいものは出せないなとプレッシャーを感じていました><。

アダルトチーム議事録作成の様子

最後に双方の議事録を発表し、振り返りを行いました!

振り返りの様子

ユーザの要求を正しく把握できているか、必要な機能・性能について認識祖語は無いか、ユーザの合意を得られる内容になっているかを確認しました。

議事録を作成することで文書化するスキルの重要性についても改めて理解でき、とても有意義な勉強会となりました!

それでは、次回の勉強会の記事をお楽しみに!

【WordPress】「Astra」のスターターテンプレート利用によるウェブサイト作成

WEBデザインをテーマにしている第0ユニットです。

技術者ブログとして日ごろ取り組んでいる学習内容をご紹介します。

今回はWordPressの人気テーマ「Astra」のスターターテンプレートをご紹介します。

「Astra」のスターターテンプレートの利用により、手早く綺麗なデザインのウェブサイトを簡単に作成することができます。

Astraのインストール

①Astraのインストールと有効化

②スターターテンプレートのインストール

③ページビルダーの選択

※今回は「Elementor」を選択しています。「Elementor」はWordPressのプラグインの一つで、直感的な操作でウェブページの作成が可能となるエディターです。「Elementor」についても今後ブログの中でご紹介しようと思っています。

以上の①~③で準備は完了です。

ウェブサイトの作成

試しにウェブサイトを一つ作成してみます。

「Business」、「E-Commerce」、「Blog」等、カテゴリごとにテンプレートの一覧が表示されており、その中から選択します。

テンプレート右上に黄色く「PREMIUM」となっているものは有料のテンプレートです。

今回は「E-Commerce」にカテゴリーされているテンプレートを使ってウェブサイトを作成します。

①ロゴの設定

②色、フォントの設定

上記2つの設定後、以下画面が表示されるので、「Submit & Build My Website」で完了です。

作成されたECサイト

テーマのインストールからサイトの作成まで所要時間10分ほどで作成できました。

もちろんここからカスタマイズも可能です。

前回ご紹介した「LOCAL」の環境で簡単に試作できるので是非試してください。

次回の技術者ブログもお楽しみに。

ユニット活動報告会!

今年もユニット活動報告会が開催されました。

昨年と同様に各ユニット毎に発表テーマが設けられています。

発表内容からいくつか抜粋させていただきます。

第0ユニット(テーマ:Webデザイン)

発表内容


・レスポンシブデザインについてのポイントを紹介
・SDGsサイトの製作
・ショッピングサイトの製作
 等々

第1ユニット(テーマ:AI)

発表内容


・HelloWorld(※1)アプリ版のCPU対戦製作の活動成果
・UNITYアプリとWebアプリの比較
・AIのトレンドについて
 等々

※1:当社が製作した「カードゲーム」で、楽しくプログラミングを学ぶことができます。

詳細はこちら

第2ユニット(テーマ:ローコード、ノーコード)

発表内容


・OutSystems(ローコードツール)の説明
・APEXからOutSystemsの移管について
・OutSystemsで製作した勤怠管理システムの紹介
 等々

第3ユニット(テーマ:クラウド・オンプレミス)

発表内容


・ランサムウェアについて
・社内インフラ管理(サーバ、ネットワーク)の実績について
・UTM(FortiGate)によるVPN接続について
 等々

皆さま1年間の活動報告お疲れ様でした!

一息つきたいところですが、次の1年は既に始まっています。

来年も更なる成長を目指して頑張っていきましょう。

それではまた1年後に!

11月社内コンテスト告知!

毎年11月、当社では各ユニット毎に年間の活動内容の報告を実施します。

各ユニット毎に評価項目を設定し報告を行います。

報告に対して、各ユニットメンバー&代表により採点がされます。

報告会の内容は、後日お届けさせていただきます。

昨年の報告会の様子