Help us understand the problem. What is going on with this article?


More than 3 years have passed since last update.







  • Eclipse + e(fx)clipse - IDEプラグイン
  • JavaFX Scene Builder 8.2.0


JavaFX Library Projectを作成します。srcフォルダにapplicationパッケージを作成し、その直下にMain.javaとapp.fxmlを作成します。

package application;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;

public class Main extends Application {
    public void start(Stage primaryStage) {
        BorderPane root;
        try {
            root = (BorderPane)FXMLLoader.load(getClass().getResource("app.fxml"));
            Scene scene = new Scene(root,250,320);
        } catch(Exception e) {

    public static void main(String[] args) {


  • JavaFX Scene Builderでラベル、テキストフィールド、ボタンを配置。
  • テキストエディタで以下を記述します。
    • 「<?language javascript?>」を追加。
    • onActionを記述(JavaFX Scene Builder上でもできます。)
    • <fx:script>~</fx:script>を記述


<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.Pane?>
<?language javascript?>

<BorderPane xmlns="" xmlns:fx="">
    function insert(symbol) {
        var text = textFieldFormula.text;
        text += symbol;
        textFieldFormula.text = text;

    function calc() {
        var formulaText = textFieldFormula.text;

        // 空チェック
        if (formulaText === "") {
            textFieldValue.text = "未入力です。";
            return ;

        // 想定外の文字が入力されているかチェック
        if (^[%()*+-/0-9]+$/)) {
            textFieldValue.text = "余計な文字があります。";
            return ;

        var value = "";
        try {
            value = eval(formulaText);
        } catch(e) {
            value = "結果がありませんでした。";
        textFieldValue.text = value;


    function clear() {
            textFieldFormula.text = "";
            textFieldValue.text = "";
      <Pane prefHeight="334.0" prefWidth="255.0" BorderPane.alignment="CENTER">
            <TextField fx:id="textFieldFormula" layoutX="29.0" layoutY="12.0" prefHeight="25.0" prefWidth="202.0" promptText="式を入力してください。" />
            <TextField fx:id="textFieldValue" editable="false" layoutX="29.0" layoutY="52.0" prefHeight="25.0" prefWidth="202.0" promptText="=ボタンを押すと計算結果が出ます。" />
            <Label layoutX="14.0" layoutY="16.0" text="式" />
            <Label layoutX="14.0" layoutY="56.0" text="値" />
            <Button layoutX="14.0" layoutY="174.0" mnemonicParsing="false" onAction="insert('1');" prefHeight="30.0" prefWidth="30.0" text="1" />
            <Button layoutX="52.0" layoutY="174.0" mnemonicParsing="false" onAction="insert('2');" prefHeight="30.0" prefWidth="30.0" text="2" />
            <Button layoutX="88.0" layoutY="174.0" mnemonicParsing="false" onAction="insert('3');" prefHeight="30.0" prefWidth="30.0" text="3" />
            <Button layoutX="14.0" layoutY="132.0" mnemonicParsing="false" onAction="insert('4');" prefHeight="30.0" prefWidth="30.0" text="4" />
            <Button layoutX="52.0" layoutY="132.0" mnemonicParsing="false" onAction="insert('5');" prefHeight="30.0" prefWidth="30.0" text="5" />
            <Button layoutX="88.0" layoutY="132.0" mnemonicParsing="false" onAction="insert('6');" prefHeight="30.0" prefWidth="30.0" text="6" />
            <Button layoutX="14.0" layoutY="90.0" mnemonicParsing="false" onAction="insert('7');" prefHeight="30.0" prefWidth="30.0" text="7" />
            <Button layoutX="52.0" layoutY="90.0" mnemonicParsing="false" onAction="insert('8');" prefHeight="30.0" prefWidth="30.0" text="8" />
            <Button layoutX="88.0" layoutY="90.0" mnemonicParsing="false" onAction="insert('9');" prefHeight="30.0" prefWidth="30.0" text="9" />
            <Button layoutX="14.0" layoutY="214.0" mnemonicParsing="false" onAction="insert('0');" prefHeight="30.0" prefWidth="30.0" text="0" />
            <Button layoutX="128.0" layoutY="90.0" mnemonicParsing="false" onAction="insert('+');" prefHeight="30.0" prefWidth="30.0" text="+" />
            <Button layoutX="128.0" layoutY="132.0" mnemonicParsing="false" onAction="insert('-');" prefHeight="30.0" prefWidth="30.0" text="-" />
            <Button layoutX="163.0" layoutY="90.0" mnemonicParsing="false" onAction="insert('*');" prefHeight="30.0" prefWidth="30.0" text="*" />
            <Button layoutX="163.0" layoutY="132.0" mnemonicParsing="false" onAction="insert('/');" prefHeight="30.0" prefWidth="30.0" text="/" />
            <Button layoutX="163.0" layoutY="174.0" mnemonicParsing="false" onAction="insert('\%');" prefHeight="30.0" prefWidth="30.0" text="\%" />
            <Button layoutX="200.0" layoutY="90.0" mnemonicParsing="false" onAction="insert('(');" prefHeight="30.0" prefWidth="30.0" text="(" />
            <Button layoutX="200.0" layoutY="132.0" mnemonicParsing="false" onAction="insert(')');" prefHeight="30.0" prefWidth="30.0" text=")" />
            <Button layoutX="128.0" layoutY="214.0" mnemonicParsing="false" onAction="calc();" prefHeight="30.0" prefWidth="30.0" text="=" />
            <Button layoutX="163.0" layoutY="214.0" mnemonicParsing="false" onAction="clear();" prefHeight="30.0" prefWidth="30.0" text="C" />





  • calc()メソッドに入力チェックを追加。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away