昨日のブログに引き続き、
「栄未来2026」に登壇する演者5名を紹介いたします。

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

【給食委託会社】
エームサービス株式会社
グループＨＳＳ統括 理事／フェロー
青木 宏美 さま

医療・福祉事業所の運営について
栄養面などのサポート業務、人材育成、
社内栄養管理システムの構築・機能追加・
操作教育等を行う。

【栄養教諭】
小平第二中学校 兼 小平学校給食センター
主任栄養教諭
吉村 康佑 さま

卒業後は約1年間、病院栄養士として勤務。
東京都の学校栄養職員を経て、
2017年4月に栄養教諭となり、
武蔵村山市立小中一貫校大南学園第七小学校に勤務。
現在は、東京都小平第二中学校に在籍。
趣味は、釣り・旅行・温泉めぐり等。
仕事では、本物を知る（体験する）時に得た感動を
子供たちに紹介することで、
伝えたい知識が何倍にもなってリアルに伝わるので、
まずは自分が（楽しんで）知ることが大切だと
考えています。

【フリーランス】
菱沼 未央 さま

食品企業勤務を経てフリーランスとして独立。
メイン事業は、レシピ・献立作成、講演活動、
フードスタイリング・撮影、うつわのプロデュース、
栄養コラムの執筆、栄養相談等。
「おいしいごはんは世界を救う」をモットーに、
かんたんでおいしく体にやさしいごはんやおやつを考案。
一児の母親として、子ども向け、
子育て世代向けのレシピ開発にも力を入れ、
SNSやブログを通じて精力的に発信を行う。

【保健所】
台東区
健康部保健サービス課栄養担当 主任
横田 貴恵 さま

卒業後、大学助手として２年間勤務。
社会人３年目に台東区へ入区し、
保健所に勤務して８年目。
離乳食講習会や栄養相談など、
区民の一次予防に関する業務を中心に、
給食施設指導や事業者への
食品表示指導業務なども担当している。

【スポーツ栄養】
株式会社読売巨人軍
育成強化部 強化チーム
田中 愛子 さま

一般企業の営業職として働くも、
スポーツ栄養の道を諦め切れきれず一念発起。
委託給食、調剤薬局、ベンチャー企業等で実務を積みながら、
アマチュアチームの栄養サポートに携わる。
現在は読売巨人軍の栄養士として勤務し７年目。
私生活では７歳と１歳の母として、子育てにも奮闘中。

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

「栄未来2026」では、
現場で働く管理栄養士から
やりがいや失敗談など、リアルな話が聴けます。
当セミナーに参加することで、
働くイメージが膨らみやすくなり
将来の就職先を選ぶきっかけにもなります。

—概要————————–
■開催日時
2026年11月15日（日）13：00～17：30

■ポイント
・参加費無料
・途中入退室OK
・視聴者のカメラOFF可
———————————–

また、9月30日（水）までに
エントリーいただいた方のみ
事前質問を受付しています。
自分の知りたいことが、
現場で働く人から聴けるチャンスです！

昨年ご参加いただいた学生様からも
「管理栄養士として働くことが楽しみになった」
「より現実的な業務の話が多く、働くイメージが湧いた」等、
沢山の嬉しい感想をいただいております。

皆さまのご参加をお待ちしております！
申込みはこちらから♪
https://www.fundely.co.jp/eimirai#contact

——————————————————————————————

ファンデリーでは、一緒にお客様の在宅食をサポートしてくれる
栄養士仲間を募集しています。エントリーはこちら【第二新卒歓迎♪】

オンライン就活セミナー　

「栄養士が未来を切り拓く2026」開催！
★10分野で活躍する現役の管理栄養士が登壇★
仕事のやりがい、リアルな現場での経験をお話しします！

参加エントリー・詳細は☟
https://www.fundely.co.jp/eimirai

下記ブログもご覧くださいませ。   
大阪で働く栄養士の医療機関紹介ブログ
神奈川で働く栄養士の医療機関紹介ブログ
AKABANE TECH BLOG
——————————————————————————————

今回は、金沢文庫病院の管理栄養士　西江　咲様をインタビュー形式でご紹介いたします。

1. 管理栄養士を目指したきっかけ

祖父が脳出血で倒れてしまったことがきっかけです。幸い後遺症はありませんでしたが、その後、塩分に気を付けなければならなくなり、栄養に興味を持つようになりました。

また、小学4年生から中学生の頃までバスケットボールをしていて、貧血気味だったことや、体力をつけるためにどうしたらよいのかを考える中で、「栄養学」に興味を持つようになりました。

1. やりがいを感じる時

当院では担当制なので、患者さんを継続して担当することができます。外来の栄養指導で、患者さんの数値が少しずつ改善していく様子を見ると、「やっていて良かった」と感じます。

以前、炭酸飲料を1日に2Lほど飲んでいる患者さんがいました。その方には、まず「ジュースなどの加糖飲料だけはやめましょう」と、一番大切なことを一つだけお伝えしました。

実際に取り組んでくださった患者さんから、「体が楽になった」と言っていただけたときは、とても嬉しかったです。そこから少しずつ食事改善への意欲も高まり、現在も継続して栄養指導を行っています。

2～3回ほど担当した頃に、「説明がわかりやすい」と言っていただけることも嬉しく、やりがいを感じます。

1. 管理栄養士として今後やりたいこと

いつか、スポーツ栄養士として働きたいと思っています。

将来は、プロ野球やバスケットボールなど、スポーツの現場で選手を支える管理栄養士になることが目標です。

今は、病態についての勉強を続けながら、NST専門療法士などの資格取得にも挑戦したいと考えています。

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

西江様、ありがとうございました。

患者さんに無理なく取り組んでもらえるよう、一番大切なことを一つに絞って伝える姿勢から、患者さんに寄り添った栄養指導をされていることが伝わってきました。

将来はスポーツ栄養士を目指されているとのことで、これまでの経験を生かした今後のご活躍が楽しみです。

——————————————————————————————
ファンデリーでは、一緒にお客様の在宅食をサポートしてくれる
栄養士仲間を募集しています。

＜栄養士・管理栄養士　経験者採用＞
募集要項　詳細は☟
https://www.fundely.co.jp/recruit/career

下記ブログもご覧くださいませ。
大阪で働く栄養士の医療機関紹介ブログ
神奈川で働く栄養士の医療機関紹介ブログ
AKABANE TECH BLOG
——————————————————————————————

先日は大阪市城東区にあるすみれ病院様に訪問しました。
こちらの病院には内科、糖尿病内科、甲状腺内科、小児科、
リハビリテーション科、放射線科、皮膚科、骨粗鬆症外来、
肥満外来があります。

令和3年に新病院を開院され、院内はとても綺麗で
待合ロビーも広々としていました。
栄養士は3名在籍されており、
今回は管理栄養士の古市様にお話を伺いました。

〈 栄養士としてのやりがい 〉
当院は32床1病棟の病院です。毎日ミールラウンドを
行うことで患者様に安心していただきお顔の表情が
良くなっていくと嬉しいです。

〈 病院の魅力 〉
肥満外来や市民講座（年1回）、糖尿病教室（年3回）を開催しています。
また、NSTでは多職種との距離が近いため、
すぐに話を進め患者様に介入できることが魅力だと感じます。

〈 栄養科の魅力 〉
頼れる先輩が2名いらっしゃり、安心して業務に取り組めています。
それぞれが得意分野を活かし、苦手な部分はカバーし合い、
チームワークは抜群です！
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
古市様、貴重なお話ありがとうございます。

院内には市民講座や糖尿病教室の案内チラシが置いてあり、
ミールタイムカタログも毎号設置いただいています🌷
ご来院された方はぜひ、案内チラシやカタログをお持ち帰りください♪

古市様、すみれ病院様の益々のご発展を心よりお祈り申し上げます。

——————————————————————————————
ファンデリーでは、一緒にお客様の在宅食をサポートしてくれる
栄養士仲間を募集しています。

＜栄養士・管理栄養士　経験者採用＞
募集要項　詳細は☟
https://www.fundely.co.jp/recruit/career

下記ブログもご覧くださいませ。
赤羽ではたらく栄養士たちの日記
神奈川で働く栄養士の医療機関紹介ブログ
AKABANE TECH BLOG
——————————————————————————————

はじめに

こんにちは、渡邊です。

社内アプリのUI改修を行う際に、Sortable.jsというライブラリを使用し、一部ページにドラッグ＆ドロップ（以下、D&D）機能を使ったUIを実装しました。

今回は、Sortable.jsを使ってD&D機能を実装する基本的な方法から、D&D操作後に移動した項目や移動先を取得し、サーバー側のデータ更新につなげる方法まで紹介します。

Sortable.jsとは

Sortable.jsは、DOM要素をD&D操作で移動可能にし、D&D操作に応じて設定したコールバックを実行できるJavaScriptライブラリです。

通常、D&D操作をJavaScriptで一から実装する場合、マウスイベントや要素の位置計算など多くの処理を記述する必要がありますが、Sortable.jsを使うことでこれらの複雑な処理をライブラリ側に任せることができ、少ないコードでD&D機能を実装することができます。

また、Vanilla JavaScriptで利用できるため、特定のフレームワークに依存しておらず導入しやすいライブラリです。

基本的な使い方

導入

今回の開発ではSortable.jsを既存のJavaScript管理方式に合わせて組み込みました。

※一般的にはnpmやYarnを利用した導入方法もありますが、今回は社内アプリケーションがRailsのAsset PipelineでJavaScriptを管理していたため。

Asset Pipeline：RailsがJS/CSSなどの静的ファイルをまとめて管理・最適化して配信する仕組み

実装例

Sortable.jsを利用する場合、D&D対象となるDOM要素を指定して、Sortableインスタンスを作成します。

例えば、以下のようなリストがあるとします。

<ul id="sortable-list"> 

　<li>項目A</li>  

　<li>項目B</li>  

　<li>項目C</li>

</ul>

JavaScript側で対象の要素を指定します。

const element = document.querySelector('#sortable-list');


new Sortable(element, {

  animation: 150

});

new Sortable() に対象となるDOM要素を渡すことで、そのリスト内の要素をD&Dで並び替えられるようになります。

今回の場合、Sortable.jsを適用しているのはul要素なので、ul直下のli要素がドラッグ対象になります。

リスト間の移動

Sortable.jsでは、groupオプションを設定することで、複数のリスト間で要素を移動させることもできます。

例えば、以下のような複数リストを用意した場合、

<div>

  <h3>リストA</h3>

  <ul id="list-a" data-id="1">

    <li data-item-id="1">項目A</li>

  </ul>

</div>


<div>

  <h3>リストB</h3>

  <ul id="list-b" data-id="2">

    <li data-item-id="2">項目B</li>

  </ul>

</div>

それぞれのリストにSortable.jsを適用し、itemsという同じgroup名を指定します。

new Sortable(document.querySelector('#list-a'), {

  group: 'items',

  animation: 150

});


new Sortable(document.querySelector('#list-b'), {

  group: 'items',

  animation: 150

});

このように、groupに同じ値を設定することで、異なるリスト間で要素をD&Dできるようになります。

ドラッグ終了後の処理

Sortable.jsでは、ドラッグ操作完了時に実行するコールバックを設定するためのonEndプロパティが用意されています。また、onEndに設定したコールバック関数には、ドラッグ操作に関する情報を持ったeventオブジェクトが引数として渡されます。

このeventオブジェクトには、ドラッグ操作に関する情報がSortable.jsで定義されたプロパティとして含まれており、それらを利用してバックエンドへ移動情報を送信し、レコード更新などの後続処理を行うことができます。

下記の表ではonEndでよく利用されるeventプロパティをまとめています。

プロパティ内容event.item移動したDOM要素event.from移動元のリストevent.to移動先のリストevent.oldIndex移動前の位置event.newIndex移動後の位置

※Sortable.jsではonEndの他にも以下のコールバックが用意されています。

1. onAdd（別リストから要素が追加されたとき）
2. onRemove（別リストへ要素が移動したことで、元のリストから要素が取り除かれたとき）
3. onUpdate（同リスト内で要素が並び替えられたとき）

また、それぞれのコールバックに渡されるeventオブジェクトには、コールバックに応じた情報が含まれています。

onEndでドラッグした項目と移動先を取得する

D&Dによる画面上の移動だけでなく、実際のアプリケーションでは、移動した内容をデータベースに反映するために、どの項目をどのリストへ移動したのかを特定する必要があります。

そこで、リスト間の移動を行う場合、移動した項目や移動先のリストを識別できるよう、DOM要素にdata属性を設定しておくと便利です。

例えば、以下のように項目とリストそれぞれにIDを設定します。

<ul id="list-a" data-id="1">

  <li data-item-id="123">項目A</li>

</ul>


<ul id="list-b" data-id="2">

  <li data-item-id="456">項目B</li>

</ul>

ドラッグ操作が完了すると、onEndに設定したコールバック関数が実行されます。

new Sortable(document.querySelector('#list-a'), {

  group: 'items',

  animation: 150,


  onEnd: function(event) {

    const itemId = event.item.dataset.itemId;

    const targetId = event.to.dataset.id;

    console.log(itemId);

    console.log(targetId);

  }

});

例えば、項目AをリストAからリストBへ移動した場合、

event.item

  ↓

<li data-item-id="123">

  ↓

event.item.dataset.itemId

  ↓

123

となり、移動した項目のIDを取得できます。

同様に、

event.to

  ↓

<ul data-id="2">

  ↓

event.to.dataset.id

  ↓

2

となり、移動先のリストのIDを取得できます。

つまり、この処理によって、

itemId   → 123（移動した項目）

targetId → 2（移動先のリスト）

という移動情報を取得できます。

また、取得した情報をAjax通信などでサーバーへ送信することで、画面上の変更をデータベースへ反映できます。

$.ajax({

  url: '/items/move',

  type: 'POST',

  data: {

    item_id: itemId,

    target_id: targetId

  }

});

ただし、Sortable.js自身がAjax通信やDB更新を行うわけではないため、移動後のデータ保存処理はアプリケーション側で実装する必要があります。

処理の流れ

D&Dを行って、実際にDB更新が起こるまでの処理の流れは以下のようになっています。

Sortable.js

    ↓

D&D操作を検知

    ↓

onEndに設定したコールバック関数を実行

    ↓

eventオブジェクトを受け取る

    ↓

event.item / event.to から移動情報を取得

    ↓

Ajaxでサーバーへ送信

    ↓

サーバー側で処理

    ↓

DB更新

まとめ

• 
  new Sortable()にD&D対象となるDOM要素を渡すことで、リスト内の要素をD&Dで並び替えられるようにできる。
• 
  groupオプションに同じ値を設定することで、複数のリスト間で要素を移動できる。
• 
  onEndなどのコールバックを設定することで、D&D操作の完了時に処理を実行できる。
• コールバックに渡されるeventオブジェクトから、移動した要素や移動先、移動前後の位置などの情報を取得できる。
• 
  eventから取得した情報をAjaxなどでサーバーへ送信することで、D&Dによる画面上の変更をデータベースへ反映できる。

参考：

https://qiita.com/AVELWP/items/536c797a63c081cf7bc0

https://zenn.dev/sdkfz181tiger/articles/e5979cde0238c1

https://sortablejs.github.io/Sortable

さいごに

現在デザイン・システム室では、新しいメンバーを募集しています。少しでも興味を持たれた方は、ぜひご応募ください
皆様からのご応募、心よりお待ちしております。