【iphoneアプリ開発】swiftでiosアプリを作ってみた!Hello Worldチュートリアル

「アプリはアプリエンジニアに任せればええや」

というスタンスで逃げ切ろうと思っていた私ですが、

「1人でアプリからweb、インフラまで出来たらかっこいいじゃん」

という中二病モード入ったので、アプリの勉強をはじめました。

まずは、お決まりの「Hello World」を画面に表示するまでを勉強してみたので、本日は

「swiftとXcodeを使って、iphoneシミュレーターにHello Worldを表示する」

方法を紹介します!

Xcodeでプロジェクトを作成する

MacにXcodeをインストールして、起動。

真ん中の「Create a new Xcode project」を選択すると、以下の画面に遷移するので、「Single View App」を選択してプロジェクトを作成しましょう。(※プロジェクト名等は適当で大丈夫です)

以上で、swiftのプロジェクトが作成できました!

Main.storyboardにLabel(文字)を設置する

プロジェクトの作成が完了したら、左側のサイドバーから「Main.storyboard」を選択しましょう。

選択すると、

このような画面になります。

この画面がアプリを開いたときに表示されるページで、ここに様々なUIパーツを設置してアプリを制作していきます。

今回は、「Hello World」という文字を表示することがゴールなので、LabelというUIパーツを設置していきます。

右下の二重丸のマーク(Object library)から、「Label」を選択して、ドラッグ・アンド・ドロップでUI画面にパーツを設置します。

設置すると、以下のような画面になります。

文字を編集する

Labelという文字をUIに表示することは出来ました。最後に、このLabelという文字を「Hello World」に変更しましょう。

「Main.storyboard」を選択した状態で、右上の○が2つ重なっているアイコン(Show the assistant editor)を選択すると、以下の画面になります。

この状態で、左側のLabelパーツを「control」ボタンを押しながら、右側のソース部分にドラッグ・アンド・ドロップ。

すると、

このような吹き出しがでるので、上記のような設定でConnectを選択。

というコードが自動挿入されます。

これで、UIの表示をソースで変更できるようになりました!

最後に、Labelという文言をHello Worldに変更しましょう。viewDidLoad()関数の中に

「helloWorldLabel.text = “Hello World”

というソースを追加します。

これで、Labelという文字がHello Worldに変更されます。

※viewDidLoad()関数はアプリ起動時に一度だけ実行される関数です。

全体のソースは以下のようになります。

 

simulatorに表示する

これで完成しました!

自分で作ったプロダクトをSimulatorで確認しましょう。

左上の「再生マーク」を押すとsimulatorが起動され、以下のようにiphone画面に「Hello World」の文言が!!

※「Hel…」のように文字が省略されてしまう方は、XcodeのLabelの横幅をぐいっと引っ張って広げてください。

 

以上で、swiftを使ってiosアプリでHello Worldを表示するチュートリアルは終了です。

「iphoneアプリってWebアプリと違ってめんどくさそう」

というイメージだったのですが、意外とサクサク進められて楽しかったです!

よいアプリライフを♪

ABOUTこの記事をかいた人

新卒ノマドエンジニアとして独立し、半年で月収100万円を達成する。フリーランスのエンジニアとして活動しながら、事務所を売却(バイアウト)したり、Youtuber(最高月間視聴回数109万回、チャンネル登録者1万人)をしたり、Openrecの公式配信者としてゲーム生実況をしたり、ベンチャー企業のCOOをしたり、パラレルキャリアを歩んでいる。 2019年にミニマムライフコストを不労所得で稼げるようになったため、いまは好きなことだけ仕事にしています。