のんラボ

RustでHello Worldやってみた

2021/07/18 2021/07/18

RustでHello Worldやってみた こんにちは。のんです。 今回は前々からやってみたかったRust言語の勉強をしようと思って、やったことを記事にしてみました。 Rustに関しては本当に初心者なので、内容は間違っているかもしれません。今後のアップデートにご期待くださいということで... GitHubのリポジトリ GitHub - nonz250/rust-sample Contribute to nonz250/rust-sample development by creating an account on GitHub. 勉強用のリポジトリはこちら。 Hello Worldまでの道のり 正直Rustの開発環境をどのように作成するのかノウハウがなさすぎて非常に困りました。 というのもまともに触ったことのあるコンパイラ言語C#(.NET Framework)のみで、VisualStudioにすべてを任せていて、それ以外の言語の開発環境を作ったことがなかったのです。 Dockerイメージの選定 とりあえず、DockerHubにある公式のイメージを選択。 軽量OSのalpineで作成されている↓を利用しました。 https://hub.docker.com/_/rust https://hub.docker.com/_/rustを見る コンテナ ./app:/app:cache rust_dev_target:/app/target とりあえずソースコードが載るappを同期し、とバイナリが載る/app/targetをvolumeとして設定しただけの簡素なコンテナです。 copied.app: container_name: app build: context: ./ dockerfile: Dockerfile volumes: - ./app:/app:cache - rust_dev_target:/app/target working_dir: /app volumes: rust_dev_target: driver: local ビルドなどに必要なファイルを設定 どうやら、ビルドするためのcargoコマンドにはCargo.tomlが必要らしいので、公式ページなどを見様見真似で作成。 copied.[package] name = "sample" version = "0.1.0" edition = "2018" # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html [dependencies] [[bin]] name = "sample" path = "main.rs" ぶっちゃけ内容は謎。 Cargo.lockというファイルが自動的に作成されたが、これも謎。Rustのパッケージ管理をcargoがしてくれるのだろうか。と推測するくらいしかできない。 ともあれ、今回の目的はHello Worldを出すことなので、この勉強は次回にまわします。 ソースコードを記載 main.rsに下記を記載 copied.fn main() { println!("Hello, world!"); } ビルドと実行 cargoが動作するコンテナを用意したので、ビルドや実行はコンテナ経由で行います。 copied.docker compose run --rm app cargo build でビルドし、 copied.docker compose run --rm app cargo run で実行。 copied.docker compose run --rm app cargo run Finished dev [unoptimized + debuginfo] target(s) in 0.08s Running `target/debug/sample` Hello, world! なんとかHello Worldまでたどり着くことができました。 最後に コンパイラ言語の経験が少なすぎて、WEBで利用するときの完成形が想像できないのが非常に辛い。完成したコードのバイナリを実行して、待機させるイメージなのは想像つくけども、それを具体的な手順が想像できない... この辺が得意な方に色々教えていただく必要があるかもしれないなぁ。 次回からはこのコンテナを利用して簡単なチュートリアルをしてみようと思います。 あとは、リクエストをさばいてみるということもしたいかも。nginxとどのように連携することになるかは想像つかないので、ここもひとつ大きな壁になりそう... 頑張りましょう。 次回のRust記事はいつになるかわかりませんが、また記事にします。 その時はよしなに。 .

検閲なし!スマレジってどんなところ?に回答するシリーズ!【インタビュー編】

2021/06/02 2021/06/27

検閲なし!スマレジってどんなところ?に回答するシリーズ【インタビュー編】 こんにちは。のんです。 今回は私が勤めるスマレジの採用PRとなります。 https://corp.smaregi.jp/recruit/students/2023/ https://corp.smaregi.jp/recruit/students/2023/を見る 採用情報 | 株式会社スマレジ 企業サイト 株式会社スマレジの採用に関する情報です。「めちゃくちゃ良い!」が溢れる会社を目指して、当社が取り組む採用活動についてご紹介しています。募集職種や社員紹介をご覧いただけます。 弊社にはブログ手当という 開発関係のブログ記事 スマレジに関する記事 を書いていると月いくらかの手当をいただけるという制度があります。 私もその対象となっており、ふと、「スポンサーみたいなことをしてもらってるし、採用のお手伝いでもしようかな。」 と思ってPR記事を 勝手に(超重要) 書こうと思いました。 今回はよくある質問編ということで、カジュアル面談などでよく聞かれる内容について 公開できる範囲 で回答していきます! 今なら就職お祝い金がもらえるよ! スマレジHPの採用ページから先行を進んでJoinしていただいた方には就職お祝い金が支払われます!! 是非、応募してみて下さい!! TwitterでDM頂いても大丈夫です! 今回は弊社の採用PR記事になります!現在スマレジでは新しい仲間を募集中です!私はバックエンドエンジニアとして勤めていますが、どのように働いているかとか書いたつもりです!気になる方はDMして下さい👍https://t.co/s8DmEaEj0E#のんラボ#バイクに乗るエンジニア— のん🐘夜型言語 (@nonz250) March 28, 2021 では早速回答を始めます。 自己紹介 こんにちは。のんです😃 業界に入ってどれくらい? 2021年07月で、大体6年くらいになります。 ちなみに中途採用です。 前職では何をしていた? とある医薬系ソフトウェアハウスで、電子薬歴や、症例登録システムの開発をしていました。 電子薬歴の開発 レセコンとの連携機能 出退勤機能との連携 症例登録システム 登録マスタ管理システム 統計処理システム とか 小さいベンチャー企業だったので、システムの雑用的なこともやっていましたw パソコンのセットアップ エクセルの使い方レクチャー 開発システムの運用/サポート とか 今はどんな業務をしている? スマレジ・アプリマーケット スマレジ・アプリマーケットはスマレジにアプリを自由にダウンロードし、お好みの機能をスマレジに連携することができるスマレジ専用のアプリストアです。モバイルオーダー、EC、ポイント連携、在庫・顧客管理、予... スマレジ・デベロッパーズ - スマレジとコラボしませんか? スマレジの次期バージョン「スマレジ4.0」がリリースされます。「スマレジ4.0」では、開発パートナーが参加することができるスマレジプラットフォームを構築。スマレジのAPIを活用したアプリを販売できるス... スマレジ・ユーザーリクエスト - スマレジに欲しい機能を要望に出しませんか? スマレジ・ユーザーリクエスト - スマレジに欲しい機能を要望に出しませんか?を見る スマレジ・デベロッパーズ・コミュニティ スマレジ4・プラットフォームAPIについての技術的なコミュニティサイトです。APIの使用方法や、認証方法、アプリ作成のための知見を共有するためのコミュニティサイトとなっております。 この辺の開発をしています。 後半2つは外注したり、OSSを利用したりしているので、どちらかというと管理という感じです。 利用している言語や、ツールなどは 検閲なし!スマレジってどんなところ?に回答するシリーズ!【よくある質問編】 | のんラボ スマレジってどんなところ?に回答するシリーズ【よくある質問編】こんにちは。Nonです。今回は私が勤めるスマレジの採用PRとなります。 ... を見てください👀 趣味は? 休日はもっぱらツーリングしています。 このブログにツーリング記事たくさん載せているので、ぜひ見てみてください🏍 Z250でしまなみ海道ツーリング! | のんラボ Z250でしまなみ海道ツーリング!こんにちは。のんです。今回もツーリングの記事になります。技術記事更新してなくてごめんね🙏今回はしまなみ海道へ行ってきました。尾道へレッツゴー!お昼ごはん赤穂ICで降り... 部のミッションを教えて下さい 部のミッション...難しい質問ですね。 私が所属しているのは開発部となります。 ご存知の通り、開発部は スマレジ・POS スマレジ・ウェイター スマレジ・タイムカード などの主要システムや、それに付属するシステム(スマレジ・デベロッパーズとか)の開発をします。 弊社は自社アプリを開発する会社ですので、開発の上で重要視されるのは、お客様の要望をできるだけ迅速にできるだけ正確にお届けすることになります。 これがとても難しく、お客様のためと思った機能が実は使われなかったり、違う使い方をされたりすることもままあります。なので、どのような機能がよく使われて、どのような機能が使われないのかを分析したりすることもあります。 そのために、これまでの取引情報を分析するチームもいます。募集もしていますよ😃 取引情報などの会社概要はこちら 株式会社スマレジ 企業サイト 株式会社スマレジは、インターネット社会においてデザインとテクノロジーを駆使して「いい未来をつくる」ことを理念としたテクノロジー企業です。レジ、自販機、券売機、eコマースなど、世界中に広がる販売データの... 日々の業務内容 では、具体的に毎日どのような業務をしているのかという質問に回答させていただきます。 社内メンバーの全てが同じスケジュールではないので、以下は私の場合、ということになりますので、ご注意ください。 基本的に私は1人 + 委託メンバーで色々な作業をこなしているので、気持ちミーティングが少なめな感じですね。 08:00 〜 10:00 出社 10:00 〜 17:00 がコアタイムなので、出社時間には幅があります。大体09:30くらいから出社する方が多い印象です。 10:30 〜 11:00 デイリーMTG 委託メンバーとのミーティングを行います。本日の作業内容や、現在困っていること等を共有 / 解決する時間になります。 このようなミーティングは必ずメンバーが居る時間帯に行われる事が多いので、ご安心ください。 たま〜に時間がなくて、早い時間や遅い時間にミーティングがあることもあります。 11:30 〜 12:30 ランチ 12時から±1時間位でランチです。 11:30〜からランチをとる人が多い印象。 リモートになってからは12:00〜からが多いかもしません。 13:00 〜 17:00 開発業務 開発業務は大体この辺で集中的にしていますね。 もちろん、午前中にサクサクするときもありますが、こういうのは出社時間をコントロールして調整することもあります。 業務中は片耳イヤホンOKです。リモートになってからは、正直音楽聴きながらって感じですね。監視システムとかも無く、自由度は高いです。 17:00 〜 19:00 退社 この時間帯からチラチラ退社する方が出てきます。 のんさんにとってスマレジとはどんな会社ですか? わりと自由度高い会社 前職は医薬系ということもあり、結構厳しい会社でした。 自由ではあったんですが、お客様は医師や薬剤師。しかも命を預かる方々やシステムを相手にするので、納期やミスに対して厳しかったです。 スマレジはいい意味でミスに寛容ですし、納期もある程度融通が効きます。 逆に言えば、計画を自分で決めたり、要件定義をする必要なことなので、指示待ちになってしまう方には結構難しいかもしれません。自由度が高いからこそ。ですね。 また、音楽を聞きながらとか、副業がOKだったり、やりたいことはやらせてくれるイメージです。 最近では、おかげさまで資金的な余裕も出てきて、新しいサービスやインフラを利用できたり、技術選定にも幅が出てきました。 結構ドライなイメージ 従業員同士がプライベートなことに突っ込んでくることはそんなにないイメージです。昔ながらの家族経営というか、そういうアットホームな感覚は無いイメージです。 もちろん営業さんなどは傾向上、プライベートでも遊びに行っていますし、開発でも定期的に何かイベントをしている方々も居ますが、強制では無いです。 その分お昼にはランチ会制度があり、会社から1,000円給付され、特定のメンバーでランチに行く制度があります。(コロナ禍で一旦中止) 仕事とプライベートは別々にしたいという方や、ぶっちゃけ定時ダッシュしたい方にはオススメです。 エンジニアとして、色々な繋がりはできるかも...? 実は社内で仕事のやり取りがあります。チームを組んで、アプリを作成したり、HPの作成をしたり、家庭教師したり... これはスマレジの業務では無いので、噂で小耳にはさむ程度です。 私も受けた事が数回あります。 スマレジに入社して最も苦労したこと スマレジ・デベロッパーズの開発ですね。 外注に出していたのですが、その納品内容がひどく、その改修をしながら新規要望の追加などを行っていました。ローンチまでの時間も当初の予定どおりで、改修がなければ...というところだったのですが、ほとんど作り直しでした。 短い開発期間でローンチに耐えうる内容にするのは結構大変でした。 どう乗り越えてきたか 丁度このときに、ドメイン駆動設計という設計手法について勉強していたところで、単に実装するのではなく、今後のことを見通した設計をすることで、仕様変更や、機能追加に強い実装になったと思います。 機能追加・変更時にできるだけバグを出さずに迅速にリリースできるようにしたおかげで、大きな手戻りなくローンチ・リリースができたと思います。 とは言っても、まだまだ荒削りなところがあるので、ちょいちょいコードのリファクタリングをしています。 ちなみに、ドメイン駆動設計の勉強は社内の有志の勉強会で行っていました。この辺も記事にしていますので、見てみてください。 会社でドメイン駆動設計入門の読書会 #1 | のんラボ 会社でドメイン駆動設計入門の読書会した話こんにちは。Nonです。今回は会社で読書会をしている話をしようと思います。次回: ... 部が目指す1年後、3年後、10年後の姿 これもまた難しい質問ですね。 私の主観や、もし私だったら...という回答になってしまいますが、ご容赦を。 1年後 如何せん、人数が少ないです。 採用強化して、チーム開発を更に推し進めて行きたいと思います。 特定のチームはすでに本格的なスクラム開発をしており、着々のチームビルド進行中です。 今から入る方はこの辺のチームビルディングに根本から関われることになります。 3年後 チームが完成され、それぞれの開発ルールが確立されていることだと思います。 スクラムが必須というわけではなく、それぞれのチームがやりやすい方法を確立し、それに従ってメンバーが働けるようになっていると、より長期間システムが安定して動いていると思います。 このあたりから、比較的古いスマレジのシステム刷新が本格的に進んでいければと思います。 そのためには日々新しい技術に興味を持ち、自発的に学習できるメンバーが揃っていることも条件に入ってくるかもしれません。今はチームによってバラバラなので3年でこの気持ちも揃ってくればいいと思います。 10年後 システム刷新が全て済んでおり、それぞれのシステムが互いに影響を持たないようにできていると嬉しいです。 チームメンバーもマネジメントを得意とする方、技術を得意とする方でチームができており、ほとんどの意思決定をチーム内で行うことができるくらいになっていると良いなと思っています。 どんなメンバーと一緒に働きたいか 上記を目標としているので、 自分の開発しているシステムに愛着を持てる方 と一緒に働きたいと思っています。 なぜかというと、やはりクリエイティブな仕事で良いものを作るためには愛着は必要だと思うからです。 愛着があるから、システムの欠陥を見つけることができるし、 愛着があるから、機能追加に積極的になれます。 無関心なシステムを開発していてもモチベーションを上げることはできません。結果的に良いものはできないと思っています。 もちろん、技術に興味がある方にも入ってきてほしいですが、順位でいうと、これは2番目ですね。 技術は後からついてきますが、熱意はついて来ないとも思っています。 部のカルチャー(風土)を教えて下さい これまた難しい質問ですねw 今の所チームの風土という感じになりますね。 あくまで私目線ということをお忘れなく。 POSチーム スマレジの大黒柱のチームですね。 ここは連携というか、話し合いの濃いチームとなります。 最優先事項は組織内連携です。 カスタマーサポートとの連携 営業との連携 請求管理との連携 少し考えるだけで、これだけの連携と意思決定があります。 特徴といえば、やはり対人スキルでしょうか?POSチームには人と話すのが上手な方が多い印象です。面倒見が良いというか、人当たりが良いというか。 Waiterチーム ここは技術力のあるリーダーがいるチームです。 メンバーもそのリーダーに引っ張られるように技術力に関心が高く、機能実装をする際にそのようなつぶやきがSlackでよく見られます。 このチームの特徴は技術重視で安定稼働を目標としているところだと思います。 Timecardチーム とても穏やかな方々がメンバーとして揃っている印象です。 また、法律関連にノウハウが無いと実装できないチームでもあるので、技術だけではなく法律の勉強もできる方もいます。 最近、新しくシステム刷新を行っている最中なので、一番最新の技術に触れられるチームでもあるかもしれません。 求職者の方にメッセージ & 座右の銘 私の座右の銘は 「全身全霊」 です。 やけっぱちを起こすとか、根性見せるとか、そういうものではなく、自分の持てる技術の幅を広げ、その全てを自分の作りたいシステムに投入できる。 そのようなエンジニアの方と一緒に働きたいです! 色々な技術に触れたい! 自分のアイデアを商品として実装したい! こんな方は一度応募してみると良いかもしれません。 最後に 今回はPR記事でした。 スマレジは新しい仲間を募集中です! これからも色々なことを実現するために、是非この記事を読んでいるあなたの力を貸して下さい! 今なら就職お祝い金がもらえるので、こちらのページからの応募も忘れないように! 採用情報 | 株式会社スマレジ 企業サイト 株式会社スマレジの採用に関する情報です。「めちゃくちゃ良い!」が溢れる会社を目指して、当社が取り組む採用活動についてご紹介しています。募集職種や社員紹介をご覧いただけます。 私からも案内しますので、良ければTwitterにDMしてください!! 今回は弊社の採用PR記事になります!現在スマレジでは新しい仲間を募集中です!私はバックエンドエンジニアとして勤めていますが、どのように働いているかとか書いたつもりです!気になる方はDMして下さい👍https://t.co/s8DmEaEj0E#のんラボ#バイクに乗るエンジニア— のん🐘夜型言語 (@nonz250) March 28, 2021 次回はツーリングの記事になりそうですかね。 その時はよしなに。 .

スマレジの管理画面がIE非対応になるよって話

2021/06/01 2021/06/01

スマレジの管理画面がIE非推奨になるよって話 こんにちは。Nonです。 今回はしっかりとスマレジに関する記事を記載しようと思います。 お題はインターネットエクスプローラー(IE)についてですね。 お題の通り、非推奨、追々は完全停止になる予定です。 https://help.smaregi.jp/hc/ja/articles/360051247814--重要なお知らせ-Internet-Explorer-対応終了について https://help.smaregi.jp/hc/ja/articles/360051247814--重要なお知らせ-Internet-Explorer-対応終了についてを見る ユーザーにとっては寝耳に水? いえいえ、この前Twitterで話題になっていた通り、マイクロソフトがユーザーへ広く周知していましたね。 The perils of using Internet Explorer as your default browser Update March 12, 2019: Since this post was published, I’ve received some customer questions on the f... 実は、普段利用しているユーザーからもこのような声が上がっていました。 Windows10のIE11が提供終了へ!web界隈からの大歓声とIEのみ対応システムの今後について「お葬式あげて周知されてほしい」 Edgeの互換性モードの使い方も紹介してます。 ユーザーも実はIEから脱却したかったようです。 ではなぜIEから脱却できなかったのか。 利用するシステムがIEにしか対応していないシステムを利用しているから です。特に役所系のシステムや、大規模な機関系はその傾向が強そう。 古いシステムは大抵この問題で、IEを利用せざるを得ないですね。 でもスマレジは大丈夫。 実はスマレジは、かなり昔からIE脱却に向けて動いていました。 ブラウザが違うとどのようなことが起こるかというと、もちろんセキュリティリスクもありますが、新しいプログラム / デザインが適用できないんですよね。  「スマレジ3」というのを皆さん覚えてらっしゃいますでしょうか? スマレジがバージョン3になり、管理画面が大きく変わりました | クラウドPOSレジならスマレジ スマレジ管理画面のアップデートを行いました。※Ver.3.0.0管理画面のアップデートですので、現在ご契約中のお客様はログインするとそのまま新バージョンがご利用頂けます。【更新内容】PICKUP! ス... 実はこの管理画面の修正、ユーザビリティ / 機能の向上だけでなく、IE脱却の布石でもあったのです。 開発メンバーとしても、これは朗報。 IEとその他のブラウザ両方の動作を担保させながら開発するのはとても大変なんです。 比較的新しいサービスについては最初からIEを非推奨にしていますが、スマレジ三大サービスはすべてIEをサポートしていました。 これがなくなることで、開発スピードが早まるだけではなく、もっと便利でセキュアな機能を皆さんに提供できるということでもあります。 現在も三大サービス以外にたくさんの事業を展開している最中です。 良かったら皆さんもスマレジのことを調べてみてください。 スマレジ4もよろしくお願いいたします。 スマレジ・デベロッパーズ - スマレジとコラボしませんか? スマレジの次期バージョン「スマレジ4.0」がリリースされます。「スマレジ4.0」では、開発パートナーが参加することができるスマレジプラットフォームを構築。スマレジのAPIを活用したアプリを販売できるス... スマレジ・アプリマーケット スマレジ・アプリマーケットはスマレジにアプリを自由にダウンロードし、お好みの機能をスマレジに連携することができるスマレジ専用のアプリストアです。モバイルオーダー、EC、ポイント連携、在庫・顧客管理、予... 最後に 今回はIEについて書きました。 私の意見はIEが「悪」というわけではありません。IEが世間のネットリテラシーを高める要素になりましたし、使いやすいブラウザ、OSを出現させる要素にもなりました。 IEは「古い」んですよね。「イイモノ」なんですが、「古い」んです。旧車から新車へ乗り換える気持ちでブラウザも乗り換えましょう! (さて、次はSafariか) 次回は新卒向けになにか一つ書こうかなと思っています。 その時はよしなに。 .

Youtubeの埋め込み動画をレスポンシブ対応する!【備忘録】

2021/05/29 2021/05/29

Youtubeの埋め込み動画をレスポンシブ対応する!【備忘録】 こんにちは。のんです。 今回は備忘録ついでにYoutubeの埋め込み動画のレスポンシブ対応について記事にしようと思います。 私がCSSに触れるのはもしかして初めてかもしれません! まずは結論 私はこのように対応しています。 copied.<div class="movie_wrap"> <iframe width="560" height="315" src="{$url}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen> </iframe> </div> copied..movie_wrap { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; overflow: hidden; } .movie_wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } youtubeの埋め込み動画とは? copied.<iframe width="560" height="315" src="{$url}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen> </iframe> のことですね。ご自身のブログやらに埋め込むときに利用している方は多いのではないでしょうか? iframeの問題点こそレスポンシブ対応していないこと しかしiframeですと、そのままではレスポンシブ対応していません。 width="560"や、height="315"とあるようにそのまま貼ると固定長で、スマホのときにはみ出したり、PCのときに小さかったりします。 それを解決するためにiframeにスタイルを当てたいのですが、単純にiframeに対してwidth: 100%を当ててもレスポンシブにはなりません。 つまり、iframe自体の縦横比は固定にしたままレスポンシブにしたいということになりますね それをするためにはiframeのサイズは常に100%にする必要があるので、 copied.iframe { width: 100%; height: 100%; } しかしこれでは縦に長過ぎます。 ここで、登場するのが、ラップですね。 予め、iframeを格納するレスポンシブなコンテナを用意しておいて、そいつに対して常時100%にすれば、レスポンシブ対応できるという考えです。 ですので、iframeにはposition: absolute;を追加して、 copied.iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } となります。 更にレスポンシブなコンテナはposition: absolute;なiframeを格納するので、position: relative;を設定した上でレスポンシブなwidth: 100%を当てて、 copied..movie_wrap { position: relative; width: 100%; } また、高さは無くしてheight: 0;、padding-bottomで表示範囲を調整します。 ちょうどいい塩梅なのが、padding-bottom: 56.25%;ですね。 copied..movie_wrap { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; } 最後にoverflow: hidden;を追加して終了です。 copied..movie_wrap { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; overflow: hidden; } 最後に これはyoutubeの埋め込み以外にも使えるテクニックなのでは無いでしょうか? すでに既出の技術かもしれませんが、備忘録ついでに書いておきました。 最近引っ越しを検討していまして、あまり技術記事が更新できずに申し訳ない... 6月中旬くらいには一段落つくので、それまでお楽しみに! そのときはよしなに。 .

Z250でしまなみ海道ツーリング!

2021/05/06 2021/05/06

Z250でしまなみ海道ツーリング! こんにちは。のんです。 今回もツーリングの記事になります。 技術記事更新してなくてごめんね🙏 今回はしまなみ海道へ行ってきました。 尾道へレッツゴー! お昼ごはん 赤穂ICで降りて、有名なお好み焼き屋さんで昼食。 http://www.hinase.ne.jp/~tama/ http://www.hinase.ne.jp/~tama/を見る ここは絶品なので、是非食べてみてほしい。 結構並びますが、並ぶ価値はありますよ。 ぷりっぷりの牡蠣がたくさん入っています。それも撮ればよかったなぁ... 岡山ブルーライン 正味最高だったね🏍 ここに行くだけなら高速ワープ使えるので、日帰りでもワンチャン大丈夫。 430号線付近で雨に降られる(いつもの) 一体雨男は誰なんだ... いい道何だけど、雨のせいか、印象が悪い。 尾道ふれあいの里で一泊 https://onomichi-radon-onsen.co.jp/ https://onomichi-radon-onsen.co.jp/を見る いつもの弾丸ツーリングなので、当日予約なのですが、土壇場で予約したわりにいい宿でとても良かった。 道中の道がとても良かった。周りは峠なので、時間に余裕がある方は一度走ってみるのもいいかも。 しまなみ海道 海を渡るだけあって、めっちゃ風強い いい景色! いい天気! いい道! いいバイク! 完璧!! こういう道を走るときにGoProとかあれば共有できるのになぁと思う。 購入を強く検討しよう!! 写真を撮ったところだけ!! 多々羅大橋 伯方の塩! は!か!た!の!塩! 最近ではこの伯方塩業(株) 大三島工場のみで稼働しているらしい。 でも、コロナで見学中止してた...お土産のお塩一人前しか手に入らなかった... 落ち込む相方 道中良さげな場所を発見!パシャリ。 来島海峡大橋 相変わらず写真写りの良い相方 四国の11号線を東に向かって、すぅ~っと流して二日目終了! 相方の体調悪しでゆっくり雑談ツーリングでした。 瀬戸大橋 瀬戸大橋記念公園 手前の瀬戸大橋記念公園でパシャリ。 与島PAでパシャリ 最後に 今回のツーリングも良きでした〜 2泊3日をギュッと一つの記事にしたのでまとまりが悪いかもですが、勘弁してくだせぇ。 あとしまなみ海道行くなら125ccとかのほうがやっぱりいいですね!カブなどが行列つくって橋を渡っているところを見ると、ちょっと羨ましく感じました! スーパーカブというアニメもやっているので見てみると良いかもです。 TVアニメ「スーパーカブ」公式サイト スニーカー文庫にて刊行中のライトノベル『スーパーカブ』 のTVアニメの最新情報がいち早くゲットできる!各種設定他、キャスト情報も詳細に解説! 次回はちゃんと技術記事書きます。 そのときはよしなに。 .

Z250の冒険日記 〜2021年 GW前 までまとめ〜

2021/04/29 2021/04/29

Z250の冒険日記 〜2021年 GW前 までまとめ〜 こんにちは。のんです。 ようやく暖かくなってきましたね。世間はコロナですが、そんなものはなんのその。ツーリングは再開していっています。 最近はテック系の記事ばかり投稿していたので、そろそろバイクの記事も投稿しようかなということで、2021年 GW前 までのまとめを1つの記事で全部投稿しちゃおうと思いました。 いい写真。 GW中のものは来月のGW明けにでも投稿しようかな。 結構前。シン・エヴァの時 ツーリングというか、目的がなかった僕らが無理矢理シン・エヴァをダシにした強引ツーリングですねw 友人がカメラを購入したので、めちゃくちゃ撮影してきますw カメラについてはこちら。 Z250でフォレストパーク神野山へツーリング! | のんラボ Z250でフォレストパーク神野山へツーリング!こんにちは。のんです。今回はバイク記事になります。2月にしては温かい週末があったので、それを利用して フォレストパーク神野山 までツーリングしてきました!... 決めポーズw とっさにポージングしたわりにキマってて草。 映画待機中 ブランチついでのコーヒーブレイク☕ カメラマン(友人)を取る自分📷 面白かったよ 完結してよかった。 映画終わりのツーリング。相変わらず渋い。 極のCMみたい 笠そば処 有名らしい。実際うまかった。 ここです。 地元笠で栽培したそばを100%使用した香り豊かなおそばの販売、高原野菜直売も行っております。 奈良県桜井市より地元笠で栽培した、そばを販売しております。そば打ち、野菜直売もございますので、お近くにお越しの際は是非お立ち寄りください。丁寧に仕上げた当店の、おそばを是非ご賞味ください。 うどん派?そば派?僕はそば派です。 おそばの写真は撮り忘れた😇 笠山荒神。でかい。キレイ。すごい。 笠山荒神社について|地元笠で栽培したそばを100%使用した香り豊かなおそばの販売、高原野菜直売も行っております。 奈良県桜井市より地元笠で栽培した、そばを販売しております。そば打ち、野菜直売もございますので、お近くにお越しの際は是非お立ち寄りください。丁寧に仕上げた当店の、おそばを是非ご賞味ください。笠山荒神につ... GW前のジャブ👊ツーリング 弁天の里 地元のTKG専門店。ここ。 弁天の里 (亀岡/定食・食堂) ★★★☆☆3.45 ■単品メニュー登場! ■予算(昼):~¥999 たまご食べ放題!! めっちゃライダーおる! 写真には写ってないけど、自転車の方もたくさん居ました! 何号線だっけ... いい道。 この日は二人。 GW前のメンテナンス 消耗品取り替え。洗車。チェーン清掃。 うーんピカピカ!✨ 最後に GWはどこに行こうかな。コロナすごいことになっているし、天気もあれそうだけど、GWは年に一回だけなんだよね。 瀬戸内海の島巡りツーリング行きたい。 相方と相談ですね。 GW明けにまた記録にしようと思います。テック系は次回はお休みかも🤔 その時はよしなに。 .

Node.jsで定期的にパッケージ更新する方法【備忘録】

2021/04/17 2021/04/17

Node.jsで定期的にパッケージ更新する方法【備忘録】 こんにちは。Nonです。今回はNode.jsのパッケージ管理について書いていきたいと思います。 どちらかというと自分向けの備忘録のような記事になるので、皆さんのお力になるかどうかはわかりませんが、新しい発見につながれば嬉しいです。 定期的なパッケージ更新をどうしているか? 正直、少し前までは npm update を実行して少し動作チェックして終了みたいな適当なアップデートでした。 でも最近になってようやくパッケージアップデート方法について調べるようになりました。 調査の結果、「これ便利だな」と思ったツールや手法をご紹介します。 1. npm outdated まぁ、皆さんご存知の王道コマンドですね。 copied.Package Current Wanted Latest Location Depended by @toast-ui/vue-editor 1.1.1 1.1.1 2.5.2 node_modules/@toast-ui/vue-editor src axios 0.18.1 0.18.1 0.21.1 node_modules/axios src bootstrap 4.3.1 4.6.0 4.6.0 node_modules/bootstrap src bootstrap-vue 2.19.0 2.21.2 2.21.2 node_modules/bootstrap-vue src cross-env 5.2.0 5.2.1 7.0.3 node_modules/cross-env src dayjs 1.8.16 1.10.4 1.10.4 node_modules/dayjs src eslint 7.14.0 7.24.0 7.24.0 node_modules/eslint src eslint-plugin-vue 7.1.0 7.9.0 7.9.0 node_modules/eslint-plugin-vue src firebase 7.6.1 7.24.0 8.4.1 node_modules/firebase src jquery 3.4.1 3.6.0 3.6.0 node_modules/jquery src laravel-mix 4.0.16 4.1.4 6.0.16 node_modules/laravel-mix src lodash 4.17.11 4.17.21 4.17.21 node_modules/lodash src popper.js 1.15.0 1.16.1 1.16.1 node_modules/popper.js src resolve-url-loader 2.3.2 2.3.2 3.1.2 node_modules/resolve-url-loader src sass 1.22.2 1.32.10 1.32.10 node_modules/sass src sass-loader 7.1.0 7.3.1 11.0.1 node_modules/sass-loader src vue-axios 2.1.5 2.1.5 3.2.4 node_modules/vue-axios src vue-cropperjs 4.1.0 4.2.0 5.0.0 node_modules/vue-cropperjs src このマイナーバージョンの最新版と、パッケージあとしての最新版が表示されるので、今どの辺のバージョンを利用しているのか一目瞭然ですね。 私はこのリストを見てどのパッケージを更新しようかを決めます。問題はこの後なのですが、パッケージ更新時 npm update package_name@version でアップデートするのは正直面倒です。 そこで利用したツールがこちら。 2. npm-check GitHub - dylang/npm-check: Check for outdated, incorrect, and unused dependencies. Check for outdated, incorrect, and unused dependencies. - GitHub - dylang/npm-check: Check for outda... このツールを使いました。 公式ドキュメントを読んでもらえばわかりますが、対話的にパッケージをアップデートを利用することができます。 いちいちコマンドでしてしなくてもいいですし、patch/minor/majorで区切りをつけてくれるので、気軽なアップデートにも向いています。 copied.? Choose which packages to update. (Press <space> to select) Patch Update Backwards-compatible bug fixes. ❯◯ lodash devDep 4.17.11 ❯ 4.17.21 https://lodash.com/ Minor Update New backwards-compatible features. ◯ dayjs 1.8.16 ❯ 1.10.4 https://day.js.org ◯ bootstrap devDep 4.3.1 ❯ 4.6.0 https://getbootstrap.com/ ◯ bootstrap-vue devDep 2.19.0 ❯ 2.21.2 https://bootstrap-vue.org ◯ eslint devDep 7.14.0 ❯ 7.24.0 https://eslint.org ◯ eslint-plugin-vue devDep 7.1.0 ❯ 7.9.0 https://eslint.vuejs.org (Move up and down to reveal more choices) 似たようなツールに npm-check-update があります。star的にはこちらのほうが多いです。記事も多い印象。私の使い方がおかしいのかもしれませんが、 npm-check のほうが使いやすかったので、こちらを取り上げました。 npm-check-updateのリンクはこちら。 GitHub - raineorshine/npm-check-updates: Find newer versions of package dependencies than what your package.json allows Find newer versions of package dependencies than what your package.json allows - GitHub - raineorshi... 3. npm install {package}@{version} --force パッケージ更新時にたまーにお互いがお互いを依存関係として認識してしまって、更新ができなくなってしまうので、そういう時は強制的にアップデートします。 npm install {package}@{version} --force を実行すると、依存関係をある程度無視してインストールしてくれるので、これを使用します。 このときに注意してほしいのは、当然強制アプデなので、テストをしっかりしておくことです。 ユニットテストがしっかり書けていれば、このコマンドを実行する閾は低くなりますね。 1 / 2 / 3 を繰り返し実行して、少しずつパッケージをアップデートすれば安全に更新作業ができるかと思います。 とはいえ、やっぱりこの辺の作業で安心するためにはテストは必須ですね。 特にフロントの更新になるのでE2Eテストもほしいところではあります。 CIでSlackなどに通知してくれるようにするのもいいかも npm outdated の内容をCIを回すたびに通知してくれるBotなどを作成すると、定期メンテナンスにつながるので良いですね。 ただ、Githubなどで自動で上がってくるBotを信じてマージするのは怖いかも。確かに便利ですが、やはりこの辺は手動でやったほうが安心感あります。テストが回るようになっていればいいのですが、そうでない場合はしっかり更新するパッケージを絞って作業するのが良いかもです。 最後に 今回は自分への備忘録として書かせていただきました。フロントの知識は半周遅れ感が否めないので、もと精進したいと考えております。 またまたこの辺の記事は更新していくつもりです。 その時はよしなに.

検閲なし!スマレジってどんなところ?に回答するシリーズ!【よくある質問編】

2021/03/28 2021/03/28

スマレジってどんなところ?に回答するシリーズ【よくある質問編】 こんにちは。Nonです。 今回は私が勤めるスマレジの採用PRとなります。 採用情報 | 株式会社スマレジ 企業サイト 株式会社スマレジの採用に関する情報です。「めちゃくちゃ良い!」が溢れる会社を目指して、当社が取り組む採用活動についてご紹介しています。募集職種や社員紹介をご覧いただけます。 弊社にはブログ手当という 開発関係のブログ記事 スマレジに関する記事 を書いていると月いくらかの手当をいただけるという制度があります。 私もその対象となっており、ふと、「スポンサーみたいなことをしてもらってるし、採用のお手伝いでもしようかな。」 と思ってPR記事を 勝手に(超重要) 書こうと思いました。 今回はよくある質問編ということで、カジュアル面談などでよく聞かれる内容について 公開できる範囲 で回答していきます! 今なら就職お祝い金がもらえるよ! スマレジHPの採用ページから先行を進んでJoinしていただいた方には就職お祝い金が支払われます!! 是非、応募してみて下さい!! TwitterでDM頂いても大丈夫です! では早速回答を始めます。 開発環境を教えて下さい。 PC エンジニアはMacBook Proのみです。 他の部署は知らない... GitLab / GitLab CI CD ソースコードのバージョン管理にはGitLabを利用しています。 CI / CDも、GitLabにあるGitLab CIを利用してデプロイやリリースが自動化されています。 PHPStorm / Visual Studio Code スマレジではPHPをメインの言語として開発しています。 以下の2つが主流。 エンジニアとして採用された方にはほぼ全ての方にPHPStormのライセンスを配布しています。 最近では、VSCodeを使う方も増えていますね。エディタ / IDEに関してのみ指定されることが多いです。 SQLクライアントツール 特に指定ありません。 AWS Aurora を利用しているので、MySQLに対応しているクライアントツールをみんな使っています。 何を使っているかなどのアンケートを行ったわけではないので、肌感で。 Docker ローカルでの開発はDocker利用しています。 採用言語 / フレームワークはなんですか? 言語 / FW使われているところ PHPサーバーサイドではほとんど全て。 LaravelAPI / 最近のプロダクト CakePHP少し前のプロダクト。2系と3系両方あります。 Vue.jsスマレジ・デベロッパーズなど一部の新規プロダクト Swiftリファクタリング中 Objective-Cスマレジ・アプリなど 使用しているツールを教えて下さい。 スマレジ社内でよく使われているツールです。 基本的に使用するツールはご自由に。というスタンスです。 Redmine スマレジ全体としてはRedmineを利用しています。 Redmine HP 管理や営業もこのツールを使用して開発と連携を取っています。 プロジェクトとしてのタスク管理は各チームで色々使用しているツールが違います。 Slack 社内のコミュニケーションツールはSlackを利用しています。 Google Workspace(旧:G Suite) メールやドキュメント、ファイルの共有などはこちらを利用しています。 他の一般的なツールはこちら 働く環境 チーム体制 部署は縦割りで、開発部のなかに各チームがあるイメージ 開発部 以下の3チーム + アプリ + インフラ + QA + その他 POSチーム スマレジ・POSの管理画面を開発するチームです。 弊社のメインプロダクトで、一番人数の多いチームになります。 何年も経営を支えているプロダクトなので、いわゆるレガシーコードの部類には入ってしまいますが、少し前にチームが一新して、コード改善に積極的です。 Waiterチーム スマレジ・Waiterの管理画面を開発するチームです。 ウェイターボックスというネットが遮断しても使えるサービスも提供しています。 セルフオーダーなどにも積極的で、スマレジ4を宣言してから更に活気づいてきているチームです。 Timecardチーム スマレジ・Timecardの管理画面を開発するチームです。 アプリの機能上、法律や金銭面などの専門的な知識が求められるチームでもあります。 アプリだけでなく、WEB上での打刻機能などはとても便利です。 アプリチーム iOS / Android アプリを開発するチーム。 色々な機材と連携する機能があったり、多機能なアプリを開発しています。 インフラチーム 大量のトランザクションを支えるインフラを構築・管理しているチームです。 おかげさまで利用者も増え、とりあえずのサーバー構築では耐えられなくなってきたところをこのチームが牽引して整備を進めています。 QAチーム 同様に利用者が増え、致命的な不具合を許容できなくなり、さらなる品質管理 / 品質保証を求めてチームが拡大中です。 このチームが各プロダクトのリリースに合わせてテストなどを行ってくれます。 その他 請求管理系システムを管理するチーム スマレジ4系のチーム その他赤ちゃんプロダクトを管理するチーム などです。 勤務体制は? 採用情報Q&A | 株式会社スマレジ 企業サイト 株式会社スマレジの採用情報に関するよくある質問と回答を掲載しています。 でもありますので、よければ見て下さい。 コロナ禍ということで、リモート体制が継続 原則、リモート。必要に応じて出勤。チームの判断に任せられている。という感じです。 また、リモートで特にパフォーマンスが落ちていないので、アフターコロナでも採用されるかもしれません。(この辺は未定なので、私の肌感ですが、私もそうなってほしいかも。) 当然ですが、監視ツールや、常時ミーティング接続などは必要ありません。 フレックスタイム制 / マイホリデー制 フレックスタイム制?コアタイム制?(この辺の正しい使い方は知らない)です。 時間- 08:00〜10:00出勤 17:00〜19:00退勤 です。 また、マイホリデー制度というものがあり、祝日や、夏季 / 冬季休暇を他の日に変更することができます。 めっちゃ助かる。うれしい。 私の趣味がツーリングなので、人が少ない日に休日をずらすことができるのは本当にうれしいです。 MTGは多いチームと少ないチームある こればっかりは機能追加の時期や、チームの特性などに左右されます。 スマレジ・POSの重要な機能についてはたくさんのステークホルダーを集めて、2時間くらいMTGすることもあれば、チーム内の数人で30分〜60分くらいで済ませられるMTGもあります。 開発者に有利な制度ってありますか? この辺も見ると良いかも。 https://corp.smaregi.jp/culture/smaregi-system.php 副業可 就業規則に違反しない範囲で副業が可能です。 詳細は面談や面接で聞いてみるのが良いかも! 書籍購入補助 よくあるやつですね。 でも私Kindleをよく使うのであまり使わないイメージ。 本の貸し借りがSlackでも行われているみたいです。 このようなものでしょうか? よくある質問は今後も追記していきます。 最後に 今回はPR記事でした。 スマレジは新しい仲間を募集中です! これからも色々なことを実現するために、是非この記事を読んでいるあなたの力を貸して下さい! 今なら就職お祝い金がもらえるので、こちらのページからの応募も忘れないように! 採用情報 | 株式会社スマレジ 企業サイト 株式会社スマレジの採用に関する情報です。「めちゃくちゃ良い!」が溢れる会社を目指して、当社が取り組む採用活動についてご紹介しています。募集職種や社員紹介をご覧いただけます。 私からも案内しますので、良ければTwitterにDMしてください!! 今回は弊社の採用PR記事になります!現在スマレジでは新しい仲間を募集中です!私はバックエンドエンジニアとして勤めていますが、どのように働いているかとか書いたつもりです!気になる方はDMして下さい👍https://t.co/s8DmEaEj0E#のんラボ#バイクに乗るエンジニア— のん🐘夜型言語 (@nonz250) March 28, 2021 次回は何を書こうかな。ちょっと考え中。 でも、記事は書きます。 その時はよしなに。 .

Z250でフォレストパーク神野山へツーリング!

2021/02/28 2021/03/01

Z250でフォレストパーク神野山へツーリング! こんにちは。のんです。 今回はバイク記事になります。 2月にしては温かい週末があったので、それを利用して フォレストパーク神野山 までツーリングしてきました! https://yamazoekanko.jp/spots/forestpark-konoyama https://yamazoekanko.jp/spots/forestpark-konoyamaを見る 友人が良いカメラを買ったので、それ使ってみよう 友人が買ったのはこれらしい。 カメラのことは詳しくないので全くわからないが、たしかにスマホの画像に比べるとだいぶ違いますね。 ちなみに、容量の都合上、このブログには劣化した画像を使用してます🥲 あとカメラマンである友人は写っていない... ちょっと悲しい;; まったり画像 なんかお昼寝したくなっちゃいますね😴 正直この日暖かったので、一緒に寝たろかとは思いましたww イエーイ✌午後ティーが目立つ テレワークのせいで、ちょっとした運動でも息が上がる...これは休憩中の写真です。 三脚で集合写真! うーむ...いい写真だ! それにしてもいい天気ですね。改めて見ても晴天だ。 最後に 久しぶりのツーリングでした〜 この日は暖かくて4月くらいの気持ちで走ってました。 ニット帽持っていきましたが正直いらなかったかも。 GoPro買ってYouTubeに垂れ流す計画が進行中です。ツーリング仲間とも色々楽しく動画や写真を作りたいと思ってますので、次の春にはコロナ落ち着いてくれるといいなぁ。 またその時は写真を投稿しますね。 そのときはよしなに。 .

NuxtでVue製の自作ライブラリを公開せずにインストールする方法と、そのときのエラー解決

2021/02/19 2021/02/19

NuxtでVue製の自作ライブラリをインポートしたときのエラーについて こんにちは。Nonです。 今回は前回に書いた記事 自分的Storybook + Vue環境の作成方法(CLIなし) | のんラボ 自分的Storybook + Vue環境の作成方法こんにちは。Nonです。今回は ... で作成したVueコンポーネントライブラリをNuxtへインストールする方法と、ハマったポイント、 Cannot use import statement outside a module が発生してしまう現象について書こうと思います。 パッケージ公開せずにインストール 前回の記事に書いたような内容は一般公開できないようなプロダクト専用のライブラリだと思います。 なので、リンク先の 外部でパッケージ利用できるように設定する でも書いたように、色々なパターンで利用されることを想定せずにVueコンポーネントそのものをビルドに時に自動インストールするか、コンポーネントをexportしています。 copied.import BaseButton from './src/components/atoms/Button/BaseButton'; const Components = { BaseButton, }; // ここで、Vueがinstallされようとするときに、自動的にinportしようとしている。 export function install(Vue) { if (install.installed) return; install.installed = true; Object.keys(Components).forEach((component) => { Vue.component(component, Components[component]); }); } const plugin = { install, }; let GlobalVue = null; if (typeof window !== 'undefined') { GlobalVue = window.Vue; } else if (typeof global !== 'undefined') { GlobalVue = global.Vue; } if (GlobalVue) { GlobalVue.use(plugin); } // ここでコンポーネントのexportをしている。 export default Components; これはlaravel-mixでのVue利用や、素のVueでimportされるときを想定しています。 インストール方法 GitHubやGitLabで作成したリポジトリをそのままインストールする方法は Githubにあげた個人のnpmパッケージをインストールする方法 - Qiita 始めにpublicには公開しないけど、他の案件でも使いますためにローカルで作成したnpmパッケージをインストールする方法について紹介します。CLIで動作するパッケージの作成方法はこちらの記事を参考にし... や nodejsで自作別リポジトリ(gitlab/github)をモジュール化して利用するには? - kei0425tan’s blog プログラムを作っていて、この機能をあのプログラムでも利用したいなぁ。。。といったことはよくあるかと思います。そういうときには、コピペしてしまうと整合性が取れなくなってあとで困ることになります。 なので... などの色々なブログで公開されているので、特に言及はしません。 package.json にこのように入力したり、 npm install するときにリポジトリ情報を指定することでインストール出来ます。このとき、しっかりとトークンを設定しておくことを推奨します。 copied."dependencies": { ... "smaregi-developers-ui": "git+https://{user_name}:{token}@example.com/path", ... } copied.npm i my-project-name インストールできたら node_modules の中に自作パッケージがインストールされているかと思います。 自作パッケージのインポート方法 Vueやlaravel-mixを利用したときには大丈夫だったのですが、Nuxtを利用したときにハマったポイントはこちらになります。 laravel-mixの場合 laravel-mixを利用してVueをインストールしている場合、 {project_root}/resource/js/app.js があると思いますので、そちらに自作コンポーネントをimportします。cssなどをjsで読み込む場合も同じです。 {project_root}/resource/js/app.js copied.import 'my-project-name'; // もともとあるコード 簡単ですね。自動インストールされるはずなので、特にコンポーネントを指定する必要もないです。 Nuxtの場合 外部パッケージ読み込み用のプラグインファイルを作成します。 ここではプロダクト専用のUIコンポーネントパッケージでしたので ui.js と名付けました。 ファイルの内容はこちら。 copied.import Vue from 'vue'; // storybookプロジェクトでexportしたコンポーネントをimport import Components from 'smaregi-app-market-ui'; // コンポーネント登録 Object.keys(Components).forEach((component) => { Vue.component(component, Components[component]); }); storybookプロジェクトでexportしたコンポーネントをimportするので、それをNuxtのVueに登録する必要があります。 次に、 {project_root}/nuxt.config.js に plugins フィールドがあるので、そちらに作成したファイルを指定します。 copied.// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins plugins: [ '@/plugins/ui', ], これで設定できたので、nuxtを起動されると... copied.npm run dev エラー発生 copied.Cannot use import statement outside a module 画面やログにはこのようなエラーが発生します。 エラー内容はES6関連のコードエラーのようです。 Trying ES6 style import gives 'Cannot use import statement outside a module' I am trying to write a javascript test in intellij for which I need to import some dependancies and ... Babel周りの設定がうまいことできていないような気がする。と思い色々調査するとNuxtではbabel用のトランスパイル設定があるようです。 build プロパティ Nuxt では、webpack の設定をカスタマイズして web アプリケーションを思いのままに構築することができます。 Cannot use import statement outside a module は import 構文を古いブラウザなどで使用できるようにするために、ES6未満の対応をするのですが、babelがその役割を担ってくれます。Nuxtはその辺も考慮されたFWなので、これを利用します。 plugins 情報を記載した、 {project_root}/nuxt.config.js の build フィールドに下記を追加します。 copied. // Build Configuration: https://go.nuxtjs.dev/config-build build: { transpile: ['my-project-name'] } 設定後、再度コマンドを実行。 copied.npm run dev エラーが発生せずにNuxtが起動すればOKです。 最後に Nuxtがどのような原理で外部パッケージのコンパイルなどを行っているのかはあまり理解出来ていませんが、どうやらパッケージ毎にコンパイルやトランスパイルの方法まで色々指定できるようですね。 この辺は少しずつ勉強して記事にしたいと思っています。 その時はよしなに。 .