記事一覧
【ReactNative】スタイル指定
ReactNative：インラインスタイリング1.StyleSheetをインポート
import { StyleSheet } from 'react-native';
2.スタイルを指定
<View style={styles.container}></View>
3.StyleSheetをcreate
const styles = StyleSheet.create({ con
【React】スタイルの指定
1.クラス名でスタイルを指定
.textBlue{ color: blue;}
<h1 className="textBlue">1.クラス名でスタイルを指定</h1>
2.直接スタイルを指定
<h1 style={{ color: "orange" }}>2.直接スタイルを指定</h1>
3.変数でスタイルを指定
var textGreen = { color: "green"
【React】三項演算子・二項演算子で要素を表示
React内の要素の表示非表示に使用するとき便利！
例）ボタンを押して要素を消すetc...
const { Component, Button } = React;const TextContext = React.createContext("");function App() { const [changeText, setText] = React.useState(true); re
【React】基本のHooks / useState(), effectState, useContext
Hooksとは？React の機能を “接続する (hook into)” ための関数。
フックは React をクラスなしに使うための機能。関数コンポーネントで使用。
useState()React本体に関数コンポーネント専用の保存領域を作成してもらい、データを読み書きできるフック。
const { Component } = React;function CountButton(props
Reactパーツ一覧
コンポーネント内のstate管理
コンポーネント同士の値の受け渡し/state, props
Search・filter：テストに合格したすべての配列からなる新しい配列を生成
const newArray = arr.filter( 配列の要素 => 条件式);
配列の表示
入力フォーム
JSX：if文
【React】配列の表示
mapとforEachの使いわけmap：配列の要素に関数で指定した何かしらの処理を加えて新たな配列を生成。コードがシンプルでわかりやすい。
console.log( [2,4,6].map( x => x * 2 )) // [4,8,12]
forEach：map同様に配列の要素一つ一つに関数で指定した何らかの処理をしてくれるが、配列は生成されない。実装時間はmapと比べて早い。
cons
【React】入力フォーム
概要1.入力された値をstateで管理
2.入力された値はonChangeでinputに入力された時にテキストを更新
3.inputのvalueはstateで保持している値を割り当てる
導入1.フォームを作成
2.stateを作成
3.stateの値をフォームのvalueに割り当てて表示を確認
4.onChangeイベントを作成
5.stateが更新されるか確認
input要素を参
【React】APIの使用
axiosをインポート
import axios from 'axios';
jsonデータの扱い方・オブジェクト.key名でデータの取得が可能
・下の例だとresponse.data.imageで画像の取得が可能
const clicked = () =>{ // axios.get(URL)でapiからgetしてjsonを取得 axios.get('https://yesno.wtf/
【React】GitHubPagesに反映する方法
GitHubPagesで手軽にReactアプリを公開することができます。
1.gh-pagesをインストールnpm install gh-pages
2.package.jsonを変更"scripts": { (略) "predeploy": "npm run build", "deploy": "gh-pages -d build"},"homepage": "https://{user n
【React】state, props, hook
コンポーネント指向ソフトウェア開発において部品ごとに小さく分けて開発する考え方のこと。
処理に必要な変数や値をコンポーネントに渡すだけで、そのコンポーネントの中身を見ることなく、処理を完結できる。
分割統治法：大きな問題を小さく分割して解決していく手法。
単一責任の原則：役割が単一の疎結合の状態にするという考え方。お互い影響を及ぼし合わないという考え方。
Reactでは、「ひとつのコンポーネ
Adobe illustratorとBlenderの連携方法
みなさん、こんにちは！
まっちまです。
今回はAdobe illustratorとBlenderの連携方法についてやっていきます！
イラレのデータはBlenderで読み込めて３DCGとして活用したりアニメーションも出来るんです！！！
１．イラレのデータを用意します。
・自分で描いてもいいし、めんどくさい人はフリーのデータを探してきましょう！！！
２．イラレをつかってSVG形式で出力しま
PNG画像の背景透過【付録付き】
こんにちは。まっちまです。
良く忘れちゃうPNG画像の背景透過をやっていきましょう！
今回は資料で使ったブレンダーファイルの付録がついてます！！！
【付録URL】
https://matchima.booth.pm/items/1935472
【注意点】
Cyclesのレンダービューでないと余白が黒く映ったままなので注意。
マテリアルビューだと葉っぱは表示されるが、余白は黒い。
１
Blenderをインストールしてみよう
こんにちは。まっちまです。
無料３DCG作成ソフト『Blender』のインストールをやっていきましょう！
１．公式ホームページにアクセス
【↓URL】
２．ダウンロードボタンを押す
３．zipファイルを解凍
４．解凍したファイルを開く
４．アプリケーションをデスクトップに移動してください！
５．完成！おめでとうございます！！！