42Tokyoの課題で、チャットとピンポンゲームができるウェブアプリを作成しています。

その過程で使い始めたのがFigma。

FigmaはMicrosoftのパワーポイントに匹敵するほどの力を秘めており、その衝撃について記事も書きました。

そんななか、作ったデザインを実際のコードにどうやって落とし込むかというのが問題だったのですが、調べるうちに発見したのが、「Locofy」というサービス。

「Locofy」はFigmaのプラグインとして使用することができ、Figmaで作ったデザインをそのままコードに書き出すことができます。

生成できるコードはHTML/CSS、React、Next.jsも可能。

42Tokyoの課題ではNext.jsを使う予定だったので、ちょうどよかったです。

しかも、現在はベータ版ということで使用料は無料。

公式チュートリアルを使って使い方を学ぶ

なんとなくの使い方は、FigmaでLocofyを開いたときにでてくるチュートリアルをみて覚えました。

そのチュートリアルでは、航空券の予約サイトを使って練習できます。

慣れなければいけないのは、Figmaでつくったそれぞれの要素に「タグ」づけをおこなうこと。

その要素が「ボタン」なのか「インプットフィールド」なのかといったことを、ひとつひとつタグづけます。

そしてタグづけした要素に、アクションを加えることもできます。

ここでは、モーダルとして他のパーツを呼びだすといったことも設定できます。

つづいて「Locofy Builder」というものを使い、実際にコードを見ながら修正を行います。

正直、コードを読んでもほとんど理解できていないのですが、理解できるようになると、とても便利だと思います。

次に、使いまわしのできる「コンポーネント」を作り、最後にコードを生成できます。

使い方に慣れるのに少し時間が必要ですが、デザインをコードに落としこむ際に、どこから手をつけていいか分からないときにアウトプットを知れるので、スタートにちょうどよいかと思います。

コードの理解は必要

生成AIのような感動をおぼえたLocofiですが、細かい修正をおこなうには、やはりコードへの理解が不可欠です。

ですので、JavaScriptとTypeScript、React、そしてNext.jsの学習を続けています。

JavaScriptは『JavaScript Primer』（お高いのですが…）、TypeScriptは『プロを目指す人のためのTypeScript入門』という本がわかりやすく、だいぶ慣れてきました。

Reactは『りあクト！　1~3』と、『基礎から学ぶ React/React Hooks』を使っています。

ReactとNext.jsについては公式のチュートリアルも使っています。

実はReactとNext.jsの公式チュートリアルは1か月前にすでに始めていたのですが、デザインを作っているあいだに内容を忘れていました。

ですので、もういちど最初から行っています。

実際に手を動かして、「覚えているかどうかをチェックする復習の時間」と取らないと、知識が定着しません。

ですので、今回は公式チュートリアルから自分で「復習問題」をつくりながら学習を行っています。

「復習問題」は、公式のチュートリアルで紹介されているコードを、「簡単なヒント」だけを抽出し、それだけでコードを書けるかどうかの小テストのようなものです。

実際に復習問題を解くときは、手元の開発環境でおこなうにはすこしだけ面倒なので、「CodeSandbox」と呼ばれるブラウザ上で使えるエディターをつかっています。

これはReactの公式チュートリアルをすすめる際に使ったもので、Reactの公式チュートリアルをすすめれば、「CodeSandbox」の使い方ものっています。