• トップページ
• Blog

opensslでエラーが出てpemファイルが作れない場合

openssl rsa -in ~/.ssh/id_rsa -outform pem > id_rsa.pem

上記コマンドでPEMファイルを作ろうとすると以下のようなエラーが出る場合があります。

unable to load Private Key
4596061804:error:0906D06C:PEM routines:PEM_read_bio:no start line:pem_lib.c:697:Expecting: ANY PRIVATE KEY

以下の通りsudoをつけて実行するとうまくいきました。

sudo openssl rsa -in ~/.ssh/id_rsa -outform pem > id_rsa.pem

Reactでビルドした際にManifest: Line: 1, column: 1, Unexpected token.エラーが出る対策

publicディレクトリのindex.html中の以下の場所にcrossoriginの設定を追加すると出なくなりました。

<link rel="manifest" crossorigin="use-credentials" href="%PUBLIC_URL%/manifest.json" />

Emotionでエラーが出る場合に確認すべき点

CSS-in-JSのライブラリEmotionでエラーが出る場合に確認すべき点をメモしておきます

冒頭のコメントがない

/** @jsx jsx */ を忘れていませんか？

jsxコンポーネントの明示的配置

creat-react-appでEmotionとTypeScriptを後から導入した場合にエラー( jsx is not defined )が出る場合があります。

jsx; を各種importの下に追加して明示的に配置することで解決する場合があります。

詳細はこちらの記事にも書いています。

React + Emotion + TypeScriptでReferenceError: jsx is not definedのエラーが出る場合の対策

create-react-appで作ったReactのプロジェクトにCSS-in-JSのライブラリEmotionとTypeScriptを導入した際にエラーが出る場合の対策方法です。

DockerでWordPressを動かす

でコンテナを起動

/wp-json/wp/v2/postsにアクセスするとエラーが出てREST APIが使えない場合はWordPressのパーマリンクの設定を
http://localhost:3000/sample-post/

となるようにする。

Reactで画像を表示する方法

Reactで画像を表示する方法をメモしておきます。

Create React Appの場合

create-react-appでプロジェクトを作成している場合、使いたい画像の画像のパスを指定してimportして {モジュール名}を使ってimportした名前で呼び出します。

具体的には以下のような形です。

import Icon from './images/icon.svg'
const IconComponent = () =>{
  return <img src={Icon}  alt="アイコン" />
}
export default IconComponent

SVGがうまく表示されない場合、SVGファイルをテキストエディタで開いてimg/pngになっている部分をimage/pngにすると表示されます。

Webpackを設定する場合

create-react-appを使用せずwebpackでトランスパイルする場合はまずfile-loaderを追加します。

yarn add file-loader

webpack.config.jsのmoduleのrulesに以下の設定を追加します。

{
        test: /\.(png|jpe?g|gif|svg)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[path][name].[ext]',//
            },
          },
        ],
      }

コンポーネントへのimportの方法については先に掲載したcreate-react-appの時と同様です。

MacOS MojaveでGitが動かない場合の対策

MacOSをMojaveにアップデートした後ターミナル上でGitが動かなくなりました。具体的には以下のようなエラーが出ました。

xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Library/Developer/CommandLineTools/usr/bin/xcrun

【Visual Studio Code】コードフォーマッタ Prettierを使う方法

Pretterで何ができるか？

コードのインデントや改行、セミコロンの有無などのフォーマットをファイル保存時に自動で行います。問題があるコードではエラー表示をしてくれます。

ES6 アローファンクションの書き方

JavaScript (ECMAScript 6) ES6のアローファンクションの書き方をメモしておきます。

const func = x => {
 return x*2
}
console.log(func(4))

実行結果:8

引数 => { ファンクションの中身 }　という書き方です。

const func2 = (x,n) => {
  return x * n + 1
}
console.log(func2(2,4))

実行結果:9

引数が複数ある場合はカッコで括ります。
codepenでconsoleを表示すると実行結果を確認できます。

COSMIC JS入門 始め方とデプロイまで

COSMIC JSはCMSサービスを提供しています。
管理画面よりコンテンツを追加でき、APIリクエストで得たJSONを元に自分の好みのフレームワーク(React,Vue,Gatsbyなど…)でその内容を表示できます。またホスティングサービスも提供しています。デプロイ機能を使ってGitHubのリポジトリから開発したウェブサイト・アプリケーションをCOSMIC JSやNetlifyなどのホスティングサービスへ向けデプロイ可能です。

この記事ではCOSMIC JSの導入について説明していきます。

• 新しい記事へ
• 古い記事へ