LoginSignup
26
9

More than 3 years have passed since last update.

食べログAdvent Calendar 2020Day 15tabelog
@tsun3in食べログ

【Rust初心者必見！】RustでWebアプリケーションを作る方法！

Last updated at Posted at 2020-12-14

導入

ごきげんよう。@tsun3です。(誰)
食べログの新規事業開発部でクソデカタイピング音を鳴り響かせる仕事をしています。
This is 食べログAdvent Calendar 15日目の記事です。
ｲｸｿﾞｰ!
ﾃﾞｯﾃﾞｯﾃﾞﾃﾞﾃﾞﾃﾞ!(ｶｰﾝ)ﾃﾞﾃﾞﾃﾞﾃﾞ!

注意

このエントリはいわゆる 「いかがでしたかブログ」 風の体裁をとろうとした結果、筆者が耐えられずに壊れてしまいました。
(狂気にまかせて書き始めたものの、想像を超える辛さのため、時折正気に戻ります。)

「いかがでしたかブログ」 が苦手な方、不快感を覚えた方は直ちに読むのをやめることをおすすめします。

また、【初心者向け！】と書いていますが、筆者本人がバッチバチの初心者です。
何卒よろしくお願いいたします。

本編

最近よく目にするプログラミング言語、 「Rust」

目にはするけど詳しく知らない…どんな言語なの？何ができるの？と思っている方も多いのでは？
というわけで、せっかくなので調べてみました！

(コンバット越前はここで赤の扉を選ぶ)

こんな方に向けて書きました！

  • Rustを触ってみたい方
  • Webをやってみたい！でも普通じゃイヤだ！という方
  • こっちと間違えた方

そもそもRustって何？

そもそもRustとはどういう言語なのでしょう？
困ったときのWikipediaです！
さっそくWikipediaで調べてみました！

Rust (プログラミング言語) - Wikipedia

Rust（ラスト）はMozillaが支援する[2][3]オープンソースのシステムプログラミング言語である。

Rust言語は速度、並行性、安全性を言語仕様として保証するC言語、C++に代わるシステムプログラミング（英語版）に適したプログラミング言語を目指している[4]。

なるほど！C++に変わる言語を目指して開発されているプログラミング言語のようですね！
でも、この説明だけではよくわかりませんね…

さらに調べてみたら、 Rustの公式サイト が見つかりました！
やはり公式サイトの情報が一番信用できますよね！詳しく見ていきましょう！

Rustプログラミング言語

Rust

効率的で信頼できるソフトウェアを

誰もがつくれる言語

何やらすごそうですね…！

(ここで終わるのがいかがでしたかブログ。でもこれAdvent Calendarね。)

補足

さすがにしんどいのでちょっとだけ補足。
(とはいえ、Wikipediaにある内容なので、より詳しく知りたければ、Wikipediaを参照)
(たまーに「Wikipedia(笑)」って人見かけるんですが、こういう言語の概要をサクッと把握するにはとても良いと思うんですよね)

  • C++の問題点を解決するシステムプログラミング言語として、MozillaのGraydon Hoare氏が個人的に開発を始めた
  • その後Mozillaの公式プロジェクトに
  • 言語の特徴
    • マルチパラダイムプログラミング言語
    • コンパイラ言語
    • Haskellに倣った「型クラス」がある
      • 型クラスについてはこちらが詳しい
    • パフォーマンスと信頼性
      • RAII(Resource Acquisition Is Initialization)を採用しており、ボローチェッカー(borrow checker)機能によって、コンパイル時に静的にリソースの利用区間を検証するため、実行時のメモリ管理コストを低く抑えている
      • 所有権(リソースの利用をその変数、ブロックに限定する)という仕様によって、複数箇所からのリソースの変更を防ぎ、安全にメモリ管理される

Rustを使ってみよう！

Rustについて少し詳しくなったところで、実際にRustを使ってみましょう！
プログラミングは実際にコードを動かすことが大事ですよね！

まずはインストール

Rustを使うにはRustupのインストールが必要です！

(厳密に言えばplaygroundがあるので、サクッと試してみたい方はそちらをどうぞ)

以下のページにアクセスするとインストール方法が記載されているので、その通りに実行しましょう！
https://www.rust-lang.org/ja/learn/get-started

補足

get-startedに記載のあるcurlやインストーラーの他に、メジャーなパッケージマネージャーに対応しているので、すでにそれらを利用しているなら、そちらを使ってインストールすると良いでしょう。

参考：Other Rust Installation Methods

HomeBrew(Mac)
$ brew install rustup-init

たぶんLinuxBrewも一緒です

Scoop(Windows)
$ scoop install rustup
Chocolatey(Windows)
$ choco install rustup.install

Hello, world!

インストールできたら、プロジェクトを作成して、実行してみましょう！

$ cargo new hello-rust
$ cd hello-rust
$ cargo run

(cargo newコマンドはHello, world!を標準出力するプロジェクトを作成するコマンドです。ここではhello-rustという名前のプロジェクトが作成されます)
(cargo runでコンパイル&実行されます)

Hello, world!が表示されたと思います！

RustでWebアプリケーション

すみません、ここから真面目に書きます(唐突)

Kaguraを使います。

KaguraはRustで書けるWebフロントエンドフレームワークです。

以降、tutorialのPreparationの手順をなぞっていきます。

wasm-packのインストール

wasm-packはRustでwasmを扱うときに必要なやつです

$ cargo install wasm-pack

パッケージ作成

$ cargo new --lib kagura_tutorial
$ cd kagura_tutorial

npmパッケージ導入

$ npm init
$ npm install -D @wasm-tool/wasm-pack-plugin html-webpack-plugin webpack webpack-cli webpack-dev-server

みんな大好きwebpack.config.jsを作成

わぁい！

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const WasmPackPlugin = require("@wasm-tool/wasm-pack-plugin");

module.exports = {
  resolve: {
    extensions: [".js"],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, "./src/index.html"),
    }),
    new WasmPackPlugin({
      crateDirectory: path.join(__dirname, "./"),
    }),
  ],
};

indexファイルを作成

srcディレクトリ配下にindex.js, index.htmlを作成します。

index.js
import("../pkg");
index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>kagura tutorial</title>
  </head>

  <body>
    <div id="app"></div>
  </body>
</html>

devserver起動コマンドをpackage.jsonに追加

  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "webpack-cli serve --mode development"
  },

Q. チュートリアルの起動コマンドは↓じゃん。何が起きた？
"start": "./node_modules/.bin/webpack-dev-server"

A. これのせいだよ。チュートリアルのまま実行すると「ふぇぇ…config-yargsがみつからないよぅ…」ってwebpackたんが泣くんだ。かわいそうだね。おじさんが助けてあげるね。

cargo.tomlを変更する

コイツらを追記します。

[lib]
crate-type = ["cdylib", "rlib"]

[profile.release]
opt-level = 3

[dependencies]
kagura = "0.8.11"
wasm-bindgen = "0.2"

一旦起動確認

起動した？うん。次に進みます。

実際にRustでコンポーネントを作ってみる

ここからはHello Kaguraを参考に(コピペ)します。

body配下にh1タグでhello kaguraと表示するだけのかんたんなお仕事。

extern crate kagura;
extern crate wasm_bindgen;

use kagura::prelude::*;
use wasm_bindgen::prelude::*;

#[wasm_bindgen(start)]
pub fn main() {
    kagura::run(Component::new(init, update, render), "app");
}

struct State {}

enum Msg {}

enum Sub {}

fn init() -> (State, Cmd<Msg, Sub>) {
    (State {}, Cmd::none())
}

fn update(_: &mut State, _: Msg) -> Cmd<Msg, Sub> {
    Cmd::none()
}

//  <h1>hello kagura</h1>
fn render(_: &State) -> Html<Msg> {
    Html::h1(
        Attributes::new(),
        Events::new(),
        vec![Html::text("hello kagura")],
    )
}

Q. お前コピペしかできないの？
A. はい

といいつつコピペじゃないんだなこれが。

チュートリアルのコードそのままだとComponent::newの引数の型が合ってなくて怒られちゃうので、こんなふうに修正します。

pub fn main() {
-    kagura::run(Component::new(State{}, update, render), "app");
+    kagura::run(Component::new(init, update, render), "app");
}

-fn init() -> State {
+fn init() -> (State, Cmd<Msg, Sub>) {
-    State{}
+    (State {}, Cmd::none())
}

実行

localhost_8080_.png

FOOOOOOOOOOOOOOOOO↑↑↑

おきまりのやつ

いかがでしたか？

本当のまとめ

釣りタイトル乙。これは詐欺ですね。
Rust+wasmを(というかKaguraを)触ってみたかっただけです。

まだ本当に触りしかやっていませんが、思っていたほどは複雑ではなかったですね。(webpackの設定とかが一番面倒くさいんじゃないかな！)
Kagura様様な感じはしますが。
もうちょっと勉強は必要そうです…精進します。

Rustとは？とかRustの導入から書いたので、Rust始めてみたい方に刺さればいいなと思ったりしたりしなかったりしています。

明日は、 @fdash さんの「dumpsysを使ってみる」です。お楽しみに！！

編集後記

いかがでしたかブログ風はもう一生やらない。

26
9
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
26
9