質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
React Native

React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

受付中

TypeScriptで自分で決めた値をexportしたいです

konjikun
range

総合スコア2

React Native

React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

1回答

0リアクション

0クリップ

192閲覧

投稿2022/09/21 22:53

前提

TypeScriptでテキスト校正するエディタを作っています。別のファイルで指定した値をexport,importしたいですが、エラーが発生しました。

実現したいこと

・index.tsxで宣言したwrittenTextをexportして、tabキーが押されたときにEditable.tsxで空白を4つ空ける処理がしたい。

発生している問題・エラーメッセージ

ここで修飾子を使用することはできません。

名前writtenTextが見つかりません。

該当のソースコード

index.tsx

import { Box, Button, ButtonGroup, Icon, IconButton, useColorMode, } from '@chakra-ui/react'; import Head from 'next/head'; import { useState, VFC, useEffect } from 'react'; import { HiMoon, HiOutlineArrowNarrowDown, HiOutlineArrowNarrowRight, HiSun, } from 'react-icons/hi'; import { Node } from 'slate'; //ここをたどってルール変更 import { Slate } from 'slate-react'; import { Editable } from '../components/Editable/Editable'; import { Logo } from '../components/Logo'; import { useDirection } from '../lib/direction'; import { createEditor } from '../lib/editor/plugins'; const IndexPage: VFC = () => { const [editor] = useState(createEditor); const { direction, toggleDirection } = useDirection(); const { colorMode, toggleColorMode } = useColorMode(); const [value, setValue] = useState<Node[]>([ { type: 'paragraph', children: [{ text: '' }], }, ]); export const writtenText = value[0].children[0].text; console.log(writtenText); //ここから const general = () => { //最初のtabだけ実装できていない\t const ruleCheck = /\[[1-9]\]/.test(writtenText); //const ru = s.match(/[ [ 1-9 \]A-Z]/) return console.log(ruleCheck); }; console.log(Box.name); console.log(Slate.name); general(); return ( <> <Head> <title>INIAD IE</title> </Head> <ButtonGroup p="2" position="fixed" top="0" left="0" id="a"> <Button variant="ghost" p="2"> <Box as="span" display="inline-block" h="10" w="10" id="b"> <Logo /> </Box> </Button> </ButtonGroup> <Slate id="cjdfa" editor={editor} value={value} onChange={(newValue) => setValue(newValue)} //ここでテキスト更新 > <Editable direction={direction}></Editable> <ButtonGroup p="2" position="fixed" bottom="0" right="0"> <IconButton colorScheme="gray" variant="ghost" p="2" onClick={toggleDirection} aria-label={ direction === 'horizontal' ? '縦書きで表示する' : '横書きで表示する' } icon={ <Box id="d" as="span" display="inline-block" position="relative" h="6" w="6" > <Box id="e" as="span" fontSize="xs" position="absolute" top="0" left="0" aria-hidden="true" > </Box> {direction === 'horizontal' ? ( <HiOutlineArrowNarrowRight id="g" style={{ position: 'absolute', width: '1.5rem', height: '1.5rem', bottom: '-0.5rem', right: 0, }} /> ) : ( <HiOutlineArrowNarrowDown id="f" style={{ position: 'absolute', width: '1.5rem', height: '1.5rem', bottom: 0, right: '-0.5rem', }} /> )} </Box> } /> <IconButton colorScheme="gray" variant="ghost" p="2" onClick={toggleColorMode} aria-label={ colorMode === 'light' ? 'ダークモードにする' : 'ライトモードにする' } icon={<Icon as={colorMode === 'light' ? HiMoon : HiSun} />} /> </ButtonGroup> </Slate> </> ); }; export default IndexPage;

②こちらを一番下に書いた場合も試しました。

index.tsx

export default IndexPage; export {writtenText}

こちらがimportしたいファイルです。

Editable.tsx

import { Flex } from '@chakra-ui/react'; import { useEffect, VFC } from 'react'; import { Editable as SlateEditable } from 'slate-react'; import { renderElement } from '../../lib/editor/plugins'; import { writtenText } from '../../pages/index'; export const Editable: VFC<{ direction: 'vertical' | 'horizontal' }> = ({ direction, }) => { useEffect(() => { window.addEventListener('keydown', function (this: any, event) { if (event.keyCode == 9) { event.preventDefault(); console.log('tab'); const TAB = '\t'; const value = this.value; const sPos = this.selectionStart; const ePos = this.selectionEnd; const result = value.slice(0, sPos) + TAB + value.slice(ePos); const cPos = sPos + TAB.length; this.value = result; this.setSelectionRange(cPos, cPos); } return removeEventListener('keydown', (event) => { console.log(); }); }); }, []); /*useEffect(() => { addEventListener('keydown', (even) => { onTextAreaKeyDown(event, this); }); function onTextAreaKeyDown(event, object) { // キーコードと入力された文字列 const keyCode = event.keyCode; const keyVal = event.key; // カーソル位置 const cursorPosition = object.selectionStart; // カーソルの左右の文字列値 const leftString = object.value.substr(0, cursorPosition); const rightString = object.value.substr( cursorPosition, object.value.length ); // タブキーの場合 if (keyCode === 9) { event.preventDefault(); // 元の挙動を止める // textareaの値をカーソル左の文字列 + タブスペース + カーソル右の文字列にする object.value = leftString + '\t' + rightString; // カーソル位置をタブスペースの後ろにする object.selectionEnd = cursorPosition + 1; } } });*/ return ( <Flex id="textArea" h="max-content" w="max-content" minH="full" minW="full" alignItems="center" flexDir={direction === 'vertical' ? 'row' : 'column'} > <SlateEditable id="tab_input" className="tab_input" placeholder="自由にお書き下さい。" style={{ lineHeight: 2, height: '100%', width: '100%', maxHeight: direction === 'vertical' ? '40rem' : 'max-content', maxWidth: direction === 'horizontal' ? '40rem' : 'max-content', minHeight: direction === 'horizontal' ? '100%' : 0, minWidth: direction === 'vertical' ? '100%' : 0, paddingTop: direction === 'horizontal' ? '4rem' : '1rem', paddingBottom: direction === 'horizontal' ? '50vh' : '1rem', paddingRight: direction === 'vertical' ? '4rem' : '1rem', paddingLeft: direction === 'vertical' ? '50vw' : '1rem', writingMode: direction === 'horizontal' ? 'horizontal-tb' : direction === 'vertical' ? 'vertical-rl' : undefined, renderElement={renderElement} /> </Flex> ); };

試したこと

①のように宣言時にexportするやり方と
②のようにすでに宣言した値を一番下でexportするやり方を試しましたが、上記のエラーが発生しました。

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

React Native

React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。