BLOG

【動画】ReactNativeでスマホ向けニュースアプリをつくろう!環境設定編

2021-12-24

このブログはロックシステムのYoutubeチャンネル「ロックシステムアカデミーCH」の文字起こしや使用したコードの解説等をしています。
是非動画本編もご覧ください!
よろしければチャンネル登録も宜しくお願い致します!



みなさんこんにちわ!ロックシステムアカデミーのろっくんです!
今回の動画はReactNativeを使用してスマホ向けニュースアプリを作るよ。



スマホアプリかー!作ってみたいと思ってたんだよ。
でもReactNativeってなんだろう?



「React Native」とは、2015年にFacebook社がリリースしたモダンなフレームワークだね。フレームワークは文字通り、アプリ開発を楽に行えるように用意された、枠組みのことを指すんだ。
そんな便利なフレームワークを使ってアプリ開発をしていくよ!



ReactNativeってC#、Rubyみたいな言語のことだと思ってたよ。
よーし頑張ってアプリ開発するぞー!



第一回の今回やることは3つ
1.ReactNativeとはなんなのか?
2.PC上でアプリの開発が出来るように環境設定をする
3.少しコードを触ってみる
この3つを動画内で紹介するよ。皆も動画を見ながらチャレンジしてみてね!



■動画内で紹介した環境のダウンロードは以下からできます!
・Node.jsダウンロード
Node.js
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
https://nodejs.org/ja/

・Expo公式サイト
Expo
Expo is an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React.
https://expo.dev/

・Visual Studio Code
Visual Studio Code – コード エディター | Microsoft Azure
ほぼすべての言語に対応し、任意の OS で動作する強力なコード エディター、Visual Studio Code を使用して、Azure で編集、デバッグ、デプロイを行います。
https://azure.microsoft.com/ja-jp/products/visual-studio-code/

・Expo GO(スマホから)
‎Expo Go
‎Start building projects using web technologies with just your iOS device and your computer. Expo is a developer tool for creating experiences with interactive gestures and graphics using JavaScript and React. Note: some programming experience is recommended. Technical specs: this version of Expo us…
https://apps.apple.com/jp/app/expo-go/id982107779


■動画で使用したコマンド一覧(コピペして使用してください。)
・Node.jsインストール確認
node --version
・Expo-clのインストール
npm install expo-cli --global
・プロジェクト作成
expo init my-new-project
・Expoログイン
expo login
・Expo起動
expo start

株式会社ロックシステム

「ブラック企業をやっつけろ!!」を企業理念にエンジニアが働きやすい環境をつきつめる大阪のシステム開発会社。2014年会社設立以来、残業時間ほぼゼロを達成し、高い従業員還元率でエンジニアファーストな会社としてIT業界に蔓延るブラックなイメージをホワイトに変えられる起爆剤となるべく日々活動中!絶賛エンジニア募集中。