• WEB関連の仕事を始めて4年
• フリーランスのコーダーになり半年

が経ったわけですが…

コーダーになった記念に、夫が「MacBook Pro 8GB 13inch」をプレゼントしてくれたんです。

aimi

これまではWindows組だったからね！

慣れるのに大変かな〜？と思ってたら、全然心配いりませんでしたw

その使い心地が最&高でたまらないので、レビューを書いていきたいと思っています♪

最新モデル Apple MacBook Pro (13インチPro, Touch Bar, 1.4GHzクアッドコアIntel Core i5, 8GB RAM, 256GB) – シルバー

created by Rinker

Apple(アップル)

• 楽天リーベイツ
• Amazon
• 楽天市場
• Yahooショッピング

コーディングには「MacBook Pro」一択な5つの理由

①【_など、よく使う半角記号】Windowsで打ちにくい記号が一発変換

コーディングって、独特の記号を使います。

Progateなどの教材で学びながら進めていた当初は、ノートにとりつつ「全角→半角→全角」なんて切り替えもしばしば。

しょっちゅう切り替えていたので、”変換ストレス”に悩んでたのです。

それが、Macにしてから心配は消え…

むしろ執筆・変換スピードは早まったんですよ！

aimi

コード入力以外のことに、気をもみたくなかったし

かなり助かったわ…！

特に助かったのは、「_」ですかね。

Windowsではキーボード上にすら、その表記すらなく。

どうすればいいか、そのたびググって途方に暮れていましたからねw

「ろ」の上に表記がある！と感動しましたw

googleドキュメントにメモしながら学習を進めていました

②【忘れたパスワードも全部記憶ずみ】Windowsからの引き継ぎは「Chrome拡張」でバッチリ

実は「Macbook Pro」をプレゼントしてもらってから、設定がだるくて１ヶ月放置してしまってたんです。

その理由はコーディングもそうなんですが、もうひとつの仕事「ブログ執筆に支障が出そうだな」と思ったから。

• 記事を書くにあたってたくさんの「ブックマーク」を登録しており、それを登録し直すのがだるい
• 1日つぶれる作業だな〜
• パスワード＝メモ見ながら再ログイン？全部わかるか自信ない

と放置。

しかしそんな悩みは、今思えば”ちっぽけなもの”でした。

引き継ぎに二の足を踏んでいたのは、なんだったんだ…？と思うほど。

「Chrome拡張」同期機能※のおかげでなんともなくなりました。

（ブラウザ、Chrome使っててよかった…！）

aimi

さっさと変えとけばよかったよ！

「Chrome拡張」同期機能とは？
…「ブックマークの引っ越し」機能を使えば、どのPC・スマホ・タブレットにもインポートが可能！

【chrome】PC買い替え時にブックマークを引っ越しする方法 | コアースのブログ

みなさんはパソコンを買い&#26 ...

coeure.co.jp

③直感的な操作方法で、迷わない

MacはWindowsと違って、

• 「icloud」…apple製品すべて同期できるフォルダ
• 「隠すコマンド」…commandキーとoptionキーを押しながらHキーを押す（youtubeを画面を見ず、BGMとして使うのに便利）

など、Macならではの機能も充実！

いずれも直感的に使えるので、説明書もなにも必要ありません。

aimi

「作業BGM」はもっぱらyoutubeのジャズをかけています！

④液晶がキレイすぎる

背景が鏡のように映り込むくらい、ツルツルです

解像度がべらぼうに高く、高解像度の画像を鑑賞すると「現実」より美しいと思えるレベル。

aimi

言い過ぎじゃないですよ！

本当にキレイなんですってば！

その秘密は「IPS液晶」を使っているから。

Windows機では、量販店でよく見かける普及帯の製品ではIPS液晶は使っていないんです。

aimi

つまり、現実とほとんど同じキレイな色味で作業ができるんだよ！

だからWEBサイトを作るときも、お客様の要望に即合わせやすい&イメージが作りやすいんです。

私は写真の現像もこのPCで行なっていますが、がぜん作業が楽しくなりましたね。

私の作業スペース。有孔ボードと合わせDIYでテーブルを作ったので予算は１万円以下でした。

⑤1.37kgと軽い、持ち運んで気分転換にも最適

今は田舎に住んでいるので、あまり出かけることはありませんが、たまに友人と作業をするためにコワーキングスペースに出かけることもあります。

ケースに入れて、手提げカバンにIN!

Inateck ラップトップスリーブケース（13″ MacBook Air 2018/2019/2020、13”MacBook Pro 2016/2017/2018/2019バージョン、Microsoft Surface Pro X/7/6/5/4/3 専用 ブルー) PCインナーバッグ

created by Rinker

Inateck

¥2,380 (2021/04/07 08:10:16時点 Amazon調べ-詳細)

• Amazon
• 楽天市場
• Yahooショッピング

1.37kgと電話帳くらいの軽さ！

ちょっと遠出するときも憂鬱ゆううつになりませんです♡

本当に軽くて、旅の相棒にも最適です。

車中泊で九州を旅していたときも、持って行きました。

aimi

30リットルのザックにちょうど収まります！

おかげさまで出先でもお客さんのメールチェックだったり、ブログを書いたりすることができました。

さすがに私の趣味・登山のザックと兼用するわけにもいかず（汚れますからね…）PC用のザックを購入。

[カリマー] デイパック VT day pack F Sea Grey/Navy(シーグレイ/ネイビー)

created by Rinker

Karrimor(カリマー)

¥6,846 (2021/04/07 08:10:17時点 Amazon調べ-詳細)

• Amazon
• 楽天市場
• Yahooショッピング

メンズはかっこいいのがあっていいですね〜（羨望のまなざし）

[ザ・ノース・フェイス] リュック シャトルデイパック メンズ ブラック

created by Rinker

THE NORTH FACE(ザ・ノース・フェイス)

• Amazon
• 楽天市場
• Yahooショッピング

周辺グッズを集めるのも楽しかったり♪

「Macbook Pro」に乗り換えて不便になった点

Windowsが標準仕様のツールもわりと多い（ただし代替案アリ）

いっぽう、不便になった点もあります。

それはWindowsでないと使えないツールもあるということ。

使えてもワンクッション、ソフトを導入しなくてはいけなかったりするものもありました。

たとえばブログの検索順位を記録してくれる「GRC」という有料ツール。

「wine」というソフトを間に噛ませないと起動しないということで、やむなくダウンロードしました（泣）

こういうので、よけいな容量を食ってしまうというのは非常に残念ですね。

でも、逆にいうと今の所それくらいでしょうか？困った場面というのは。

少なくとも、コーディングにおいてはメリットばかりなのでした。

まとめ：「MacBook Pro」＝サクサク動作で画面もキレイ！まちがいなく「アガる」ツールなので購入してみてね（お金に余裕があれば）

ここで一度まとめましょう。

aimi

実際私がそうですからw

Apple MacBook Pro (13インチPro, Touch Bar, 1.4GHzクアッドコアIntel Core i5, 8GB RAM, 128GB)

2020年4月20日現在、13inch/128GBの最新モデルとなります。

楽天のポイントサイト「楽天リーベイツ」経由で購入すると、セール期間でなくても常時1％ポイントバックがあるのでオススメです。

もちろんキャッシュレス還元5%オフも適用♪

aimi

つまり4月20日現在ですと、

6%オフで8,388円もオトクになる！

是非チェックしてみてね♪

最新モデル Apple MacBook Pro (13インチPro, Touch Bar, 1.4GHzクアッドコアIntel Core i5, 8GB RAM, 256GB) – シルバー

created by Rinker

Apple(アップル)

• 楽天リーベイツ
• Amazon
• 楽天市場
• Yahooショッピング

以上、『【Windowsから乗り換えたゾ】コーディングには「MacBook Pro」一択な5つの理由』の記事をお送りしました。

関連記事

【初心者向けエディタ】「Code Pen」のリアルタイム・プレビューが秀逸な件

コーディングを始めるにあたって、エディタの悩みは深刻。

よりカンタンで使いやすい、サクサク動く無料のものをご紹介します。

オンライン教材では「AWS」をすすめられましたが、さっさと乗り換えて正解でした。

【初心者向けエディタ】「Code Pen」のリアルタイム・プレビューが秀逸な件

こんにちは、フリーランスエンジニア主婦のaimiです。本格的にサイト模写を初めて１ヶ月がたちました。私が普段使ってるエディタは「AWS（Amazon Web Services）」。オンラインのプログラミング講座「Skill Hacks」でもおすすめされているエディタだったので迷いなく使ってたんですが、いざ実際に模写で使ってみると…少しの変更もすぐ反映されないと、イライラしてしまってw

www.programmer.aimisuna.com

2020.04.21

本格的にサイト模写を初めて１ヶ月がたちました。

私が普段使ってるエディタは「AWS（Amazon Web Services）」。

オンラインのプログラミング講座「Skill Hacks」でもおすすめされているエディタだったので迷いなく使ってたんですが、いざ実際に模写で使ってみると…

少しの変更もすぐ反映されないと、イライラしてしまってw

さらにアップロードでの時間ロスに気づき…

aimi

集中力が途切れやすい私。

気分が乗ってきてる時ほど、フルアクセルで頑張るしかないのです…泣、でもこうも待たされるとちょっとね…

リアルタイムプレビューのあるエディタを探していたところ、見つけました…！

「CodePen（コードペン）」です！

「CodePen（コードペン）」とは？…無料で使えるリアルタイムプレビューOKなエディタ

無料で使える、リアルタイム・プレビュー可能なエディタです。

画面の小さいパソコンだとちょっと見にくいですが、左から順にHTML、CSS、必要であればJavascript、下にはプレビューです。

aimi

つまり、４画面がいっきに管理できるということなんですね。

以前使っていたAWSと比べると圧倒的に使いやすい＿φ(￣ー￣ )

その理由をご説明しますね。

codepenで模写中！

「CodePen」のメリット

リアルタイム・プレビュー

「CodePen」のプレビュー画面＝タイムラグなし！

本当にすぐ、自分の書いたコードが画面下のウインドウに反映されます。

クラウドブラウザのため、PCを変えてもどこでも利用可能

私のPCはMacですが、Windowsでももちろん使えます。

仮に漫画喫茶で急にコードを書かなければならなくなった場合でも、すぐに対応可能。

旅行先での客先トラブルがあっても、漫画喫茶さえあればお仕事対応できちゃいますよ♪（もちろん急な用事はないに越したことはないですが…）

WordPress埋め込み可能

私のブログはまだまだ記事数が少ないですが、いずれコードについても書いていこうと思っているので、この機能については棚からぼたもちでした( ´∀｀)

ブログにコードを貼り付けられるということは、

• 同じカスタマイズを共有できる
• 同じプロジェクトに加われる

ということ。

他のエディタでももちろんできるものもありますが、かなり使いやすいですし、コードも直感的にいじれて見やすいので万人に受け入れられると思います。

つまり、ブログに貼っても違和感がないということです。

これは助かりますね。

codepenの埋め込みもボタンひとつで簡単に出来る

実際の「埋め込みコード」は以下のようになります。

See the Pen
30DAYSトライアル模写 by aimi＠高知アウトドアライター (@aiaiminini)
on CodePen.

立ち上げ早い・同じPCならログイン不要

AWSで不満に思っていたのは

• 重い
• 立ち上げのたびにログイン・立ち上げ待ちの時間が必要（ファイルが溜まってくると余計長くなる）

など。

私は細切れの時間でコーディングすることが多いので、長く使っているうちに毎回ログインするのは非常に不便に思っていました。

なのでログイン不要なのはすごく時間節約になります。

codepenダッシュボード。プロジェクトを選べばすぐにに前回の画面に戻ります

無料機能でも、まったく問題ない

有料機能と大きなちがいは「画像ファイルを名前をつけて保管できる（AWSにはあった機能…）」ことなんですが、保管できなくてもgoogledrive(外部のurlで管理)を読み込ませればしっかり表示します。

詳しくは以下のブログを参考にさせていただきました。（リンク失礼します）

CodePenの無料会員で画像を使うには

こんにちは、ゆんつです。手軽にソースコードとその実行結果を表示してくれるとても便利なサービス「CodePen」。このCodePenで画像を使いたい場合があります。有料プランの場合はアップロードサーバーが用意されているので、そのサーバーに画像

konpure.com

チーム内でコードを共有できる

Githubのように、チーム内でコードを共有できるので「在宅ワーク」にはぴったり。

また”世界の知らない人が自分のコードを見てくれる”というのも、なかなか緊張感のある体験♪

自動保存機能あり

これはどのエディタでもそうだと思うのですが、「CodePen」にもしっかりと自動保存機能があります。

あまりに保存しないで作業していると「あなたは50つの未保存動作があります」と教えてくれますよ。

aimi

黄色い帯の「お知らせ」で教えてくれるので、すぐにわかりますよ♪

「CodePen」のデメリット

すべてが英語

右クリックの「翻訳」を使ってもいいのですが、肝心のコードまでが翻訳されてしまうww

なので翻訳機能は基本、使えません( ´∀｀)

しかし、全ての機能が直感で使えるので難しくありませんよ！

サービス終了したら使えない（埋め込みもはがす必要）

「CodePen」は2018年くらいから始まった新しいサービスですが、Webの世界は移り変わりが早いので突然サービスが終わることも考えられます。

その場合は引き上げるしかなくなります、仕方ないですね…

すべて公開されてしまう（非公開機能は有料）

メリットの項で申し上げましたが、チームでも使える・埋め込みでも使えるツール、ということ＝世界に公開されているということなので、見られたくないコードは有料プランで運用すべき。

または「Github」のようなツールもあるので、そちらを検討した方が良さそうです。

まとめ：「CodePen」は初心者にうってつけのコードエディタ

ここで一度まとめましょう。

aimi

無料でこれだけの機能が使えるなら、、、！

まさに初心者にうってつけのツールであることは間違いないです♪

いまは無料でもたくさんのエディタがあるので、迷ったらぜひ使って見てほしい「CodePen」。

ぜひチェックして見てくださいね！

以上、『【初心者向けエディタ】「CodePen」のリアルタイム・プレビューが秀逸な件』の記事をお送りしました。

関連記事

【Windowsから乗り換えたゾ】コーディングには「MacBook Pro」一択な5つの理由

コーディングを始めた当初、WIndows→「Macbook Pro」に乗り換えました。

今やMacの虜になってしまったのはいうまでもありません٩( ᐛ )و

ちょっと高いけれど、「稼ぐぞ！」というモチベーションを上げるアイテムとしてオススメです。

【Windowsから乗り換えたゾ】コーディングには「MacBook Pro」一択な5つの理由

こんにちは、高知の田舎でフリーランスのコーダーをしているaimiです。WEB関連の仕事を始めて4年/フリーランスのコーダーになり半年が経ったわけですが…コーダーになった記念に、夫が「MacBook Pro 8GB 13inch」をプレゼントしてくれたんです。

www.programmer.aimisuna.com

2020.04.21

【完全初心者向け】「Skill Hacks」を完走したので、徹底レビューする

本記事でも冒頭で紹介させていただいた、完全オンラインのプログラミング講座「Skill Hacks」。

69,800円買いきりで、永久質問無料！

HTML・CSSのほかに、BootstrapやRuby on railsの基礎が学べます。

（この言語の選択もナイスチョイス＆秀逸、これも記事内で理由説明しています。）

「スクールに何十万円もかけられないよ…！」という方は必見・要チェックのサービスです。

【完全初心者向け】「Skill Hacks」を完走したので、徹底レビューする

こんにちは、駆け出しフリーランスエンジニア主婦のaimiです。プログラミングはまったくの未経験だった私でしたが…先日、プログラミング講座「SkillHacks」を完走いたしました!しかしプログラミングってぜんぜん簡単じゃありません。じゃあなんで挫折せず最後までできたのか？その理由まで、書いていこうと思っています。

www.programmer.aimisuna.com

2020.05.01

【独学プログラミング】「SkillHacks」は高いの？完走した私が解説する

「SkillHacks」は質問無制限サポート付き・69,800円。

月数万円の収入しかない、私には思い切りの必要な金額でした。

完走してみて高かったのか？安かったのか？

ぶっちゃけた解説をさせていただきました！

【独学プログラミング】「SkillHacks」は高いの？完走した私が解説する

こんにちは、フリーランスエンジニア主婦のaimiです。先日「SkillHacks」を完走したよ！という記事を書かせていただいたのですが…「ぶっちゃけ、プログラミングスクールよりはお値打ちだよ！」という記事がたくさんありますが、69,800円だって決して安い金額じゃありません＿φ(￣ー￣ )

www.programmer.aimisuna.com

2020.05.03