たんぱく質や塩分の制限をしながら、
毎日の食事を充実させるのはなかなか大変ですよね。
今回は、ミールタイム秋号カタログから、
腎臓病をお持ちの方に向けた低たんぱく食のおかずイチオシ商品
「けんちん煮」をご紹介します！

1. 病院の栄養士さんが提案！「はなまるメニュー」とは？

「はなまるメニュー」は、全国の病院で働く管理栄養士がプロの視点で考案した、
美味しさと安心感を兼ね備えたメニュー企画です。

今回の「けんちん煮」を担当されたのは、東戸塚記念病院の清野英司先生！
【清野先生からのコメント】
「神奈川県の郷土料理であるけんちん汁をイメージして作成しました。
具だくさんのけんちん煮をぜひご賞味ください。」

プロの栄養士さんが現場の知見を活かして届けてくれるメニューだからこそ、
制限食でも満足感と安心感が段違いです。

2. 充実の品数！「けんちん煮」のセット内容

お弁当のフタを開けると、
なんと17種類もの多彩な食材がぎっしり詰まっています！
主菜と副菜合わせて6品という、色鮮やかで
目にも楽しい豪華なラインナップです。

• 
  主菜：けんちん煮
  だいこん、生揚げ、ごぼう、こんにゃく、葉ねぎ、鶏肉、にんじんが
  ゴロゴロ入った具だくさんの一品。
  しっかり味が染みていて満足感たっぷりです。
• 副菜1：春雨と人参炒め
• 副菜2：ブロッコリーのピーナッツ和え
• 副菜3：いんげんとコーン炒め
• 副菜4：キャベツと椎茸の磯和え
• 副菜5：さつまいもの甘煮

彩りの良いお野菜や香ばしいピーナッツ和え、
最後にほっとするさつまいもの甘煮まで揃っていて、
最後まで飽きずに美味しく楽しめます。

また、これだけの品数と満足感がありながら、
たんぱく質8.4g・塩分1.4gにしっかり抑えられているのは本当に驚きです！

制限食は「味が物足りない」「品数が少なくて寂しい」と思いがちですが、
今回の「けんちん煮」は素材の味と出汁の工夫で
しっかり満足できる仕上がりになっています。
東戸塚記念病院の清野先生をはじめとする
プロの栄養士さんが考案した「はなまるメニュー」なら、
日々の食事管理も楽しく続けられそうですね。
ぜひ一度試してみてください！

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

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

オンライン就活セミナー
「栄養士が未来を切り拓く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

さいごに

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