asjdfiaje faoeifj jaodif aseopfjaoijdf f aei fawefjkpoasfa jei jfioaj helofasef

アンカーリンク生成用サンプル記事

<h1 id="h3315484c3b">Next.js 環境構築 with typescript , tailwind css</h1><h3 id="h22481e4585">・プロジェクト作成</h3><pre><code>npx create-next-app プロジェクト名</code></pre> <h3 id="hb89d1d0899">・TypeScriptの導入</h3>TypeScriptを使用するにあたって、reactとnodeの型をInstallしましょう。<pre><code>yarn add --dev typescript @types/react @types/node</code></pre>インストールが終わったら、TypeScriptのconfigファイルを作成して、設定していきましょう。<pre><code>cd プロジェクト名
touch tsconfig.json
yarn dev</code></pre>tsconfig.jsonの中身を確認してみましょう。 ※各項目の設定内容については、qiita,Zennの方に色んな方々が、分かりやすく説明して下さっている記事があるので、割愛します。 ・Tailwind Cssの導入 ※Next.jsのバージョンによって、インストールコマンドが異なるので、package.jsonのnextを確認して下さい。 筆者のバージョンは、10.2.3<pre><code>yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest</code></pre>次に、configファイルを作成していきます。<pre><code>npx tailwindcss init -p</code></pre>ルートディレクトリに、tailwind.config.js,postcss.config.jsが作成されていることを確認してみましょう。 初回生成時には、不使用なクラスを多く含んでいるため、不要なものを除外（purge)するために設定していきます。<pre><code>// tailwind.config.js
purge: ['./pages//*.{js,ts,jsx,tsx}', './components//*.{js,ts,jsx,tsx}'],</code></pre> 次にTailwindをプロジェクトに適用する方法が２つあって<ul><li>1._app.tsに直接インポートする方法</li><li>2.globals.cssにTailwindを含める方法</li></ul> 今回は、②で実施していきます。これについては、私の浅い知識では、どちらがベストか分からなかったため、割愛します。 ルートディレクトリから/styles/global.cssを作成<pre><code>mkdir styles
cd styles
touch global.css</code></pre>作成した、global.cssに記載しましょう。<pre><code>./styles/globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;

// pages/_app.js
import '../styles/globals.css'</code></pre> これにて、環境構築は完了です。 vsCodeを使用している方は、拡張機能を利用すると効率が爆上がりするので、是非使用してみて下さい。 Intelligent Tailwind CSS tooling for VS Code

Next.js 環境構築 with typescript , tailwind css

<h1 id="h86fd5f5420">Next.js + Typescript + MicroCmsで技術ブログ作成</h1><h2 id="hf0e64b6796">前置き</h2>普段の仕事では、Javaをメインとしてエンジニアをしているので、休日や隙間時間を利用して、フロントエンドの知識をInputしております。 その中で、Outputの為に、自分の日々勉強したことなどを発信する為の、技術ブログを作成しようと考えました。<h2 id="h03726fb0df">技術スタック</h2><ul><li>Next</li><li>TypeScript</li><li>tailwindCss</li><li>MicroCms</li></ul>ソースは以下（github）。詰まった際は、参照してみて下さい。 <a href="https://github.com/shuji-takeda/next-microCms-tutorial" target="_blank" rel="noopener noreferrer">https://github.com/shuji-takeda/next-microCms-tutorial</a> それでは、環境構築から始めていきましょう。 <h2 id="h89de635a36">1.環境構築</h2>Next.jsのプロジェクト作成、TypeScript,TailwindCssの導入 ※Nextのプロジェクトと、Tailwindのインストールを一発で出来るコマンドがあるので、こちらで作成していきましょう。<pre><code>// create next.js project
// my-project部分を、ご自身に合わせて名前を変えて下さい。
npx create-next-app -e with-tailwindcss my-project

// typeScript install
# npmを使用している方は、こちら
npm install --save-dev typescript @types/react @types/node

# yarnを使用している方は、こちら
yarn add --dev typescript @types/react @types/node

cd プロジェクト名
touch tsconfig.json

// ここまでで、一度ローカル環境を立ち上げてみましょう。
yarn dev</code></pre> 問題なく、起動できていればOkです。現在のディレクトリ構成は画像の通りになっていると思います。 <img src="https://images.microcms-assets.io/assets/b7c43d0b3f1b486686b81049ed4728f7/efcf90d4d4a94add8c4d53b4d01f69e3/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-06-13%2016.37.20.jpg" alt=""> ディレクトリ構成が複雑になっても、大丈夫なように、srcディレクトリを作成し、そちらに纏めて行きます。<pre><code>mkdir src &amp;&amp;　mv pages/ src/pages &amp;　mv styles/ src/styles</code></pre> tailwind.config.jsを変更したディレクトリ構成に合わせて修正します。<pre><code>module.exports = {
 mode: 'jit',
 purge: [
// こちらを修正してください。
 './src/pages/**/*.{js,ts,jsx,tsx}',
 './src/components/**/*.{js,ts,jsx,tsx}',
 ],
 darkMode: false, // or 'media' or 'class'
 theme: {
 extend: {},
 },
 variants: {
 extend: {},
 },
 plugins: [],
}</code></pre> tsconfig.json<pre><code>{
 "compilerOptions": {
 // javascriptファイルへコンパイルされる時の形式を指定
 "target": "es5",
 "lib": [
 "dom",
 "dom.iterable",
 "esnext"
 ],
// ファイルを探しに行く際の開始地点を指定します。
 "baseUrl": "./",
// ｊｓファイルのインポートを許容します
 "allowJs": true,
// 型定義ファイルのチェックをスキップします。
 "skipLibCheck": true,
// 型チェックの挙動を有効化
 "strict": true,
// TypeScript はプログラムがディスク上の大文字小文字と異なるファイルをインクルードしようとした場合にエラーを発生させます。
 "forceConsistentCasingInFileNames": true,
// JavaScript ソースコード、ソースマップ、型定義のファイルを出力しないようにします。
 "noEmit": true,
// すべてのインポートに対して Namespace オブジェクトを生成することによって、
// CommonJS と ES Modules 間で相互運用可能なコードを出力します。
 "esModuleInterop": true,
 "module": "esnext",
 "moduleResolution": "node",
 "resolveJsonModule": true,
 "isolatedModules": true,
 "jsx": "preserve"
 },
 "include": [
 "next-env.d.ts",
 "**/*.ts",
 "**/*.tsx"
 ],
 "exclude": [
 "node_modules"
 ]
}</code></pre> prettier/eslintの設定<pre><code>// prettierのインストール
	yarn add -D prettier
 touch .prettierrc.js</code></pre>作成した、構成ファイルに以下を記載して下さい。<pre><code>// .prettierrc.js
module.exports = {
 semi: false,
 arrowParens: 'always',
 singleQuote: true,
}</code></pre> <pre><code>// eslintのインストール
yarn add -D eslint eslint-plugin-react \
 eslint-config-prettier eslint-plugin-prettier \
	 @typescript-eslint/parser @typescript-eslint/eslint-plugin
touch .eslintrc.js</code></pre> 構成ファイルに以下を記載して下さい。<pre><code>// .eslintrc.js
module.exports = {
 ignorePatterns: ['!.eslintrc.js', '!.prettierrc.js'],
 extends: [
 'eslint:recommended',
 'plugin:react/recommended',
 'plugin:@typescript-eslint/recommended',
 'plugin:@typescript-eslint/eslint-recommended',
 'plugin:prettier/recommended',
 'prettier/prettier',
 'prettier',
 ],
 plugins: ['@typescript-eslint', 'react', 'prettier'],
 parser: '@typescript-eslint/parser',
 env: {
 browser: true,
 node: true,
 es6: true,
 jest: true,
 },
 parserOptions: {
 sourceType: 'module',
 ecmaFeatures: {
 jsx: true,
 },
 },
 settings: {
 react: {
 version: 'detect',
 },
 },
 rules: {
 'react/prop-types': 'off',
 'react/react-in-jsx-scope': 'off',
 '@typescript-eslint/no-explicit-any': 'off',
 'prettier/prettier': 'error',
 'no-tabs': ['error', { allowIndentationTabs: true }],
 },
}</code></pre> 続いて、_app.js , index.jsをTypeScriptに書き換えていきましょう。まずは、それぞれファイル拡張子をtsxへ変更しましょう。 app.js		→	app.tsx index.js	→	index.tsx<pre><code>// app.tsx
import 'tailwindcss/tailwind.css'
import React from 'react'
import { AppProps } from 'next/app'

function MyApp({ Component, pageProps }: AppProps): JSX.Element {
 return &lt;Component {...pageProps} /&gt;
}

export default MyApp</code></pre> <pre><code>// index.tsx
import Head from 'next/head'
import React from 'react'

export default function Home(): JSX.Element {
 return ( ~ここは、変更無し。</code></pre> ここまでで、一度ローカル環境を立ち上げてみましょう。問題無く、起動できていればOKです。<pre><code>yarn dev</code></pre> <h2 id="h5b2367a965">2.MicroCmsの導入</h2>公式が提供している、microcms-js-sdkをインストールします。<pre><code>yarn add microcms-js-sdk</code></pre>※MicroCmsのセットアップについては、公式サイトを参照しながら、APIの作成までは、各自で行ってください。 <a href="https://document.microcms.io/tutorial/next/next-getting-started" target="_blank" rel="noopener noreferrer">https://document.microcms.io/tutorial/next/next-getting-started</a> 環境変数を設定していきます。 プロジェクトのトップディレクトリに .env.development.localを作成してください。(APIプレビューより、確認出来ます。）<pre><code>NEXT_PUBLIC_SERVICE_DOMAIN = "xxxxxx" (https://xxxxxxx.microcms.~のxxxx部分)
NEXT_PUBLIC_API_KEY = "xxxxxxxxxxxxxx"</code></pre> 次に、src配下にlibsというフォルダを作成し、そこにclient.jsを作成して下さい。 ここに、createClientというAPIをインポートし、API_KEY、SERVER＿DOMAINを利用して、データ取得するfunctionを記載していきます。<pre><code>// src/libs/client.js

import { createClient } from 'microcms-js-sdk'

export const client = createClient({
 serviceDomain: process.env.NEXT_PUBLIC_SERVICE_DOMAIN,
 apiKey: process.env.NEXT_PUBLIC_API_KEY,
})</code></pre> 一覧ページを作成していきます。index.tsxを開いて下さい。 <pre><code>// src/page/index.tsx

import Head from 'next/head'
import React from 'react'
import { client } from '../libs/client'

interface Article {
 id: string
 title: string
 publishedAt: string
}

interface Contents {
 contents: Article[]
}

export default function Home({
 blog,
}: {
 blog: { id: string; title: string; publishedAt: string }[]
}): JSX.Element {
 return (
 &lt;div className="flex flex-col items-center justify-center min-h-screen py-2"&gt;
 &lt;Head&gt;
 &lt;title&gt;Create Next App&lt;/title&gt;
 &lt;link rel="icon" href="/favicon.ico" /&gt;
 &lt;/Head&gt;
 &lt;div&gt;
 &lt;ul&gt;
 {blog.map((blog) =&gt; (
 &lt;li key={blog.id}&gt;
 &lt;p&gt;{blog.title}&lt;/p&gt;
 &lt;/li&gt;
 ))}
 &lt;/ul&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 )
}

export const getStaticProps = async () =&gt; {
 const data: Contents = await client.get({ endpoint: 'blog' })
 return {
 props: {
 blog: data.contents,
 },
 }
}</code></pre> <img src="https://images.microcms-assets.io/assets/b7c43d0b3f1b486686b81049ed4728f7/aa76bcadc0004f4a99f3ff6d5c488133/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-06-13%2023.25.39%EF%BC%882%EF%BC%89.jpg" alt=""> このように、あなたが投稿したブログの記事のタイトルが全件取得出来ていると思います。（公開している記事に限る） 各詳細ページについては、src/page/blog/[id].tsxとか言う感じで、ダイナミックルーティングを利用してやれば、実装出来ますね。 <a href="https://nextjs.org/docs/routing/dynamic-routes" target="_blank" rel="noopener noreferrer">https://nextjs.org/docs/routing/dynamic-routes</a> 今回は、ここまでとします。お疲れさまでした！！！ 「参考ドキュメント」 ・<a href="https://zenn.dev/higa/articles/d7bf3460dafb1734ef43#15.-%E7%92%B0%E5%A2%83%E5%A4%89%E6%95%B0%E3%81%AE%E8%BF%BD%E5%8A%A0" target="_blank" rel="noopener noreferrer">https://zenn.dev/higa/articles/d7bf3460dafb1734ef43#15.-%E7%92%B0%E5%A2%83%E5%A4%89%E6%95%B0%E3%81%AE%E8%BF%BD%E5%8A%A0</a> ・<a href="https://zenn.dev/hiro08gh/articles/a953f46a839ee7" target="_blank" rel="noopener noreferrer">https://zenn.dev/hiro08gh/articles/a953f46a839ee7</a> ・<a href="https://www.typescriptlang.org/ja/tsconfig#skipLibCheck" target="_blank" rel="noopener noreferrer">https://www.typescriptlang.org/ja/tsconfig#skipLibCheck</a> ・<a href="https://document.microcms.io/tutorial/next/next-top" target="_blank" rel="noopener noreferrer">https://document.microcms.io/tutorial/next/next-top</a>

Next.js + TypeScript + microCMSで技術ブログを作成してみた

<h2 id="h78012764d5">Expo React native tailwind-rn 環境構築</h2>tailwindscssを使ってみたい！ ということで、React-Nativeにtailwind-rnを導入してみました。 まずはInstallから。<pre><code>yarn add tailwind-rn
npx tailwindcss init</code></pre> ※環境が作成出来ていない方は、こちらからプロジェクトを作成しておいて下さい。 これで、自身のプロジェクト環境に、tailwind.config.js という構成ファイルが作成されていると思います。 この中で、色々カスタマイズすることが、出来るみたいです。 ここでは、環境構築に焦点を当てているため、割愛いたします。 ※詳しく知りたい方は、下記リンクの公式ドキュメントを参照してみて下さい！ <a href="https://tailwindcss.com/docs/configuration" target="_blank" rel="noopener noreferrer">https://tailwindcss.com/docs/configuration</a> 続いて、前記したconfig.jsファイルの内容に合わせてstyle.jsonを作成します。 作成方法は、以下コマンド<pre><code>npx create-tailwind-rn</code></pre> 導入自体は、これで完了になります。 あとは使用したいコンポーネントで、適宜importして適用させて試してみましょう！<pre><code>import tailwind from 'tailwind-rn'　;

export default function App(){
 return (
 &lt;View&gt;
 &lt;Text style={tailwind('text-red-500')}&gt;Hi !!&lt;/Text&gt;
 &lt;/View&gt;
 )
 }</code></pre> 公式ドキュメントのやり方を、備忘がてら書いてみただけなので、至らない部分も多いと思いますが ここまで、ありがとうございました。

Expo React native tailwind-rn 環境構築

<h1 id="hc6aac022bb">KeyChron k2 Review(KeyChron K2を１ヶ月以上使用してみた感想）</h1>※この記事は、あくまで個人のレビュー見解なので、参考程度にご覧ください！！ パンタグラフ式キーボードも良いけど、なんか程よい打鍵感がある、新しいキーボードが欲しいなーと思っていました。 HHKBは高すぎるし、そんな安すぎるキーボードもちょっとな。。。と考えていたところに、このキーボードを知りましたので、考えた上で購入しました！！ ということで、KeyChron K2　White&amp;Black 茶軸（メカニカルキーボード）を購入しましたので、１ヶ月使ってみた感じを書きたいと思います！ <img src="https://images.microcms-assets.io/assets/b7c43d0b3f1b486686b81049ed4728f7/4cda6ae7b9d248bfaf92b1514a03bb74/IMG_7995.jpg?w=4032&amp;h=3024" alt="keychorn k2 brown"> <h3 id="hdadc0eaacf">特徴</h3><ul><li>キー配置は、USキーボード</li><li>3デバイス間で接続可能</li><li>windows,Mac対応</li><li>ブルートゥース、有線接続対応</li><li>テンキーレス</li></ul> 日本において、大きいところでいうと、「 *USキーボード配置*」であることですね！ 普段がJIS配列を使用しているなら、購入を検討する方は、頭に置いといてくださいね！！ <h3 id="h84e8636772">購入方法</h3>英語のサイトには、なりますが断然公式よりお買い求めになるのが一番かと（通販は、高い。。。）※購入の際は、PayPalの登録またはクレジットカードが必要になりますので、準備しておいて下さい。 英語の勉強から離れて、５〜６年経つ筆者でもGoogle翻訳さんのご協力を頂いて、問題なくスムーズに購入出来ましたので、 言葉については、大きな問題なく出来ると思います。 ※住所情報を入力する際は、日本語入力した住所を英語変換してくれるサイトがあるので、無用なトラブルを避ける為にも、そういうのを利用して下さいね！ こんな形で、調べたらなんとでも出てくると思います。 <code>住所　英語変換</code> <h3 id="hd4a46c13ec">値段</h3> 冒頭にも記載しましたが、私が購入したのは、Keychron K2 Wireless Mechanical Keyboard (Version 2)　White&amp;Black　Brownです。 パームレストも同時購入したので、Totalとしては keyboard $62.1($69.0の10%offです) + palm rest $22.5 + shipment fee $20,0 = $104.6(購入当時2021年4月時点で1万2千円ほど） レートについては、状況によって変動しますので、適宜確認してみて下さい！ 10％Offクーポンが使用出来ますので、使われたほうが、少しお得に購入出来ますよ。 <code>FR-otJDLyIA1G0QH2F8</code> <h3 id="hb684b54523">購入後の流れ</h3>購入後は、DHLという運搬会社さん経由で、郵送されます。 購入後、発送準備が整った段階で送信されてくるメールに記載されているTrackリンクから状況が終えて、1週間ほどで到着しました。 普段Amazonで１〜２日で到着するのが日常になっているので、問い合わせようか不安になりましたが、最低１週間は気長に待ちましょう！ 外箱に傷とかも見られますが、しっかりと梱包されていたので、凄い嬉しかったですね。初期不良なく使えそう。 （初めての海外サイトでの購入だから、ちょっと不安だった。。。） <img src="https://images.microcms-assets.io/assets/b7c43d0b3f1b486686b81049ed4728f7/e3d9b1dc4aa143e9b417ee55e8253326/IMG_7990.jpg" alt=""> 付属品は、<ul><li>MacとWindowsのキー表記切り替えようのキーキャップ</li><li>キーキャップを取外ための器具</li><li>有線接続ケーブル</li></ul><img src="https://images.microcms-assets.io/assets/b7c43d0b3f1b486686b81049ed4728f7/6e7c7870b234461fabe50ceb0f584ea4/IMG_7997.jpg" alt=""> <img src="https://images.microcms-assets.io/assets/b7c43d0b3f1b486686b81049ed4728f7/b040ebcbd76a4e71bf10673f30b76719/IMG_7999.jpg" alt=""><h3 id="h881e1ddbfc"> 1ヶ月使用してみた感じ</h3>総評：本当に買ってよかった。最高！打鍵感：期待通りのスコスコ感。ですが、ハッキリ言ってウルサイのはウルサイと思いますｗサイズ感：コンパクト！男性の筆者は、手は普通サイズと思いますが手が小さい方でも問題なく使えると思います。US配列：これが、また最高に使いやすい。バッククオート、バックスラッシュ、セミコロンがワンキーで入力出来るのが嬉しいんですよね。。ｗ　　　　プログラム書くときとかは、重宝しています！JIS配列→US配列なので、タイピングミスは多かったですが、慣れって怖いですね。1週間使えば慣れてしまいます。 購入を検討されている方に ソコソコ厚いキーボードなので、パームレストは持っていない方は、ケチらずに購入した方が良いと思います。 購入しなくても、代替品がある方は、それで良いと思います。 筆者自体は、普段はスタンディングデスクでの作業なので、パームレストが無くても、そこまで気になりませんが、座って作業をする時は、パームレストが無いと腕シンドってなりました。。。。 打鍵音も、小さくはないので、プログラム書いてる最中に話しかけられたくない方は、「カタカタカタ...」が「話しかけるな」合図に使えるかもしれませんねｗ <h3 id="h3bcda3e6b0">最後に</h3>総評：☆4.5<ul><li>打鍵感：最高</li><li>コスパ：この価格帯であれば、全然大満足</li><li>見た目：コンパクトで、シンプルでデザインも最高</li></ul> そんなにお金は費やせないけど、新しいメカニカルキーボードを探している方は、一度ご検討されてみてはいかがでしょうか！ ※最後に2点注意事項！！ ・「K2」に関しては技適マークがありませんのでご注意ください！日本で無線で使用したいって方には、注意が必要です。 	色んな、レビューを見ましたが、以外と言及されていないので、きちんと書いておきます。 	最近、技適マークのあるKeyChorn K1が発売されているみたいなので、こちらを検討してみても良いかもしれませんね。 ・USキーボード配列なので、JISキーボードとの違いを認識した上で、ご購入をご検討して見てください。 !!ご一読、有難うございました!!

記事一覧

Category

Tags