まっちま
こんにちは。まっちまです。 無料３DCG作成ソフト『Blender』のインストールをやっていきましょう！ １．公式ホームページにアクセス 【↓URL】 ２．ダウンロードボタンを押す ３．zipファイルを解凍 ４．解凍したファイルを開く ４．アプリケーションをデスクトップに移動してください！ ５．完成！おめでとうございます！！！
ReactNative：インラインスタイリング1.StyleSheetをインポート import { StyleSheet } from 'react-native'; 2.スタイルを指定 <View style={styles.container}></View> 3.StyleSheetをcreate const styles = StyleSheet.create({ container: { flex: 1, flexDirection: 'c
1.クラス名でスタイルを指定 .textBlue{ color: blue;} <h1 className="textBlue">1.クラス名でスタイルを指定</h1> 2.直接スタイルを指定 <h1 style={{ color: "orange" }}>2.直接スタイルを指定</h1> 3.変数でスタイルを指定 var textGreen = { color: "green" }; <h1 style={ textGreen }>3.変数でスタイル
React内の要素の表示非表示に使用するとき便利！ 例）ボタンを押して要素を消すetc... const { Component, Button } = React;const TextContext = React.createContext("");function App() { const [changeText, setText] = React.useState(true); return ( <div> <p>初期値がtrue, ボタンクリックでsta
Hooksとは？React の機能を “接続する (hook into)” ための関数。 フックは React をクラスなしに使うための機能。関数コンポーネントで使用。 useState()React本体に関数コンポーネント専用の保存領域を作成してもらい、データを読み書きできるフック。 const { Component } = React;function CountButton(props: any){ const clicked = () =>{ // 親コンポ
コンポーネント内のstate管理 コンポーネント同士の値の受け渡し/state, props Search・filter：テストに合格したすべての配列からなる新しい配列を生成 const newArray = arr.filter( 配列の要素 => 条件式); 配列の表示 入力フォーム JSX：if文
mapとforEachの使いわけmap：配列の要素に関数で指定した何かしらの処理を加えて新たな配列を生成。コードがシンプルでわかりやすい。 console.log( [2,4,6].map( x => x * 2 )) // [4,8,12] forEach：map同様に配列の要素一つ一つに関数で指定した何らかの処理をしてくれるが、配列は生成されない。実装時間はmapと比べて早い。 console.log( [1,2,3].forEach( x => x * 2 ))
概要1.入力された値をstateで管理 2.入力された値はonChangeでinputに入力された時にテキストを更新 3.inputのvalueはstateで保持している値を割り当てる 導入1.フォームを作成 2.stateを作成 3.stateの値をフォームのvalueに割り当てて表示を確認 4.onChangeイベントを作成 5.stateが更新されるか確認 input要素を参照event.target.value コード全文const { Compo
axiosをインポート import axios from 'axios'; jsonデータの扱い方・オブジェクト.key名でデータの取得が可能 ・下の例だとresponse.data.imageで画像の取得が可能 const clicked = () =>{ // axios.get(URL)でapiからgetしてjsonを取得 axios.get('https://yesno.wtf/api') // thenで成功した場合の処理をかける .then(resp
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 name}.github.io/{repository name}", 3.Gi
コンポーネント指向ソフトウェア開発において部品ごとに小さく分けて開発する考え方のこと。 処理に必要な変数や値をコンポーネントに渡すだけで、そのコンポーネントの中身を見ることなく、処理を完結できる。 分割統治法：大きな問題を小さく分割して解決していく手法。 単一責任の原則：役割が単一の疎結合の状態にするという考え方。お互い影響を及ぼし合わないという考え方。 Reactでは、「ひとつのコンポーネントは理想的にはひとつのことだけをするべきだ」 StateとPropsprop
React Appの作成npx create-react-app アプリ名 cd アプリ名 cd start Ctrl + C：停止 React Appの作成：TypeScriptの場合 npx create-react-app アプリ名 --template typescript TypeScriptとは？：JavaScriptに対して、省略も可能な静的型付けとクラスベースオブジェクト指向を加えたモノ。 既存のHTMLにReactを導入する方法1.DOMコンテナを導入
概要・UIを作ることに特化したJavaScriptライブラリ ・「Facebook」「Instagram」「Yahoo!」「Airbnb」「Reddit」「Netflix」「Slack」「Uber」など、世界中で数多く採用 ・vue, jQueryと比べて大規模開発向き 特徴宣言的なView ・UIの部品に対し「このような表示（見た目）になります」と宣言するように実装できるという特徴 ・データの変更を検知し、自動的に表示を更新する コンポーネントベース ・コンポーネン
みなさん、こんにちは！ まっちまです。 今回はAdobe illustratorとBlenderの連携方法についてやっていきます！ イラレのデータはBlenderで読み込めて３DCGとして活用したりアニメーションも出来るんです！！！ １．イラレのデータを用意します。 ・自分で描いてもいいし、めんどくさい人はフリーのデータを探してきましょう！！！ ２．イラレをつかってSVG形式で出力します。 ３．Blenderを起動し、File→インポート→SVGの順でクリックし
こんにちは。まっちまです。 良く忘れちゃうPNG画像の背景透過をやっていきましょう！ 今回は資料で使ったブレンダーファイルの付録がついてます！！！ 【付録URL】 https://matchima.booth.pm/items/1935472 【注意点】 Cyclesのレンダービューでないと余白が黒く映ったままなので注意。 マテリアルビューだと葉っぱは表示されるが、余白は黒い。 １．メッシュ→平面を追加 ２．平面にマテリアルを新規追加 ３．マテリアルのカラ
