【詰まった時に使える】tailwind+Next.js+typescript ~tailwind編~ 課題でtailwind+Next.js+typescriptでLPを作ってみるを勉強しながら作っていた時に、自分がリファレンスですぐに取り出せたら楽だなーと思った内容を残しておきます。初心者がつまづきそうなポイント+αで書いてあります。 ※React(Next.js)ベースで書いてありますのでclassがclassNameになっています。 課題でいいねが50個必要で...LGTMボタンを押してくれると嬉しいです！！ 左右に余白をつけてコンテンツが広がらないようにしたい時 [実装例] <div className="container mx-auto"> //ここに書きたいコンテンツを記述する <div className="h-1 text-4xl">ここから始まるよん</div> </div> デスクトップは横！モバイルは縦！に並ぶ！[headerあるある] [実装例]!配置の重要な部分だけ記述してあります。(細かいレイアウトは消してあります) <header className="flex flex-col md:flex-row md:justify-between"> <Image src={logo} alt="logo" width={160} height={80}/> <nav>//ここにnavの内容を記述する</nav> </header> 上記の解説 コンテンツに対しての中央揃えが欲しい.. [実装例]!配置の重要な部分だけ記述してあります。(細かいレイアウトは消してあります) <header className="flex flex-col md:flex-row md:justify-between items-center"> <Image src={logo} alt="logo" width={160} height={80}/> <nav>//ここにnavの内容を記述する</nav> </header> items-center+flexでできるよん 全デバイスのレイアウトを一括確認できる最強アプリ「Sizzy」 tailwindではありませんが、これを使うとレイアウトが全デバイスで一気に確認できる最強アプリ。 私はUdemy講師のたにぐちまこと(ともすた)さんの講座で知りました。使い方等はともすたさんの動画から閲覧してもらったらわかるかと思います。 動画内でも出てきていますが、SizzyはSetupというアプリで課金して入れる方が他のアプリも使えてお得です。下記に引用を載せておきます。 ウェブ制作と確認が捗る開発者向けブラウザー『Sizzy』(たにぐちまこと講師) https://www.youtube.com/watch?v=HhKdTh-FfQ8 有料で高額なデスクトップアプリが月額980円で使いたい放題になる神アプリ「Setup」 https://setapp.com

Reactの基本をマスターしよう 条件分岐 即時関数 (() => { // ここに処理を書く })() 三項演算子 jsxに式を埋め込む const Hello = () => { const isReact = true; return <p>{ isReact ? "Hello, React!!" : "Hello!!" }</p>; } ログイン／ログアウトボタンの出し分け（if文） import React, { useState } from "react"; import "./styles.css"; const LogoutButton = (props) => ( <button onClick={props.toggleIsLogin}>ログアウト</button> ); const LoginButton = (props) => ( <button onClick={props.toggleIsLogin}>ログイン</button> ); const LoginControl = () => { const [isLogin, setIsLogin] = useState(false); const toggleLoginFunc = () => setIsLogin(!isLogin); return ( <p> {(() => { // 即時関数 if (isLogin) { return <LogoutButton toggleIsLogin={toggleLoginFunc} />; } else { return <LoginButton toggleIsLogin={toggleLoginFunc} />; } })()} </p> ); }; export default function App() { return ( <> <LoginControl /> </> ); } 繰り返し処理 map((要素, [index], [array]) => {})を使う 繰り返す要素には、key属性にユニークな値を入れる const numbers = [2, 4, 6, 8]; const ListItem = () => { const items = numbers.map((item) => <li key={item.toString()}>{item}</li>); return <ul>{items}</ul>; }; export default function App() { return <ListItem />; } イベント処理 イベントハンドリング onChangeや onClickに関数を渡すことによりイベントハンドリングを行う。 引数にイベントオブジェクトを受け取ることができる。 const handleOnchange = (e) => { console.log(e.target.value); }; const SampleInputText = () => { return <input type="text" onChange={handleOnchange} />; }; export default function App() { return <SampleInputText />; } フォーム テキスト入力フォーム 文字列を入力して「入力」ボタンを押すと、上部に表示される import React, { useState } from "react"; import "./styles.css"; const InputText = () => { // リアルタイムに入力される文字列 const [inputTextValue, setInputTextValue] = useState(""); // ボタンが押下されて、画面に表示する文字列 const [text, setText] = useState("JavaScript"); // リアルタイム入力のイベントハンドラ const handleChange = (e) => { setInputTextValue(e.target.value); }; // 入力ボタンを押したとき const handleClick = () => { setText(inputTextValue); setInputTextValue(""); }; return ( <div className="App"> <h1>I love {text}</h1> <input type="text" value={inputTextValue} onChange={handleChange} /> <button onClick={handleClick}>入力</button> </div> ); }; export default function App() { return <InputText />; } セレクトボックス 選択すると、上部に表示される import React, { useState } from "react"; import "./styles.css"; const values = [ { id: 1, item: "HTML" }, { id: 2, item: "CSS" }, { id: 3, item: "JavaScript" } ]; const selectItems = values.map((value) => { return ( <option key={value.id} value={value.item}> {value.item} </option> ); }); const InputSelectBox = () => { // セレクトボックスの洗濯をリアルタイムで保持するstate const [selectedValue, setSelectedValue] = useState(values[0].item); // セレクトボックスが変更されたときのハンドラ const handleChange = (e) => { setSelectedValue(e.target.value); }; return ( <div className="App"> 　 <p>現在選択されている値：{selectedValue}</p> <select value={selectedValue} onChange={handleChange}> {selectItems} </select> </div> ); }; export default function App() { return <InputSelectBox />; } ラジオボタン 選択すると上部に表示される import React, { useState } from "react"; import "./styles.css"; const colors = [ { id: 1, value: "青" }, { id: 2, value: "赤" }, { id: 3, value: "黄" } ]; const colorRadioButtons = ({ handleChange, checkedValue }) => colors.map((color) => { return ( <label key={color.id}> <input type="radio" value={color.value} onChange={handleChange} checked={checkedValue === color.value} /> {color.value} </label> ); }); const InputRadio = () => { const [checkedValue, setCheckedValue] = useState("青"); const handleChange = (e) => { setCheckedValue(e.target.value); }; return ( <div className="App"> <p>現在選択されている値：{checkedValue}</p> {colorRadioButtons({ handleChange, checkedValue })} </div> ); }; export default function App() { return <InputRadio />; } チェックボックス（チェック状態を配列で管理） 選択した値が上部に表示される。 import React, { useState } from "react"; import "./styles.css"; const items = [ { id: 1, value: "マウス" }, { id: 2, value: "モニター" }, { id: 3, value: "キーボード" } ]; const CheckButtonItems = ({ handleChange, checkedValues }) => items.map((item) => { return ( <label key={item.id}> <input type="checkbox" value={item.value} onChange={handleChange} checked={checkedValues.includes(item.value)} /> {item.value} </label> ); }); const InputCheckBox = () => { const [checkedValues, setCheckedValues] = useState([]); const handleChange = (e) => { if (checkedValues.includes(e.target.value)) { // 既に含まれていれば、チェックオフしたとみなして、消す setCheckedValues( checkedValues.filter((checkedValue) => checkedValue !== e.target.value) ); } else { // ない場合は、末尾に追加する setCheckedValues([...checkedValues, e.target.value]); } }; return ( <div className="App"> <p>現在選択されている値：{checkedValues.join("、")}</p> <CheckButtonItems handleChange={handleChange} checkedValues={checkedValues} /> </div> ); }; export default function App() { return <InputCheckBox />; } チェックボックス（チェック状態をオブジェクトで管理） 選択した値が上部に表示される。 import React, { useState } from "react"; import "./styles.css"; const items = [ { id: 1, value: "マウス" }, { id: 2, value: "モニター" }, { id: 3, value: "キーボード" } ]; const CheckButtonItems = ({ handleChange, checkedValues }) => items.map((item) => { return ( <label key={item.id}> <input type="checkbox" value={item.value} onChange={handleChange} checked={checkedValues[item.value]} /> {item.value} </label> ); }); const InputCheckBox = () => { const [checkedValues, setCheckedValues] = useState( // {マウス: false, モニター: false, キーボード: false} をセットする //（空の{}に足していくイメージ） items.reduce((acc, cur) => { acc[cur.value] = false; return acc; }, {}) ); const handleChange = (e) => { // keyが変数の場合、[]で囲む setCheckedValues({ ...checkedValues, [e.target.value]: e.target.checked }); }; // entriesは、 [[key1, value1],[key2, value2], ... ] のようにして返す const stateOfCheckedValues = Object.entries(checkedValues).reduce( (pre, [key, value]) => { // チェックがonのkeyの配列を作成する value && pre.push(key); return pre; }, [] ); return ( <div className="App"> <p>現在選択されている値：{stateOfCheckedValues.join("、")}</p> <CheckButtonItems handleChange={handleChange} checkedValues={checkedValues} /> </div> ); }; export default function App() { return <InputCheckBox />; } 参考 - 基礎から学ぶReact/React Hooks

【詰まった時に使える】tailwind+Next.js+typescript ~tailwind編~ 課題でtailwind+Next.js+typescriptでLPを作ってみるを勉強しながら作っていた時に、自分がリファレンスですぐに取り出せたら楽だなーと思った内容を残しておきます。初心者がつまづきそうなポイント+αで書いてあります。 ※React(Next.js)ベースで書いてありますのでclassがclassNameになっています。 左右に余白をつけてコンテンツが広がらないようにしたい時 [実装例] <div className="container mx-auto"> //ここに書きたいコンテンツを記述する <div className="h-1 text-4xl">ここから始まるよん</div> </div> デスクトップは横！モバイルは縦！に並ぶ！[headerあるある] [実装例]!配置の重要な部分だけ記述してあります。(細かいレイアウトは消してあります) <header className="flex flex-col md:flex-row md:justify-between"> <Image src={logo} alt="logo" width={160} height={80}/> <nav>//ここにnavの内容を記述する</nav> </header> 上記の解説 コンテンツに対しての中央揃えが欲しい.. [実装例]!配置の重要な部分だけ記述してあります。(細かいレイアウトは消してあります) <header className="flex flex-col md:flex-row md:justify-between items-center"> <Image src={logo} alt="logo" width={160} height={80}/> <nav>//ここにnavの内容を記述する</nav> </header> items-center+flexでできるよん 全デバイスのレイアウトを一括確認できる最強アプリ「Sizzy」 tailwindではありませんが、これを使うとレイアウトが全デバイスで一気に確認できる最強アプリ。 私はUdemy講師のたにぐちまこと(ともすた)さんの講座で知りました。使い方等はともすたさんの動画から閲覧してもらったらわかるかと思います。 動画内でも出てきていますが、SizzyはSetupというアプリで課金して入れる方が他のアプリも使えてお得です。下記に引用を載せておきます。 ウェブ制作と確認が捗る開発者向けブラウザー『Sizzy』(たにぐちまこと講師) https://www.youtube.com/watch?v=HhKdTh-FfQ8 有料で高額なデスクトップアプリが月額980円で使いたい放題になる神アプリ「Setup」 https://setapp.com

はじめに React(またはReact Native)のデザインパターンについて勉強したので、一つずつ整理することにしました。 今回はContainer Componentパターンについてまとめました。 Container Componentパターン Container Componentパターンとは、ロジック(およびState管理やライフサイクル)部分をContainerコンポーネント、表示(見た目)部分をPresentationalコンポーネントに分割して管理するルールのことをいいます。 役割を各コンポーネントに分離してあげることでコードの保守性を高めることができ、結果として、開発者の生産性の向上やプロジェクトの参入障壁の低減に寄与します。 また、State管理をContainerコンポーネントでまとめて行っている(Presentationalコンポーネントにpropsを渡すだけ)ことから、ロジックに対するテストも簡単になります。 実装例 ログインフォームであるApp.jsxにContainer Componentパターンを適用し、新しくサインインボタンを追加していきます。 App.jsx export const App = () => { const InitialUserInfo ={ isCurrentUser: false, user: '', password: '', email: '' }; const [userInfo, setUserInfo] = useState(InitialUserInfo) return ( <View style={styles.container}> <Text style={styles.label}>username</Text> <TextInput style={styles.input} onChangeText={user => setUserInfo({ user })} value={userInfo.user} /> <Text style={styles.label}>password</Text> <TextInput style={styles.input} onChangeText={password => setUserInfo({ password })} value={userInfo.password} /> {userInfo.isCurrentUser ? ( // ログインフォーム <TouchableOpacity style={styles.fancyButton}> <Text style={styles.label}>Log in</Text> </TouchableOpacity> ) : ( // サインアップフォーム <React.Fragment> <Text style={styles.label}>email</Text> <TextInput style={styles.input} onChangeText={email => setUserInfo({ email })} value={userInfo.email} /> <TouchableOpacity style={styles.fancyButton}> <Text style={styles.label}>Sign up</Text> </TouchableOpacity> </React.Fragment> )} </View> ); } まずはApp.jsxの構造を整理します。 Log in, Sign upボタン部分(<TouchableOpacity />)やusername, password, emailの入力フォーム部分(<Text /> <TextInput />)をみてみると、構造がよく似ていることがわかります。 そこで、共通化できそうな箇所をPresentationalコンポーネントとして、以下のようにまとめます。 FancyButtonとFancyInputはどちらもStateをもたず、上位のContainerコンポーネントから引数で渡されます。 const FancyButton = ({ text, value, item, setItem }) => { return ( <TouchableOpacity style={styles.fancyButton} onPress={() => setItem([item], value)} > <Text style={styles.label}>{text}</Text> </TouchableOpacity> ) } const FancyInput = ({ value, item, setItem }) => { return ( <React.Fragment> <Text style={styles.label}>{item}</Text> <TextInput style={styles.input} onChangeText={value => setItem([item], value)} value={value} /> <TouchableOpacity style={styles.fancyButton}> <Text style={styles.label}>Sign up</Text> </TouchableOpacity> </React.Fragment> ) } 次にロジック部分をContainerコンポーネントContainerとしてまとめます。 Presentationalコンポーネント内で状態更新を同じように行うために、keyとvalueでプロパティを指定して更新するsetItemを作成します。 const setItem = (key, value) => { setUserInfo({ [key]: value }) } 新しく追加するSign inボタンは、FancyButtonに必要な引数を与えてあげるだけで作成されます。 <FancyButton text={'Sign in'} value={userInfo.isCurrentUser ? false : true} item={'isCurrentUser'} setItem={setItem} /> 最後にContainerをルートのAppでラッピングしてあげれば完成です。 App.jsx const Container = () => { const InitialUserInfo ={ isCurrentUser: false, user: '', password: '', email: '' }; const [userInfo, setUserInfo] = useState(InitialUserInfo) const setItem = (key, value) => { setUserInfo({ [key]: value }) } return ( <View style={styles.container}> <FancyInput value={userInfo.user} item={'user'} setItem={setItem} /> <FancyInput value={userInfo.password} item={'password'} setItem={setItem} /> {userInfo.isCurrentUser ? ( // ログインフォーム <FancyButton text={'Log in'} /> ) : ( // サインアップフォーム <React.Fragment> <FancyInput value={userInfo.email} item={'email'} setItem={setItem} /> <FancyButton text={'Sign up'} /> <FancyButton text={'Sign in'} value={userInfo.isCurrentUser ? false : true} item={'isCurrentUser'} setItem={setItem} /> </React.Fragment> )} </View> ); } export const App = () => { return <Container /> } 参考資料

Reactの勉強をしている私の個人メモなので、 記事としてはわかりづらくなっています。 FBは歓迎しておりますが、温かい目で見守って頂けると幸いです。 再レンダリングの最適化： memo　（コンポーネントの最適化） useMemo　（変数の最適化） useCallback　（関数の最適化） 以上

最速でNext.jsを動かす 基本はNextチュートリアル公式を圧縮して書いています。 　 Node公式サイトからNode.jsを端末にインストールする Node.js 10.13 or 最新バージョン $ npx create-next-app ? What is your project named? › next-app $ cd next-app $ npm run dev ※プロジェクト名は任意の名称に サーバーを立ち上げたら http://localhost:3000/ にアクセス 編集してみよう pages/index.js開いて<h1>内をHello Next.js!と編集 保存するとリアルタイムにタイトルが変更される ここまででNext.jsのアプリが動かせる ページルーティング まずリンクをつける方法 モジュールを利用したいコンポーネントファイルに読み込み import Link from 'next/link'; <Link href="/posts/first-post"> <a>Link</a> </Link> ここで開発ツールで見ると <a href="/posts/first-post">Link</a>で書き出されている Linkの中にaタグを入れる理由 <Link href="">: クライアントサイドで遷移させるため <a>: SEO対策 aタグだとBotに理解してもらうため(hrefは不要) Next.js ではなぜ Link の中にaを入れる？なぜhrefをLinkに付ける？？ ページ追加 /pages/posts/first-post.js追加 import Link from 'next/link'; const FirstPost = () => { return ( <> <h1>First Post</h1> <h2> <Link href="/"> <a>Back to home</a> </Link> </h2> </> ); } export default FirstPost; React.Fragmentタグについて return ( <> {/* <React.Fragment>...</React.Fragment> */} React.Fragmentの省略形 return内では必ず1個のタグでラップしなければならずdivでくくると 構造上余計セレクタが含まれてしまうため HTMLには反映されないタグが用意されている </> );

remix-run/react-routerのversion5.3(from version 5.2)におけるコードの変更点 remix-run/react-routerをversion5.2 から version5.3 での変更する箇所。ネクストversionでの対応した方がいい箇所のまとめ。 Breaking Change none...(まぁ、Minor Changeやし) Suggest Change activeClassName, activeClassNameをBC予定になるので、5.3に変更するタイミングであげておきませう。 Element.ariaCurrentでfalse対応ができるようになりました。 1. activeClassName, activeClassNameをBC予定になるので、5.3に変更するタイミングであげておきませう。 className props が定義された関係でそっちを利用するように徐々に移行しましょう。 6.Xのリリースタイミングでremoveされるので対応を実施。(file) nav-ink-changed.jsx // Good function Comp() { return ( <NavLink to="/" className={isActive => `px-3 py-2 ${isActive ? 'text-gray-200' : 'text-gray-800'}` } > Home </NavLink> ); } // Not Good activeStyle will duplicate <NavLink to="/faq" activeStyle={{ fontWeight: "bold", color: "red" }} > FAQs </NavLink> // Not Good activeClassName will duplicate <NavLink to="/faq" activeClassName="selected"> FAQs </NavLink> 2. Element.ariaCurrentでfalse対応ができるようになりました。 nav-ink-changed.jsx <NavLink aria-current="false"></NavLink> 他の変更箇所については、Projectのコード変更外のため明記をさけます。(ざっくりと) travis.ymlの脱却 -> github actionsへ babel関係のファイルのアップデート .github/XXXのファイルの命名規則 useContextを利用したSample Codeに変更 ReadMe群のアップデート(ちょっと読みやくなった) publish script の変更 Sample Codeでの命名規則の変更(key, contextという変数名ではなくpathname, XXXContextに変更)