TIS ENGINEER NOTE

27才文系出身フリーランスエンジニアのブログ

プログラミング

Nuxt.jsで使える便利な設定・書き方をまとめていく

更新日:

存在感と注目度を高めているWebフレームワークであるNuxt.js。

今日はそんなNuxt.jsの開発をスムーズに行うための設定について、紹介していきます。

開発環境の構築は以下の記事で紹介していますので、Nuxt.jsに興味を持っているが、まだ触ったことのない方はこちらの記事を先にご覧になってください。

次世代のWebフレームワークであるNuxt.jsを使ってみる

開発における便利テクニック

ポートの変更

Nuxt.jsの開発環境は基本的にポート3000を使用します。この3000はRuby on Railsなどでも使われている人気のポジションなので、変えておきたいという人も少なくないでしょう。

開発環境におけるポートを変えたい場合は、package.jsonに設定を加えるだけで可能です。

いじったところはすでに記述してあるscript.devのnuxtの前にPORT=3333を加えた部分です。これだけでyarn(npm) run devを行った時にlocalhost:3000でアクセスできるようになります。

APIリクエストの準備

フロントエンド開発を行っているとほぼ実装することとなるAPIサーバーへのリクエスト処理。大体はaxiosなどのライブラリを使用する箇所で読み込んで使いますが、Nuxt.jsではaxiosのモジュールが用意されているので、そちらを利用することオススメします。こちらを利用することで各種設定や、ヘルパーの設定を柔軟かつシンプルに記載することが可能です。

モジュールのインストールとNuxtのコンフィグファイルに設定を追加するだけで可能です。nuxt.config.jsはスタートテンプレートを使った場合は最初から作成されていますが、フルスクラッチの場合でまだ存在しない場合はプロジェクトディレクトリのトップに作成してから編集して保存しましょう。

あとはリクエストするときは以下のように記述することで、効率よくAPI周りの処理を行えるようになります。他にもリクエスト/レスポンスにさいの共通して行いたい処理なども簡単に実装できますので特に強いこだわりがなければNuxtモジュールのaxiosを使用すると開発がスムーズになることでしょう。

GET
POST
共通処理など

公式ドキュメントでは詳しい設定や使用例を参照することができます。

スタイルシートにsassを使う

vueファイルの中でスタイルを記述する時にcssではなくsassを使いたいということも多いでしょう。そんな時もほとんど手間なく実装可能です。

上記コマンドを実行すれば、vueファイルにおいて、以下のような記載が可能となります。

fontawesomeを使う

Webフォントとして最も有名どころであり、使いやすさ・種類の豊富さに定評のあるfontawesomeですが、こちらもNuxtで簡単につかうことができます。Nuxtのモジュールにfontawesomeは用意されていますが、そちらが現在バージョン5に対応していないため、通常通りパッケージをインストールする形で導入します。

nuxt.config.jsに以下を記述します。

あとはソースコード内で以下のようにアイコンを配置することが可能です。

Normalize.cssを使う

スタイルシートの初期状態をいい感じに調整してくれるNormalize.cssもちょっとした手順で導入することが可能です。

あとはnuxt.config.jsに以下のように設定を加えることでNormalize.cssの導入が完了します。

まとめ

いかがだったでしょうか。開発を行う前に押さえておきたい設定、プラグインの導入をメインに紹介しました。

この記事で開発の土台はできたかとも思いますので、早速Nuxt.jsでのフロント開発を楽しんでいきましょう。

閲覧いただき、ありがとうございました。

よく読まれている記事

エンジニア独立

2018/1/2

転職したいエンジニアの背中を押す記事

知人であったり、SNS上で知り合いのエンジニアの中には、今の職場に不満を感じ、転職したいという思いを募らせている人が結構な割合います。 僕からしたら絶賛売り手市場であるエンジニア業界において、劣悪な労働環境に耐えるという選択は非常に勿体無いことだと考えています。 確かにIT業界における技術者というのは、非常に需要のある立場ですが、慎重に働く場所を選ばなければ搾取される可能性が高いです。 技術という武器を持っているエンジニアならば、ストレスなく効率よく働くべき場所を求めて行動を起こすべきだと思うんですよね。 ...

続きを読む

エンジニア独立

2018/1/2

プログラマーはIT土方なのか

プログラマーという働き方について、調べたときに必ずといって良いほど出てくる単語であるIT土方。 実際に土木関係に従事する人たちがどのような労働環境におかれているかは置いといて、基本的には以下のような状況を揶揄して使われている言葉です。 毎日終電まで残業させられる 納期のプレッシャーに追われる 忙しいのに低賃金 とにかく辛い そういった過酷な環境であるから、『プログラミングを楽しいと思っていたり、理数系の才能がある人間じゃなければ絶対になるな』という言葉もよく聞きます。 今回はプログラマーが世間でIT土方と ...

続きを読む

エンジニア独立

2018/1/13

エンジニア派遣でキャリアを積んで高収入を目指す

エンジニアとして採用面談を受けたことのある人なら分かると思うのですが、面談の時に最も重要視されるポイントは業務経験です。 もちろん普段の個人学習や、技術への関心などでフォローできる面もありますが、一番見られるのはどんな技術を使って、どんな業務を行ってきたかという点なんですよね。 採用する側もプロダクトの正否を左右する立場として責任を負っているわけですから当然です。 そんな時、良質な職務経験をどのように積むことができるか、というのがポイントになってきます。 今回はキャリア構築のための、派遣エンジニアという選 ...

続きを読む

エンジニア独立

2018/2/18

Webサービス・Webアプリケーションを作って公開するまでの流れ

エンジニアとして活動していくに際して、自分で作成し公開している制作物があるというのは非常に強力なアピールポイントとなります。 もちろんクオリティが高いに越したことはありませんが、自分で作成し公開までを行なったというだけでもかなりの評価を得られます。 これからエンジニアになりたい エンジニアとしてのキャリアアップ・キャリアチェンジを望んでいる という人には大変オススメのプロセスです。 実際僕もRailsを未経験の状態から勉強していた際の仕上げとして作成&公開したWebアプリケーションのおかげであっさ ...

続きを読む

エンジニア独立

2018/8/26

文系出身エンジニアが26才でフリーランスになった感想

こんにちは。フリーランスエンジニアのてぃすです。 フリーランスエンジニアということは、つまりエンジニアとして独立しているということになり、すごい敷居が高い印象を持っている人が多いです。 けど僕は文系大学出身かつ、プログラミングも社会人になって一年弱ほど経ってから初めて経験しました。 そんな経験の浅い僕が滞りなくフリーランスエンジニアとして活動して、報酬についてもある程度満足のいく額を得ることができています。 最近はフリーランスという働き方が脚光を浴びてきて、気にはなっている。けどなかなか踏み出す勇気が出な ...

続きを読む

-プログラミング
-,

Copyright© TIS ENGINEER NOTE , 2018 All Rights Reserved Powered by AFFINGER5.