javascript

defaultの有無 export default で書き出した値は、中括弧なしでimport できる。 export で書き出した値は、中括弧ありでimport する。 そしてさらに少しややこしくなるが、export で書き出した値は { xxx as yyy } とすることで任意の変数名に変えることができる。 とのこと。 参考：ES2015のモジュール機能(import/export) 実際に動かしてみた 上記の参考とまんまだが、実際に動かしてみた。 export default "uchida hyakken"; export const firstNaMe = "hyakken"; export const lastName = "uchida"; import name, { firstNaMe, lastName } from "./export"; console.log("name", name); // name uchida hyakken console.log("firstNaMe", firstNaMe); // firstNaMe hyakken console.log("lastName", lastName); // lastName uchida 下に小さくあるconsole ボタンを押して見ていただければ成功していることが確認できる。 うん、動かすことで理解が深まった。 export / import を使いこなすことで、ファイル管理を楽にしていこう。

前回、reactのファイルを検分したので、今回は、適当に触ってみる。 それじゃ、適当に触ってみる App.js編 まず、前回インストール時の時から依存ファイルをクリーニングした。 結果、非常にわかりやすくなった。 ざっと見た感じ、HTML部分の特別な違いは、class が classNameになること…くらい？ import './App.css'; function App() { return ( <div className="App"> <header className="App-header"> <p>HTML部分の特別な違いは、class が classNameになること...くらいかしら</p> <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer" >Learn React</a> </header> </div> ); } export default App; 上記コードで保存すると、 のように表示される。 ここまでは特別に難しくない。 App.css 編 次に、App.js の先頭に書かれている、 import './App.css'; を見ていく。 こちらも特別難しいことはない。 普通にcssを読みこんでいるだけなので、 color: white; → color: red; にすればテストの色が変更される、 この画像通りに。 特別難しいことはないが、 @media (prefers-reduced-motion: no-preference) {} font-size: calc(10px + 2vmin); とか個人的に知らない使い方があったので、勉強になる気がする。 てか、人のコードを見るのは勉強になる。 参考：意外と知らない？メディアクエリを使ってみよう。 参考：【CSS】vw、vh、vmin、vmaxとは？基本的な使い方 index.js 編 最後に、前述した App....

前回にreactの環境構築をしたので、今回はインストールしたファイルを細かく見ていくことにする。 react app のファイル構成 最初にインストールした時点で存在しているフォルダは下記一覧。 |--node_modules | |--(抜粋) |--public | |--favicon.ico | |--index.html | |--logo192.png | |--logo512.png | |--manifest.json | |--robots.txt |--README.md |--src | |--App.css | |--App.js | |--App.test.js | |--index.css | |--index.js | |--logo.svg | |--reportWebVitals.js | |--setupTests.js |--.gitignore |--package.json |--README.md |--yarn.lock node_modulesの中身は多すぎるので、抜粋した。 どうやらこの中でも必要じゃないファイルがいくつかあるらしいので、残しておくべきファイルを整理する。 必要フォルダ構成 |--node_modules // 必要 | |--(抜粋) |--public | |--favicon.ico | |--index.html // 必要 | |--logo192.png | |--logo512.png | |--manifest.json | |--robots.txt |--README.md |--src | |--App.css // 必要 | |--App....

react をインストールする 参考：Create React App npx create-react-app my-app-name 上記のコマンドで react が自動でインストールされる。 ※そんなことしないと思うが、「my-app-name」を「react」にすると怒られ、インストールできないので注意。私は何も考えずにそうして、無事に怒られた。 cd my-app-name 次にインストールしたディレクトリに移動する。 npm start で、ローカルホスト（http://localhost:3000/）が開かれる。 これだけで、reactのアプリが起動する。 起動だけを考えるとvue より楽かもしれない、vueはいろいろと選択する必要があるので。 まずはソースを覗き見る この時点で表示されているのは App.js のようで、 import logo from './logo.svg'; import './App.css'; function App() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p>Edit <code>src/App.js</code> and save to reload.</p> <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer" >Learn React</a> </header> </div> ); } export default App; 該当ソースがこんな感じで、Javascriptを使用してhtmlを吐き出している？ 正直、ぱっと見だとvue のtemplate構文のほうが見やすい気がする。 まあ、少しづつ、慣れていく。

ブログ更新ってめんどくさい ブログ更新は面倒くさい。 そんなこと分かり切っている。 なかでも面倒なことの1つにアイキャッチ画像の選定がある。 面倒なことを楽にできるのがエンジニアの特権だ。 ということでアイキャッチ画像を簡単に作れるようにした。 作成されるアイキャッチ画像 本ツールを作成できるアイキャッチ画像はこんな感じ。 「本ツールを作成できるアイキャッチ画像」の部分を簡単に変更できる。 作成するうえでの考え方 JavaScriptのCanvasに背景画像を描画する その上にCanvas で文字を書く 作成したコード <div id="creatEyeCatch"> <div class="input"> <input type="text" id="input" placeholder="記事タイトルを記入する"> </div> <canvas class="canvas" id="canvas--background" width="788px" height="486px"></canvas> <div class="operation"> <button id="deleteTitle">タイトルを削除</button> </div> </div> <script> // var const deleteTitle = document.getElementById('deleteTitle') // 背景CANVASの作成 const canvasGround = document.getElementById('canvas--background') const ctxGround = canvasGround.getContext('2d') const nove = new Image(); nove.src = '画像のパス'; ctxGround.drawImage(nove, 0, 0, canvasGround.width, canvasGround.height); // 入力されたタイトルを描画する関数 const drawFont = (el) => { ctxGround....