SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

連載記事

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

CodeZine BOOKS(コードジン・ブックス)は、CodeZineの連載からカットアップした、開発現場の課題解決に役立つ書籍シリーズです。

書籍に関する記事を見る

'); googletag.cmd.push(function() { googletag.pubads().addEventListener('slotRenderEnded', function(e) { var ad_id = e.slot.getSlotElementId(); if (ad_id == 'div-gpt-ad-1659428980688-0') { var ad = $('#'+ad_id).find('iframe'); if ($(ad).width() == 728) { var ww = $(window).width(); ww = ww*0.90; var style = document.createElement("style"); document.head.appendChild( style ); var sheet = style.sheet; sheet.insertRule( "#div-gpt-ad-1659428980688-0 iframe {-moz-transform: scale("+ww/728+","+ww/728+");-moz-transform-origin: 0 0;-webkit-transform: scale("+ww/728+","+ww/728+");-webkit-transform-origin: 0 0;-o-transform: scale("+ww/728+","+ww/728+");-o-transform-origin: 0 0;-ms-transform: scale("+ww/728+","+ww/728+");-ms-transform-origin: 0 0;}", 0 ); sheet.insertRule( "#div-gpt-ad-1659428980688-0 div{ height:"+(90*ww/728)+"px;width:"+728+"px;}", 0 ); } else { if ($(window).width() < 340) { var ww = $(window).width(); ww = ww*0.875; var style = document.createElement("style"); document.head.appendChild( style ); var sheet = style.sheet; sheet.insertRule( "#div-gpt-ad-1659428980688-0 iframe {-moz-transform: scale("+ww/320+","+ww/320+");-moz-transform-origin: 0 0;-webkit-transform: scale("+ww/320+","+ww/320+");-webkit-transform-origin: 0 0;-o-transform: scale("+ww/320+","+ww/320+");-o-transform-origin: 0 0;-ms-transform: scale("+ww/320+","+ww/320+");-ms-transform-origin: 0 0;}", 0 ); sheet.insertRule( "#div-gpt-ad-1659428980688-0 div{ height:"+(180*ww/320)+"px;width:"+320+"px;}", 0 ); } } } }); }); } else { document.write('
'); document.write('
'); }
フロントエンジニアのためのTauri 2.0ではじめるRustプログラミング

デスクトップアプリを開発しよう! 「Rust」と「Tauri 2.0」の基本情報と環境整備の仕方を解説

フロントエンジニアのためのTauri 2.0ではじめるRustプログラミング 第1回

  • X ポスト
  • このエントリーをはてなブックマークに追加

 本連載では、デスクトップアプリを開発しながら、「Rust」と「Tauri 2.0」について学んでいきます。連載第1回は、まずデスクトップアプリの開発に必要なRustと、Tauri 2.0の基本情報と、環境整備の仕方について解説します。

  • X ポスト
  • このエントリーをはてなブックマークに追加

はじめに

 本連載では次の図のようなお絵描きのデスクトップアプリを作りますが、よくあるPhotoshop風ではなく、Illustrator風のベジェ曲線のお絵描きアプリです。最初だけ1回クリック、それ以降はクリック&ドラッグ、クリック&ドラッグ・・・を繰り返すことで、1本に繋がった曲線が一筆書きで描けます。

お絵描きアプリ「bezier」
お絵描きアプリ「bezier」

 完成したお絵描きアプリは、こちらで公開しています。Webブラウザ版では作成したデータを保存できませんが、デスクトップアプリ版ではRust側からデータの読み書きをサポートしています。

 このお絵描きアプリは「HTML5+CSS+JavaScript」で構成されたWebページでできています。さらに、Tauri 2.0を使って、Webページをデスクトップアプリとして構築しています。Tauri 2.0は、Webページをインターフェースとして使い、それをRustでコーディングしてデスクトップアプリとして構築します。

連載の流れ

 この連載は、以下のように進んで行きます。

連載の進行
回数 内容
第1回 「Rust」「Tauri 2.0」の基礎知識と環境整備
第2回 Rustの基本文法
第3回 「HTML5+CSS+JavaScript」の知っておくべき文法
第4回 黒色のベジェ曲線を一筆書きで描く方法
第5回 アンドゥとリドゥの実装
第6回 メニュー機能、ファイルの読み込み処理の実装
第7回 メニュー機能で保存メニューの実装

 では、Rustの基本情報から学んでいきましょう。

「Rust」の基本情報

 「Rust」は、WindowsでもmacOSでもLinuxでもクロスプラットフォームに対応した高速でスマートなプログラミング言語です。「Rust(ラスト)」とは、錆という意味でロゴマークもそこからデザインされたのでしょう。

「Rust」のロゴ
「Rust」のロゴ

Rustのメモリの管理の仕方、「所有権」とは?

 Rustはメモリの管理の仕方がスマートな、とても優れたプログラミング言語です。

 「所有権」という独特な概念でメモリを管理して、ビルド時にメモリリークが起こる可能性を排除するので、極めてメモリリークが起こりにくくなっています。例えば、次の図のように「スコープ」内だけ変数にメモリを所有する権利を与えて「スコープ」を抜けるときには、「所有権」を持つ変数のメモリを解放します。

「Rust」の「所有権」の仕組み
「Rust」の「所有権」の仕組み

Rustの追加機能、「クレート」とは?

 他にも、Rustで書かれた「クレート」という追加機能で機能を拡張できるため、車輪の再発明をしなくても済みます。クレートはPythonでいうパッケージや、モジュールに当たる拡張機能のことです。さらにPythonと違ってインタプリタ言語ではなくコンパイル言語なので、処理が高速です。

「Tauri 2.0」の基本情報

 「Tauri 2.0」はちょうどElectronのRust版です。

 Electronとは、WebページをChromium(以前のGoogle ChromeのHTMLレンダリングエンジン)と、JavaScriptで作られたNode.jsでデスクトップアプリを構築する技術です。次の図のように、コードエディタ「Visual Studio Code」もElectronで開発されていますが、今後はElectronよりさらに優れたTauri 2.0がメジャーになっていくと思われます。

「Visual Studio Code」のUI
「Visual Studio Code」のUI

 Tauri 2.0もRustと同様に、Windowsや、macOS、Linuxにもクロスプラットフォームに対応したフレームワークであり、さらにスマートフォンのiOSや、iPadOS、Androidアプリも作れます。本連載ではパソコン向けのデスクトップアプリ開発だけを解説します。

Tauri 2.0の仕組み

 Tauri 2.0は、「HTML5+CSS+JavaScript」のWebページをデスクトップアプリとして作れるRustのクレートで、Tauriバージョン1系とは互換性がありません。

 Tauri 1.0で作ったプロジェクトは、Tauri 2.0でプロジェクトを作り直して移植する必要があります。本連載では移植ではなく、最初からTauri 2.0のプロジェクトから作り始めます。

 簡単にTauri 2.0を説明すると、次の図のような仕組みになっています。

「Tauri 2.0」の仕組み
「Tauri 2.0」の仕組み

Tauri 2.0の役割とは?

 Tauri 2.0は、次の図のようにソフトウェア設計モデルでいうMVCに似ています。

「Tauri 2.0」のソフトウェア設計モデルは「MVC」に近い
「Tauri 2.0」のソフトウェア設計モデルは「MVC」に近い

 MVCは、ModelやView、Controllerで構成された設計モデルです。ViewがUIなどの見た目を扱い、Modelが中身の処理を行い、Controllerがユーザーからの指示を受けて、ViewとModelを繋ぎます。

 まさにTauri 2.0は、ViewがフロントエンドのWebページである「HTML5+CSS+JavaScript」のUIに当たり、ModelがバックエンドのRustに当たり、Controllerがフロントエンドとバックエンドを繋ぐブリッジ(JavaScriptとRustで渡す橋)に当たります。

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

次のページ
「Rust」の環境整備

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
この記事の著者

大西 武(オオニシ タケシ)

 1975年香川県生まれ。大阪大学経済学部経営学科中退。プログラミング入門書などを30冊以上商業出版する作家。ドコモでグランプリなどコンテストに20回以上入賞するアーティスト。オリジナルの間違い探し「3Dクイズ」がTVで約10回出題。プロフィールサイト:https://profile.vixar.jp

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

CodeZine編集部(コードジンヘンシュウブ)

CodeZineは、株式会社翔泳社が運営するソフトウェア開発者向けのWebメディアです。「デベロッパーの成長と課題解決に貢献するメディア」をコンセプトに、現場で役立つ最新情報を日々お届けします。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/20539 2024/12/11 11:00
" ); }

おすすめ

アクセスランキング

  1. 1
    デスクトップアプリを開発しよう! 「Rust」と「Tauri 2.0」の基本情報と環境整備の仕方を解説
  2. 2
    「CUDA」 ~マンガでプログラミング用語解説
  3. 3
    2024年の提示年収が高いプログラミング言語は? paiza調査によるランキングが発表 NEW
  4. 4
    健全なソフトウェア設計の第一歩! 既存のPHPソースコードからクラス図を自動生成しよう
  5. 5
    開発チームに必要なのは生産性だけじゃない! 健全性も計測し、良い開発者体験を生むために
  1. 6
    約9割の企業がIT人材不足を実感、「プロリア プログラミング」による調査によって明らかに NEW
  2. 7
    VSCodeをUML図やフローチャート作成に使ってみよう
  3. 8
    売上か? 面白い技術か? エンジニア組織が直面するジレンマに、エンジニア経営者 漆原氏が切り込む
  4. 9
    計測と改善をひたすら繰り返したら、年間コストを1億円削減した──不確実性の高いプロジェクトに挑む NEW
  5. 10
    「正解のない仕事」に備える効率的な学び方とは? エンジニアリングマネージャーが認知科学と共に紐解く NEW

アクセスランキング

  1. 1
    デスクトップアプリを開発しよう! 「Rust」と「Tauri 2.0」の基本情報と環境整備の仕方を解説
  2. 2
    「CUDA」 ~マンガでプログラミング用語解説
  3. 3
    2024年の提示年収が高いプログラミング言語は? paiza調査によるランキングが発表 NEW
  4. 4
    健全なソフトウェア設計の第一歩! 既存のPHPソースコードからクラス図を自動生成しよう
  5. 5
    開発チームに必要なのは生産性だけじゃない! 健全性も計測し、良い開発者体験を生むために
  6. 6
    約9割の企業がIT人材不足を実感、「プロリア プログラミング」による調査によって明らかに NEW
  7. 7
    VSCodeをUML図やフローチャート作成に使ってみよう
  8. 8
    売上か? 面白い技術か? エンジニア組織が直面するジレンマに、エンジニア経営者 漆原氏が切り込む
  9. 9
    計測と改善をひたすら繰り返したら、年間コストを1億円削減した──不確実性の高いプロジェクトに挑む NEW
  10. 10
    「正解のない仕事」に備える効率的な学び方とは? エンジニアリングマネージャーが認知科学と共に紐解く NEW
  1. 1
    ITエンジニア本大賞2025、投票締切直前! みんなで選んだ歴代の大賞本を振り返って一挙紹介
  2. 2
    VSCodeをドキュメント作成に活用――テキストエディタ、Markdownエディタの設定と拡張機能を解説
  3. 3
    Python 3.13の新機能、対話型インタプリタの機能強化や高速化などを解説
  4. 4
    「CUDA」 ~マンガでプログラミング用語解説
  5. 5
    今後生成AIとどう向き合うべきなのか? 現場のエンジニアと研究者が最新研究事例から語り合う
  6. 6
    デスクトップアプリを開発しよう! 「Rust」と「Tauri 2.0」の基本情報と環境整備の仕方を解説
  7. 7
    2024年12月に開催される注目のITエンジニア向けカンファレンス5選
  8. 8
    日本在住の英語を話すソフトウェア開発者、年収の中央値は950万円に
  9. 9
    Vue.js3.4~3.5の新機能をまとめて紹介! 新しいAPIやSSRの改善
  10. 10
    PHPパッケージ管理ツール「Composer」の処理の仕組みを見てみよう!

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

メールバックナンバー

アクセスランキング

  1. 1
    デスクトップアプリを開発しよう! 「Rust」と「Tauri 2.0」の基本情報と環境整備の仕方を解説
  2. 2
    「CUDA」 ~マンガでプログラミング用語解説
  3. 3
    2024年の提示年収が高いプログラミング言語は? paiza調査によるランキングが発表 NEW
  4. 4
    健全なソフトウェア設計の第一歩! 既存のPHPソースコードからクラス図を自動生成しよう
  5. 5
    開発チームに必要なのは生産性だけじゃない! 健全性も計測し、良い開発者体験を生むために
  1. 6
    約9割の企業がIT人材不足を実感、「プロリア プログラミング」による調査によって明らかに NEW
  2. 7
    VSCodeをUML図やフローチャート作成に使ってみよう
  3. 8
    売上か? 面白い技術か? エンジニア組織が直面するジレンマに、エンジニア経営者 漆原氏が切り込む
  4. 9
    計測と改善をひたすら繰り返したら、年間コストを1億円削減した──不確実性の高いプロジェクトに挑む NEW
  5. 10
    「正解のない仕事」に備える効率的な学び方とは? エンジニアリングマネージャーが認知科学と共に紐解く NEW

アクセスランキング

  1. 1
    デスクトップアプリを開発しよう! 「Rust」と「Tauri 2.0」の基本情報と環境整備の仕方を解説
  2. 2
    「CUDA」 ~マンガでプログラミング用語解説
  3. 3
    2024年の提示年収が高いプログラミング言語は? paiza調査によるランキングが発表 NEW
  4. 4
    健全なソフトウェア設計の第一歩! 既存のPHPソースコードからクラス図を自動生成しよう
  5. 5
    開発チームに必要なのは生産性だけじゃない! 健全性も計測し、良い開発者体験を生むために
  6. 6
    約9割の企業がIT人材不足を実感、「プロリア プログラミング」による調査によって明らかに NEW
  7. 7
    VSCodeをUML図やフローチャート作成に使ってみよう
  8. 8
    売上か? 面白い技術か? エンジニア組織が直面するジレンマに、エンジニア経営者 漆原氏が切り込む
  9. 9
    計測と改善をひたすら繰り返したら、年間コストを1億円削減した──不確実性の高いプロジェクトに挑む NEW
  10. 10
    「正解のない仕事」に備える効率的な学び方とは? エンジニアリングマネージャーが認知科学と共に紐解く NEW
  1. 1
    ITエンジニア本大賞2025、投票締切直前! みんなで選んだ歴代の大賞本を振り返って一挙紹介
  2. 2
    VSCodeをドキュメント作成に活用――テキストエディタ、Markdownエディタの設定と拡張機能を解説
  3. 3
    Python 3.13の新機能、対話型インタプリタの機能強化や高速化などを解説
  4. 4
    「CUDA」 ~マンガでプログラミング用語解説
  5. 5
    今後生成AIとどう向き合うべきなのか? 現場のエンジニアと研究者が最新研究事例から語り合う
  6. 6
    デスクトップアプリを開発しよう! 「Rust」と「Tauri 2.0」の基本情報と環境整備の仕方を解説
  7. 7
    2024年12月に開催される注目のITエンジニア向けカンファレンス5選
  8. 8
    日本在住の英語を話すソフトウェア開発者、年収の中央値は950万円に
  9. 9
    Vue.js3.4~3.5の新機能をまとめて紹介! 新しいAPIやSSRの改善
  10. 10
    PHPパッケージ管理ツール「Composer」の処理の仕組みを見てみよう!