ユーザインタフェース構築のためのJavaScriptライブラリとして、Vue.jsやAngular.jsと並んで人気の高い「React.js」。
年収や需要、将来性という点で常に比べられ議論が起こる3つの技術ですが、今回はReactに焦点を置いてこちらのリンクページを作成しました。
ジャンル一覧
※随時コンテンツ追加予定
Reactとは？基本構文や特徴
https://code-ship-blog.wemotion.co.jp/technology/react-js%e3%82%92%e5%a7%8b%e3%82%81%e3%82%88%e3%81%86%ef%bc%9a%e5%8b%95%e3%81%8b%e3%81%97%e3%81%aa%e3%81%8c%e3%82%89%e4%bb%95%e7%b5%84%e3%81%bf%e3%82%92%e7%9f%a5%e3%82%8d%e3%81%86/
先進的なフロントエンド開発技術として注目度、需要共に高いJavaScriptのライブラリReact.js。
仕組みや導入方法、jsxの基本構文、コンポーネント作成など手を動かしながら解説・入門。
https://code-ship-blog.wemotion.co.jp/technology/%e3%80%90%e3%81%93%e3%82%8c%e3%81%a0%e3%81%91%e5%88%86%e3%81%8b%e3%82%8c%e3%81%b0%e6%88%a6%e3%81%88%e3%82%8b%e3%80%91-react-js%e3%81%ae%e7%89%b9%e5%be%b4%e3%81%a8javascript%e3%81%ae%e9%a0%bb%e5%87%ba/
「React.jsについて興味がある！」
「簡単なことからでいいからReactを勉強してみたい！」
という初心者向けの図解つき解説記事。
仮想DOMってなんなの？
という疑問やReactでのアプリ開発で頻出する内容など一挙解消！
開発環境の構築
https://code-ship-blog.wemotion.co.jp/technology/react%e3%81%ae%e9%96%8b%e7%99%ba%e7%92%b0%e5%a2%83%e3%82%92docker%e3%81%a7%e6%95%b4%e3%81%88%e3%82%88%e3%81%86/
アプリ開発現場の必需品ともいえる仮想化環境の「Docker」について「なぜ使うのか？」「どのように使うのか？」プロのエンジニアが初心者向けに分かりやすく解説。
また Dockerを使った簡易的なアプリのビルドをハンズオン形式で紹介！
開発設計
https://code-ship-blog.wemotion.co.jp/technology/%e3%80%90react%e3%81%ae%e8%a8%ad%e8%a8%88%e3%82%92%e5%ad%a6%e3%81%b6%e3%80%91%e3%83%a9%e3%82%a4%e3%83%95%e3%82%b5%e3%82%a4%e3%82%af%e3%83%ab%e3%82%92%e7%9f%a5%e3%82%8d%e3%81%86/
Reactでコードを書き始める前に一度読んで欲しいReactでの開発設計。
”よりReactらしい開発”を。
Reactライクなアプリ開発とはどのようにコンポーネントを作成していくのか仕組みベースで解説。
テスト
https://code-ship-blog.wemotion.co.jp/technology/%e3%80%90%e3%82%a2%e3%83%97%e3%83%aa%e9%96%8b%e7%99%ba%e3%80%91%e3%83%86%e3%82%b9%e3%83%88%e7%94%a8api%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%a6%e3%83%ac%e3%82%a4%e3%82%a2%e3%82%a6%e3%83%88%e3%82%92/
アプリを開発していざローンチに向けてテスト。
作ったものは使ってみないと改善点が見えてこないもの。
この記事ではJSONPlaceholderというAPIを使ったテスト方法を紹介し解説。
モバイルアプリ開発
https://code-ship-blog.wemotion.co.jp/technology/react-native-expo%e3%81%a7%e4%bd%9c%e3%82%8b3%e3%83%97%e3%83%a9%e3%83%83%e3%83%88%e3%83%95%e3%82%a9%e3%83%bc%e3%83%a0%e5%af%be%e5%bf%9c%e3%81%ae%e3%82%a2%e3%83%97%e3%83%aa%e3%82%b1%e3%83%bc%e3%82%b7/
ReactNativeでのアプリ開発支援サービス「Expo」を使って、Hello Worldのハンズオン。
セットアップ方法なども解説。
その開発のし易さを体験。
おすすめ記事
https://code-ship-blog.wemotion.co.jp/technology/%e3%80%90vscode%e3%82%92%e5%9c%a7%e5%80%92%e7%9a%84%e3%81%ab%e4%bd%bf%e3%81%84%e3%82%84%e3%81%99%e3%81%8f%e3%81%99%e3%82%8b%e3%80%91%e3%81%8a%e3%81%99%e3%81%99%e3%82%81%e3%81%ae%e6%8b%a1%e5%bc%b5/
https://code-ship-blog.wemotion.co.jp/technology/%e3%80%90%e9%96%8b%e7%99%ba%e5%8a%b9%e7%8e%87up%e3%80%91%e3%82%a2%e3%83%97%e3%83%aa%e9%96%8b%e7%99%ba%e3%81%a7%e3%81%8a%e3%81%99%e3%81%99%e3%82%81%e3%81%ae%e3%83%87%e3%82%a3%e3%83%ac%e3%82%af%e3%83%88/
https://code-ship-blog.wemotion.co.jp/technology/%e3%80%90%e6%8a%80%e8%a1%93%e3%83%a1%e3%83%a2%e3%81%ae%e3%81%99%e3%81%99%e3%82%81%e3%80%91%e3%82%a8%e3%83%b3%e3%82%b8%e3%83%8b%e3%82%a2%e3%81%8c%e5%ae%9f%e8%b7%b5%e3%81%99%e3%82%8b%e5%ad%a6%e7%bf%92/
