僕は発展途上技術者

英語力を手軽に測ることができる CASEC をアラフィフになって受けた話

Maker Faire、特に海外での開催のときにいつもお世話になっている高須さんのFacebookでの投稿かなにかで知った1回4000円弱、40分ほどで英語力を判定できるCASECを先日受験してみました。クレジットカードでチケットを買って自宅からすぐ受けられて便利です。

CASECについて詳しくは高須さんが書いたブログを参照してください。

» ギークのかなり偏った英語学習の話

問題に正解したかどうかで、次の問題の難易度が変わるようになっているらしく、だから短時間で終わるようになっています。もしTOEICや英検を受けた場合はこのくらいですよ、というのも示してくれるので自分の英語力が伸びているか落ちているかがわかります。忙しい人にはうってつけだし、TOEICとか受ける人も、何度も受けると受験料もバカにならないのでこれで英語力を計っておいて、目標とする点数に届きそうだなってレベルになったら受けにいくという使い方もできると思います。

僕の結果は 827/1000、TOEICスコア目安910とのことでした。

学術文献や専門的な発表の大意までは把握できるけれど、詳細を理解するところまでは達していないレベル、ということでほぼ自分の現状を表していてなかなか正確に判定できているんじゃないかと思います。問題をやってて思ったのが、会話文でちょっとしゃれた表現がでてくると、あれれ?聞いたことないな、ってなってしまっていたので、もっと Netflix のドラマや映画を英語で観たり、技術書とかでなく小説を英語で読んだりしないといけないのだろうなあ、と思いました。

2000-2004年までカリフォルニアで生活し、現地の会社に勤めていた割には点数が低いとも言えますし、それからブランクが15年以上あって、まあまあ良くキープしているなとも言えるといったあたりが自己評価です。

若干釣り気味のタイトルですが今年49歳になる身で受けてみて痛感したのは、テストを受けるには体力が必要だということです。40分で終わるのでギリギリもった感じですが、後半に向けてみるみる集中力が落ちていると感じました。ヒアリングは、確かに聴き取れてはいるのだけれど、ちょっと長い文章だと前半何言ってうたか忘れてしまいそうになっていました。また小さな文字が読み取りにくく疲れるという思わぬハンデもあります。年齢のせいにすることは好きではないし、何歳になっても新しく何かを学ぶことはできるとは思っていますが、テストを受ける場合はこうしたハンデがあることを知った上で、若いうちに伸ばせるだけ伸ばしておいたほうがいいと思います。

これは何でもそうだと思うのですが、何かに上達していく過程で、最初の初心者の時期というのは大抵つまらないものです。ゴルフを覚えたてのときは、ボールにろくにクラブが当たらず、当たりはじめてもまっすぐ遠くに飛んでいくことはほとんどないし、テニスにしても、まともに当たることはありません。それと同じように英語を勉強し始めのときには、登場するほとんどの英単語は初見で、毎回辞書を調べながら読み進めていくのは面倒で苦痛だったことを記憶しています。そんなとき、高校生のときだったと思うのですが、スティーブン・キングの小説(日本語に訳されているもの)を読むのが好きで、ある日友人に誘われ紀伊國屋書店の洋書のコーナーに行ったときのことだったと思うのですが、その頃まだ日本語に未翻訳のスティーブン・キングの原書を手に取り、英語ができればこれを読めるのだと知ってワクワクしたのを覚えている。結局スティーブン・キングの小説はちょっとレベルが高くてほんの数ページで断念したと思うのですが、代わりに当時映画化されていたミヒャエル・エンデの「The NeverEnding Story」を 辞書を引き引き最後まで読み終えることができました。今調べたら原書はドイツ語ということですが、当時は英語が原書と思い込んでいたので、このことは大きな成功体験で、その後は、英語を勉強することは苦痛ではなく楽しみとなったように思います。今にして思えば、同時にこうしたモチベーションを作り出すことが学ぶことのコツだということを自分のなかで発見できたのかもしれません。

Hotwire でモダンなウェブアプリケーションを作る

はじめに

JSON でなく HTML を送ることでモダンなウェブアプリケーションを開発できる Hotwire に少し前から興味がありました。

Hotwireとは何なのか? を始めとした日本語の情報を拾い読みしていたのですが、

ユーザにとっても、開発の進め方も Progressive Enhancement にできること

と書かれていたりして、わかったような、わからないような。

で、Hotwire を開発した DHH 氏みずから Hotwire の使い所を解説していた Podcast があって聞いてみたら、とてもわかりやすくて納得した。

» 151: DHH – Building HEY with Hotwire | Full Stack Radio

実際にデモアプリを作りながら、Hotwire がどういうものなのかを見ていきます。

クラシックなウェブアプリを作る

まずは現時点で最新の Ruby 3.0.0 & Rails 6.1.0 の環境を用意します。長らく gem install rails で最新の rails をインストールしてから rails new する方法をとってきたのですが、今回Ruby 歴 10 年の私が【絶対に】 gem install rails コマンドを実行しない理由を参考に、bundle init で作った Gemfile に rails のバージョンを指定するやり方で用意しました。

% npm install --global yarn (yarn が未インストールの場合)
% mkdir hotwire_sample
% cd hotwire_sample
% rbenv install 3.0.0 (definition not found と出た場合はその前に brew update && brew upgrade ruby-build)
% bundle init

Gemfile を開き

gem 'rails', '~> 6.1.0'

を追記したら、

% bundle install --path=vendor/bundle
% bundle exec rails new .

で rails をインストールします。

% bundle exec rails s

で rails サーバーを起動し、http://localhost:3000/ にアクセスして、「Yay! You’re on Rails!」のページが表示されればOK。

Rails でデモアプリと言えば、かつてDHHが15分でつくってみせたブログアプリです。

% bundle exec rails g scaffold Post title:string body:text
% bundle exec rails db:migrate

2005年には15分かかっていましたが、いまや一瞬でタイトルと本文が入力できるブログアプリが完成しました。

Hotwire をインストール

% bundle add hotwire-rails
% bundle exec rails hotwire:install 

で hotwire をインストールします。

次に app/views/layouts/application.html.erb の head 内に

<%= turbo_include_tags %>

を追加します。

モダン化その1 - 画面遷移しないようにする

Scaffold だけでつくったブログ、僕はこれで十分便利と思うのですけれど、2021年では「いちいち画面遷移するなんてダサい、モダンじゃない」という声が聞こえてきそうです。

そこで記事を追加する New Post のページを、画面遷移せずリスト画面の下の方にそのまま表示するようにします。

iframe で New Post をはめこむようなイメージです。実際には Hotwire の Turbo Frames という機能の turbo_frame_tag を使います。

app/views/posts/index.html.erb の New Post のリンクを

<%= turbo_frame_tag 'new_post', src: new_post_path, target: :_top %>

に入れ替え、app/views/posts/new.html.erb の中身全体を turbo_frame_tag 'new_post' で囲んでしまいます。

<%= turbo_frame_tag 'new_post' do %>
  <h1>New Post</h1>

  <%= render 'form', post: @post %>

  <%= link_to 'Back', posts_path %>
<% end %>

turbo_frame_tag に続く 'new_post' の部分にはユニークなIDを付け、同じIDの部分が対応しています。つまり、index.html.erb の turbo_frame_tag 'new_post' の部分に、app/views/posts/new.html.erb の中身全体がそのまま表示されます。

app/controllers/posts_controller.rb の def create 内で posts コントローラーの show にリダイレクトしている部分はコメントアウトし、index にリダイレクトするように変更します。

        # format.html { redirect_to @post, notice: 'Post was successfully created.' }
        format.html { redirect_to posts_url, notice: 'Post was successfully created.' }

これで、画面遷移せず、記事を登録できるモダンなアプリの出来上がりです。この変更には、リダイレクト先を変える以外、モデルやコントローラーの修正はほとんど必要ありません。

モダン化その2 - リアルタイムでページを更新する

ブログのアプリでその必然性はほとんどないと思うのですが、モダンなアプリというのは、データが変更されたときにリロードすることなくリアルタイムにページが更新されるものです。

2000年-2004年アメリカに住んでいたとき、サッカー日本代表チームの試合の模様をテキストで伝える実況サイトを見ていて、5秒間ごとにリロードボタンを押しながら一喜一憂していたものですが、2021年ではもうそんなことは許されません。

そこで Hotwire の Turbo Streams を使います。

これを使うには redis が必要なので

% brew install redis

で redis をインストールします。

記事が更新されたときに、更新されたことを通知するため、app/models/post.rb の Post モデルに broadcasts_to を追記します。通知先となる 'posts' は、後述する に付ける id です。

class Post < ApplicationRecord
  broadcasts_to ->(_post) { 'posts' }
end

Turbo Streams を使ってデータをリアルタイムに更新するには更新する部分を partial ファイルに切り出す必要があります。ブログ記事を列挙している部分を partial ファイルに置き換えます。

新たに app/views/posts/_post.html.erb というファイルを追加し、index.html.erb から tr 部分を移してきます。id には dom_id(post) を設定します。

<tr id="<%= dom_id(post) %>">
  <td><%= post.title %></td>
  <td><%= post.body %></td>
  <td><%= link_to 'Show', post %></td>
  <td><%= link_to 'Edit', edit_post_path(post) %></td>
  <td><%= link_to 'Destroy', post, method: :delete, data: { confirm: 'Are you sure?' } %></td>
</tr>

tr 部分を parial ファイルに移したので、app/views/posts/index.html.erb の tbody の部分は以下のようになります。

  <%= turbo_stream_from 'posts' %>
  <tbody id="posts">
    <% @posts.each do |post| %>
      <%= render post %>
    <% end %>
  </tbody>

turbo_stream_from 'posts' で post インスタンスに関する変更内容を WebSocket 経由で受け取れるようになります。

以上でモダン化その2が完了です。

一方のブラウザで記事の内容を更新したり、削除すると、もう一方のブラウザにすぐに反映されます。

まとめ

ここまでで、クラシックなアプリに 1) 遷移しない画面、2) リアルタイムに更新される画面、というモダンなウェブアプリケーションに特徴的な機能を追加しました。

意図的ですが、JavaScript は一行も書いていません。しかしさらに細かくモダンな機能を追加していくにはさすがに JavaScript を書く必要があり、そこは Hotwire の Stimulus を使うことになります。Stimulus の導入は若干大変なので、次の機会にでもブログで紹介しようと思います。

Hotwire を少し使ってみてわかったのは、サーバーサイドでHTMLをレンダリングするクラシックなウェブアプリケーションをベースにして、必要な箇所に Turbo Frames を使って遷移を省いたり、Turbo Streams を使ってリアルタイム性を追加したり、細かな機能追加には Stimulus を使っていくというのが Hotwire のアプローチだということでした。

冒頭の Progressive Enhancement (段階的な改善)というのは、そういうことなのだ納得しました。

Podcast での DHH 氏の解説の端々に、「Ruby 最高、全部 Ruby で書きたい。JavaScript はできるだけ書きたくない」という Ruby 愛が感じられます。2019年、東京で開催された Rails Developer Meetups の基調講演 で、DHH は、ほとんどのアプリケーションは JavaScript のフレームワークなんて必要としていない、もっとシンプルに作れるはずだと語っていました。

デモのために無理やり Turbo Streams を使ったブログ記事の更新のように、そのままで十分なところは通常のサーバーサイドレンダリングのままに、たとえばチャットの画面のように必要なところだけをモダン化していけば良いというのが DHH および Hotwire のアプローチなのだと思います。

参考

さらに詳細を知りたい場合は、Hotwire | Drifting Ruby のチュートリアル動画に沿って、チケット管理システムのデモアプリを作ってみることから始めるのが良いと思います。

ファーレ立川アート、街なかに100以上パブリックアート...

ファーレ立川アート、街なかに100以上パブリックアートが展示されておりクエストの作りがいがありました。

https://t.co/WkdnKlCTSD

まだわずか3つだけですが、結構良問が作れたと思うので機会があったらやってみてください。

まちクエストで「静岡ナンバー」のクエストをしかけました...

まちクエストで「静岡ナンバー」のクエストをしかけました!みつけてみてください https://t.co/JkdiQI4zII #machiquest

まちクエストで「黄色いビル?」のクエストをしかけました...

まちクエストで「黄色いビル?」のクエストをしかけました!みつけてみてください https://t.co/AIlRwBoO0L #machiquest

まちクエストで「トンボヒコーキのメッセージの中のメッセ...

まちクエストで「トンボヒコーキのメッセージの中のメッセージ」のクエストをしかけました!みつけてみてください https://t.co/l9mY69SYIv #machiquest

まちクエストで「巨大な鉢」のクエストをみつけた! ht...

まちクエストで「巨大な鉢」のクエストをみつけた! https://t.co/4GsNAvQnsN #machiquest

まちクエストで「幸福の木」のクエストをしかけました!み...

まちクエストで「幸福の木」のクエストをしかけました!みつけてみてください https://t.co/7mFtyhNthu #machiquest

まちクエストで「大塚駅前 」のクエストをみつけた! h...

まちクエストで「大塚駅前 」のクエストをみつけた! https://t.co/xxGevw9O7d #machiquest

まちクエストで「都電早稲田」のクエストをみつけた! h...

まちクエストで「都電早稲田」のクエストをみつけた! https://t.co/JTFb1z3H7c #machiquest

プロフィール

株式会社まちクエスト代表、つくる社LLC代表。

Scratchで楽しく学ぶ アート&サイエンスRaspberry Piではじめる どきどきプログラミングを書きました。

オンラインコンテンツ: 大人のためのScratch

Amazonから図書館検索 Libron、iPhoneアプリ ひらがなゲーム かなぶん を作っています。

Email: webmaster at champierre dot com

Twitter @jishiha

最近のエントリー

アーカイブ