本日、仕事があまりに早く終わったので、昨日のNuxtJsでやったプロジェクト作成の手順を忘れないうちに、英語でも振り返ってみようと思う。
まず、公式サイトに動画があるので、これをユーチューブから再生して文字起こしでデータをコピー。
貼り付け先は、VSC。コード用のテキストエディタであるが、英文の文字編集に大変活用できる。全体のワード検索から単語選択で文字起こしで違う単語が一発で変更できる。
で、そのあと、DEEPLで翻訳。もとの英文がこれ。（ここまでの作業15分くらい）
let’s get started with Nuxts
using crate Nuxt stop
we can use yarn,npx or npm .
i’m going to use yarn
type in yarn crate Nuxts dash app
and your project name .
let’s call this my next project
create Nuxt stop is now going to ask you a few questions
do you want the project name to be my nox project ?
yes!
so just press enter .
which language would you like?
javascript or typescript.
i’m going to choose javascript.
which package manager?
i’m going to choose yarn
do you want a ui framework?
i’m going to choose none.
but you could choose tailwind css,
viewify or whichever one you prefer here.
you can add some modules so that they are pre-configured for you.
axios for fetching data progressive web app.
or the content module a git based headless cms.
for now i don’t need any of these .
so i’m just going to press enter.
would you like linting ?
if you are not comfortable with using linters, then feel free to skip these.
however i am going to choose eslint and prettier
we use the spacebar to select the one we want.
let’s also add lint staged files and style lint to linter styles.
we won’t need comet lint but feel free
to select it if you like.
testing framework.
i’m not going to be adding tests at the moment.
so let’s just leave that as none.
rendering mode.
do we want universal or do we want a single page application.
universal is for server-side rendering and for static site generation.
so i’m going to go with that one.
don’t worry though.
we can easily change it later if we want to.
deployment target.
where are we going to deploy this application.
are we going to deploy it on a server,
on a node.js hosting.
or
are we going to deploy it on a static jam stack hosting .
well static jam stack is free.
so i’m going to choose that.
later on.
i can always change it.
by modifying the target in the next config.
jsconfig is recommended for vs code.
when not using typescript.
so let’s add that.
for this app.
we won’t be needing semantic pull requests or auto updating of dependencies.
although it is a really cool feature.
so,you might want to select it for your projects.
continuous integration?
i’m not going to be setting up any github actions in this project.
version control?
yes. i’m going to use git.
so let’s select it.
and that’s it!
i know that was a lot of questions.
but now everything is configured just how you wanted it.
next will do all the work for you.
so you don’t have to manually install and configure everything you selected.
now i can change directory using cd my nux project.
and then type yarndev and it’s going to
run my project.
on localhost 3000.
and there it is.
my next project.
nice work!
日本語訳後はこれ。
Nuxtをはじめよう
crateを使ってNuxtを停止する
yarn、npx、npmのいずれかを使用することができます。
今回はyarnを使います。
yarn crate Nuxts dash app と入力します。
とプロジェクト名を入力します。
これを次のプロジェクトと呼ぶことにします。
create Nuxt stopはあなたにいくつかの質問をします。
プロジェクト名は私のnoxプロジェクトにしますか？
と聞かれます。
はい！そのままEnterキーを押してください。
どの言語がいいですか？
javascriptかtypescriptです。
私はjavascriptを選択します。
パッケージマネージャーは？
yarnを選びます。
uiフレームワークは？
私はなしを選びます。
でも、cssはtailwindを選ぶといいでしょう。
viewifyなど、お好きなものを選んでください。
モジュールを追加して、あらかじめ設定されているようにすることもできます。
例えば、プログレッシブWebアプリのデータ取得のためのaxios。
あるいは、gitベースのヘッドレスCMSのコンテンツモジュール。
今のところ、私はこれらのどれもが必要ではありません。
というわけで、エンターキーを押します。
lintingはいかがでしょうか？
もし、リンターを使うことに抵抗があるのであれば、これらをスキップしてもかまいません。
しかし、私はeslintとprettierを選択します。
スペースバーで選択します。
また、lint staged filesとlinter stylesにstyle lintを追加しましょう。
comet lintは必要ありませんが、お好きなように選択してください。
を選択してください。
テストフレームワーク。
今はテストを追加するつもりはありません。
今のところテストを追加するつもりはないので、このままにしておきましょう。
レンダリングモード。
ユニバーサルにするか、シングル・ページ・アプリケーションにするか。
ユニバーサルは、サーバーサイド・レンダリングと静的サイト生成用です。
ユニバーサルはサーバーサイド・レンダリングと静的サイト生成用なので、これにします。
でも、心配しないでください。
後で簡単に変更できます。
デプロイメントターゲット。
このアプリケーションをどこにデプロイするか。
サーバーにデプロイするのか。
node.jsのホスティングにデプロイするのか。
それとも、静的なJamスタックホスティングにデプロイするのか。
静的ジャムスタックは無料です。
だから、私はそれを選ぶつもりです。
後で
いつでも変更可能です。
次のコンフィグでターゲットを変更することで、いつでも変更できます。
jsconfigは、対のコードにおすすめです。
タイプスクリプトを使用しない場合です。
ということで、それを追加してみましょう。
このアプリの場合。
このアプリでは、セマンティックプルリクエストや依存関係の自動更新は必要ないでしょう。
しかし、それは本当にクールな機能です。
というわけで、自分のプロジェクトにはこれを選択するとよいでしょう。
継続的インテグレーション？
このプロジェクトでは、githubのアクションを設定するつもりはありません。
バージョン管理は？
はい、Gitを使うつもりです。
そうです。
それで終わりです。
質問が多かったですね。
しかし、これですべてが思い通りに設定されたことになります。
次があなたのためにすべての作業を行います。
これで、選択したものすべてを手動でインストールしたり設定したりする必要がなくなりました。
これで cd my nux project でディレクトリを変更することができます。
そして 「yarn dev」と入力すると、私のプロジェクトが実行されます。
入力すると、私のプロジェクトが実行されます。
ローカルホスト3000で。
そして、これです。
私の次のプロジェクトです。
よくやった！
以上。
細かい修正は必要だけど、ほぼ9割以上は翻訳できているのではないだろうか。
これを、マルコピしてなんとなくレベルで言えるようになる。書けるようになってみたい。
そしたら、もう一段、英語レベルがアップすると思うんだよね。