7
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

M1 MacでLIFFとReactを使う際の環境構築

Posted at

初めに

2021年3月の現在、Open Hack U 2020 Online Vol.4に挑戦しています。
チームの制作物で、LIFF (LINE Front-end Framework)を使ったものを作成することにしました。
M1 Macbook AirでLIFFを使うのは、初めてです。
そこで、環境構築などで詰まったところを書いておき、再度M1 MacでLIFFを使うときにつまらないようにするための備忘録です。

本記事の目的

本記事は、ハッカソンなどで、M1 Macbookを使う人のために書きました。
色々なアプリを作る時の候補として、LIFFを使ったアプリ開発に挑戦してみては、いかがでしょうか?

詰まったところ

参考記事1を進めていたところ、yarnがうまく使えないことがわかりました。
そのため、現時点でのM1チップのMacでは、yarnを使うのをやめましょう。

最終的なコード

最終的に作成したアプリは、こちらです。
メッセージを送信し、GoogleをChrome(デフォルトに設定してあるアプリ)で開き、友達に
メッセージを送ることができるようにしています。

進める中でインストールしたアプリ

https://dashboard.ngrok.com/get-started/setup
デプロイ先

作成したアプリ

+IMG_2395.gif

参考記事

  1. React + TypeScriptを使ってLIFFを作る
  2. 【M1 Mac】React開発環境の構築
  3. nodebrewの「Warning: Failed to create the file」への対処
  4. npmとyarnのコマンド早見表
  5. MacにngrokをインストールしてローカルWebサーバを外から接続できるようにする
7
6
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
7
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?